/* Letzte Cleaning Prüfung: 23.09.2026
   Letztes Cleaning: 15.09.2026 */

/* Changelog
 *
 * 24.08.2026 - Publisher, Sprechblasen, Verlauf
 *   Neu   Thumbnailfeld des Publishers: kompakt ohne Bild, 16:9 in voller
 *         Spaltenbreite mit Bild (.has-image), Editor-Hinweis beim Ueberfahren.
 *   Fix   KI-Vorschlaege sind Sprechblasen mit hellem Koerper und Schweif;
 *         der Scroll-Container der Titelspalte schnitt den Schweif ab.
 *   Fix   Verlauf: Karten in einer Lesespalte (max. 1080px) statt Tabelle
 *         ueber die volle Breite, groessere Schrift, Akzentkante beim Hover.
 */
body.factory-page-active .factory-content { display: none; }

/* Creator Studio uses the same reading edge as the tool pages.  It is a
   workspace, not a centred landing page: preserve a calm outer gutter while
   letting the dashboard use the available width from the left. */
@media (min-width: 900px) {
  /* Keyword research is a focused two-choice briefing, not a narrow form
     stranded in the left column of a wide canvas. */
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 24px;
    padding: 26px 28px 28px;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form,
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-optional-fields {
    grid-column: 1 / -1;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 24px;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-picker,
  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-picker + .workspace-field {
    grid-column: 1 / -1;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-picker + .workspace-field textarea {
    min-height: 112px;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .workspace-optional-fields-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 24px;
    padding: 18px 22px 20px;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .workspace-optional-fields-grid .workspace-field:first-child {
    grid-column: 1 / -1;
  }
}

.keyword-research-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.workspace-field.keyword-research-mode-picker .keyword-research-mode-card {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 88px;
  padding: 15px 16px;
  text-align: left;
  font: inherit;
  line-height: normal;
  color: #eef1f8 !important;
  border: 1px solid #2d3140 !important;
  border-radius: 13px;
  background: linear-gradient(145deg, #171923, #11131a) !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.workspace-field.keyword-research-mode-picker .keyword-research-mode-card:hover {
  transform: translateY(-1px);
  border-color: #6a3342 !important;
}

.workspace-field.keyword-research-mode-picker .keyword-research-mode-card.active {
  border-color: #ff3151 !important;
  background: linear-gradient(145deg, rgba(255,49,81,.16), rgba(65,17,31,.38)) !important;
  box-shadow: 0 0 0 1px rgba(255,49,81,.2), inset 0 1px 0 rgba(255,255,255,.03);
}

.workspace-field.keyword-research-mode-picker .keyword-research-mode-card > .mdi {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #ff5470;
  background: rgba(255,49,81,.12);
  font-size: 19px;
}

.workspace-field.keyword-research-mode-picker .keyword-research-mode-card span { display: grid; min-width: 0; gap: 4px; }
.workspace-field.keyword-research-mode-picker .keyword-research-mode-card strong { color: #f7f8fb; font-size: 14px; line-height: 1.3; }
.workspace-field.keyword-research-mode-picker .keyword-research-mode-card small { color: #9ba4b8; font-size: 11px; line-height: 1.4; }
.workspace-field.keyword-research-mode-picker .keyword-research-mode-card em {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: auto;
  place-items: center;
  border: 1px solid #3a3f50;
  border-radius: 50%;
  color: transparent;
  background: #12151d;
  font-style: normal;
}
.workspace-field.keyword-research-mode-picker .keyword-research-mode-card.active em {
  border-color: #ff3151;
  color: #fff;
  background: #ff3151;
  box-shadow: 0 4px 14px rgba(255,49,81,.28);
}

@media (max-width: 720px) {
  .keyword-research-mode-cards { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  body:not(.factory-page-active) .factory-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-right: clamp(42px, 5vw, 92px);
    padding-left: clamp(42px, 5vw, 92px);
  }
}

body.factory-page-active .factory-workspace.open {
  position: fixed;
  z-index: 7;
  inset: 76px 0 0 var(--sidebar);
  display: block;
  padding: 0;
  background: #090a0f;
}

body.factory-page-active .workspace-backdrop { display: none; }

body.factory-page-active .workspace-panel,
body.factory-page-active .workspace-panel:has(.factory-processing),
body.factory-page-active .workspace-panel:has(.result-finished),
body.factory-page-active .workspace-panel:has(.image-result-finished),
body.factory-page-active .workspace-panel:has(.previous-image-choice) {
  position: relative;
  inset: auto;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: #090a0f;
  box-shadow: none;
  animation: factory-page-in .18s ease;
}

body.factory-page-active .workspace-header,
body.factory-page-active .workspace-panel:has(.factory-processing) .workspace-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 82px;
  padding: 18px 5vw;
  border-bottom: 1px solid #20222b;
  background: rgba(9,10,15,.94);
  backdrop-filter: blur(18px);
}

body.factory-page-active .workspace-header h2 { margin-top: 5px; font-size: 25px; }
body.factory-page-active .workspace-close { border-color: #303440; background: #151820; }

body.factory-page-active .workspace-body,
body.factory-page-active .workspace-panel:has(.factory-processing) .workspace-body,
body.factory-page-active .workspace-panel:has(.image-result-finished) .workspace-body,
body.factory-page-active .workspace-panel:has(.previous-image-choice) .workspace-body,
body.factory-page-active .workspace-body:has(> .workspace-form:not([hidden])) {
  display: block !important;
  width: min(1440px, 100%);
  min-height: calc(100% - 82px);
  margin: 0 auto;
  padding: 38px 5vw 80px;
  overflow: visible !important;
}

body.factory-page-active .workspace-body > .workspace-form:not([hidden]) { min-height: 0; }
body.factory-page-active .workspace-form > .workspace-group[data-current] { overflow: visible; }
body.factory-page-active .profile-actions { position: static; grid-column: 1 / -1; margin: 12px -2px 0; padding: 20px 0 0; background: transparent; }

/* Content ideas is an editorial workspace, not a narrow modal in the middle of
   a page. Keep the reading edge on the left and give the brief enough room. */
@media (min-width: 900px) {
  /* The Content-Ideen overview belongs to the page, not a centred modal.
     Keep its hero, summary and history on the same left reading edge as
     the workspace headline. */
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px clamp(42px, 5vw, 92px) 76px;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-page-hero,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-page-stats,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-history,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .content-calendar-history {
    width: min(1440px, 100%);
    max-width: none;
    margin-right: auto;
    margin-left: 0;
  }

  /* Keep the keyword-research overview on the same left reading edge as
     Content-Ideen; this state is shown before "Neue Produktion" is opened. */
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px clamp(42px, 5vw, 92px) 76px;
  }

  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-page-hero,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-page-stats,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .tool-history,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:not(:has(.factory-processing)):not(:has(> .workspace-form:not([hidden]))) > .content-calendar-history {
    width: min(1440px, 100%);
    max-width: none;
    margin-right: auto;
    margin-left: 0;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:has(> .workspace-form:not([hidden])) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px clamp(42px, 5vw, 92px) 76px;
    align-items: stretch;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:has(> .workspace-form:not([hidden])) > .workspace-intro-card,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:has(> .workspace-form:not([hidden])) > .workspace-profile-note,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:has(> .workspace-form:not([hidden])) > .workspace-form {
    width: min(1440px, 100%);
    max-width: none;
    margin-right: auto;
    margin-left: 0;
  }

  /* Keyword-Recherche follows the same left reading edge as Content-Ideen.
     The form is a working surface, not a centred dialog. */
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px clamp(42px, 5vw, 92px) 76px;
    align-items: stretch;
  }

  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) > .workspace-intro-card,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) > .workspace-profile-note,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) > .workspace-form {
    width: min(1440px, 100%);
    max-width: none;
    margin-right: auto;
    margin-left: 0;
  }

  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] .workspace-form > .workspace-group[data-current] {
    padding-right: 0;
  }

  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] .workspace-actions {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-form > .workspace-group[data-current] {
    padding-right: 0;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid {
    padding: 26px 28px 28px;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-field textarea {
    min-height: 150px;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-actions {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"]:has(.factory-processing) {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 76px clamp(42px, 5vw, 92px);
  }

  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] .factory-processing {
    width: min(1120px, 100%);
    max-width: 1120px;
    margin: 0;
  }
}

/* One shared, space-efficient production view: overview on the left, live steps on the right. */
body.factory-page-active .workspace-body:has(.factory-processing) {
  display: grid !important;
  align-content: start;
  justify-items: start;
  width: 100%;
  max-width: none;
  padding: 42px clamp(24px, 4vw, 64px) 48px;
}

/* Finished content-idea results use the same left-aligned page canvas as the
   production state instead of being centered inside the workspace. */
@media (min-width: 900px) {
  .factory-workspace.open:has(#workspace-body[data-tool="creator-content-ideas-generator"] .result-finished) .workspace-panel,
  .factory-workspace.open:has(#workspace-body[data-tool="youtube-keyword-research"] .result-finished) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.result-finished),
  #workspace-body[data-tool="youtube-keyword-research"]:has(.result-finished) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 38px clamp(42px, 6vw, 108px) 80px !important;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.result-finished) #workspace-result,
  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.result-finished) .tool-run-toolbar,
  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.result-finished) .result-finished,
  #workspace-body[data-tool="youtube-keyword-research"]:has(.result-finished) #workspace-result,
  #workspace-body[data-tool="youtube-keyword-research"]:has(.result-finished) .tool-run-toolbar,
  #workspace-body[data-tool="youtube-keyword-research"]:has(.result-finished) .result-finished {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

body.factory-page-active .factory-processing {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
  gap: 0 56px;
  width: 100%;
  max-width: 1240px;
  margin: 0;
  padding: 44px 48px 34px;
  border: 1px solid #252936;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(23,25,34,.98), rgba(12,13,19,.98));
  text-align: left;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

body.factory-page-active .factory-processing .processing-overview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 8px 0;
}

body.factory-page-active .factory-processing .processing-orb { margin: 0 0 20px; }
body.factory-page-active .factory-processing .processing-heading h3 { font-size: 28px; line-height: 1.12; }
body.factory-page-active .factory-processing .processing-heading p { max-width: 310px; }
body.factory-page-active .factory-processing .processing-progress { width: 100%; margin: 25px 0 10px; }
body.factory-page-active .factory-processing .processing-meta { width: 100%; }

body.factory-page-active .factory-processing .processing-stages {
  min-width: 0;
  padding: 8px 0 8px 48px;
  border-left: 1px solid #292d38;
}

body.factory-page-active .factory-processing .processing-stages-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 18px;
}
body.factory-page-active .factory-processing .processing-stages-head > span { color: #ff526d; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
body.factory-page-active .factory-processing .processing-stages-head small { color: #757b8b; font-size: 10px; text-align: left; }
body.factory-page-active .factory-processing .processing-steps { gap: 10px; margin-top: 16px; }
body.factory-page-active .factory-processing .processing-steps li {
  gap: 14px;
  min-height: 54px;
  padding: 12px 14px;
}
body.factory-page-active .factory-processing .processing-steps strong { font-size: 13px; }
body.factory-page-active .factory-processing .processing-steps small { font-size: 10px; line-height: 1.35; }
body.factory-page-active .factory-processing .step-state {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
}
body.factory-page-active .factory-processing .processing-steps li.active { transform: none; }
body.factory-page-active .factory-processing .processing-actions { grid-column: 1 / -1; margin-top: 20px; padding-top: 16px; border-top: 1px solid #242833; }
body.factory-page-active .factory-processing .processing-footnote { display: none; }

@media (max-width: 760px) {
  body.factory-page-active .workspace-body:has(.factory-processing) { display: block !important; width: 100%; padding: 20px 16px 28px; }
  body.factory-page-active .factory-processing { grid-template-columns: 1fr; gap: 24px; width: 100%; padding: 24px 20px 18px; }
  body.factory-page-active .factory-processing .processing-stages { padding: 18px 0 0; border-top: 1px solid #292d38; border-left: 0; }
  body.factory-page-active .factory-processing .processing-orb { margin-inline: auto; }
  body.factory-page-active .factory-processing .processing-overview { align-items: stretch; text-align: center; }
  body.factory-page-active .factory-processing .processing-heading p { max-width: none; }
  body.factory-page-active .factory-processing .processing-stages-head small { display: none; }
}

.tool-page-hero {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 26px;
  border: 1px solid #292c36;
  border-radius: 18px;
  background: linear-gradient(135deg,#14151d,#0e0f15);
}

.tool-page-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: rgba(255,35,71,.14); color: #ff304f; font-size: 27px; }
.tool-page-hero > div:nth-child(2) { display: grid; gap: 5px; }
.tool-page-hero span { color: #ff4966; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.tool-page-hero h3 { margin: 0; color: #f5f6f8; font: 650 22px 'Space Grotesk'; }
.tool-page-hero p { max-width: 780px; margin: 0; color: #8b91a0; font-size: 11px; line-height: 1.5; }
.tool-new-run { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 17px; border: 1px solid #ff304f; border-radius: 10px; background: #ff2347; color: #fff; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

.tool-page-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 18px 0 42px; }
.tool-page-stats article { display: grid; gap: 8px; padding: 17px 19px; border: 1px solid #242731; border-radius: 13px; background: #101118; }
.tool-page-stats small { color: #747b89; font-size: 10px; }
.tool-page-stats strong { color: #f3f4f7; font: 600 18px 'Space Grotesk'; }
.tool-page-stats article:last-child strong { font-size: 13px; }

.tool-history-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid #292c35; }
.tool-history-head h3 { margin: 7px 0 0; font: 600 26px 'Space Grotesk'; }
.tool-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* Wo die Kachel ein Blatt ist, gilt ein eigenes Raster. Es steht am Ende
   dieser Datei im Abschnitt "Dokumentverlauf" - dort, wo auch die Breite der
   Seite festgelegt wird. Beides gehoert zusammen: die Spaltenzahl ergibt sich
   aus der Kachelbreite, und die Kachelbreite aus der Breite der Seite.

   Bis zum 27.08.2026 stand hier eine zweite, schwaechere Rasterangabe
   (minmax(296px, 1fr), gap 16px), die von der unteren ueberschrieben wurde.
   Zwei Stellen fuer dieselbe Sache - und man sah der oberen nicht an, dass
   sie wirkungslos war. Hier bleibt nur der Abstand zur Ueberschrift. */
.tool-history-list:has(.tool-history-stapel) {
  padding-top: 18px;
}
.tool-history-row[hidden] { display: none; }
.tool-history-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-left: auto; padding: 0; color: #858d9c; font-size: 10px; white-space: nowrap; }
.tool-history-pagination button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #292e39; border-radius: 8px; background: #151820; color: #dfe2e8; cursor: pointer; }
.tool-history-pagination button:hover:not(:disabled) { border-color: #ff304f; color: #ff5973; }
.tool-history-pagination button:disabled { cursor: default; opacity: .35; }
.tool-history-row {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: 12px;
  min-height: 168px;
  width: 100%;
  overflow: hidden;
  padding: 18px 20px 16px 22px;
  border: 1px solid #1e212b;
  border-radius: 14px;
  background: #101219;
  color: #eff0f3;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: karte-auf .36s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay: var(--karte-verzug, 0ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@keyframes karte-auf {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-history-row { opacity: 1; animation: none; }
}
.tool-history-row::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #2f3542;
  transition: background .18s ease;
}
.tool-history-row:has(.tool-history-icon.success)::before { background: #1f9d63; }
.tool-history-row:has(.tool-history-icon.running)::before { background: #c8901f; }
.tool-history-row:has(.tool-history-icon.failed)::before { background: #d33a52; }
.tool-history-row:hover,
.tool-history-row:focus-visible {
  transform: translateY(-2px);
  border-color: #333846;
  background: #12141c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
  outline: none;
}

.tool-history-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-history-row > strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 42px;
  color: #fff;
  font: 700 17px/1.3 'Space Grotesk', sans-serif;
  letter-spacing: -.011em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Die Transkript-Kachel IST ein Papierstapel.

   Das Blatt liegt nicht mehr als kleines Bild in der Kachel - es fuellt sie
   ganz aus, dahinter zwei weitere Blaetter. Die Angaben stehen darauf.

   Damit die hellen Angaben auf dem hellen Papier lesbar bleiben, liegt ein
   Schleier dazwischen: oben duenn, damit man das Papier sieht, nach unten
   dichter, wo Name, Kennzahlen und Zustand stehen.

   Der Text auf dem Blatt ist absichtlich unlesbar (vier Pixel
   Weichzeichner). Er ist Darstellung, nicht Inhalt - gelesen wird im
   Ergebnisfenster. */
/* Kein Rahmen und kein eigener Grund: das Blatt IST die Kachel. Das
   Seitenverhaeltnis 1:1,35 kommt einem Schriftstueck nahe, ohne dass die
   Kacheln im Raster zu Tuermen werden. */
.tool-history-row:has(.tool-history-stapel) {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.35;
  min-height: 0;
  padding: 19px 20px 17px;
  border: 0;
  background: none;
  box-shadow: none;
}
/* Die Zustandsleiste am linken Rand entfaellt hier - der Zustand steht als
   Punkt am Symbol und als Wort im Fuss; eine dritte Stelle waere Laerm. */
.tool-history-row:has(.tool-history-stapel)::before { display: none; }
/* Und kein Zustandspunkt am Symbol: der gruene Haken lag als Fremdkoerper auf
   dem Papier, obwohl "Fertig" unten ohnehin im Klartext steht. */
.tool-history-row:has(.tool-history-stapel) .tool-history-dot { display: none; }
/* Die Angaben sitzen unten, wo der Schleier dicht ist. */
.tool-history-row:has(.tool-history-stapel) > strong { margin-top: auto; }
.tool-history-row:hover:has(.tool-history-stapel),
.tool-history-row:focus-visible:has(.tool-history-stapel) {
  border: 0;
  background: none;
  box-shadow: none;
}
.tool-history-stapel {
  position: absolute;
  inset: 9px 9px 9px 11px;
  z-index: 0;
  display: block;
  pointer-events: none;
}
/* Die zwei Blaetter dahinter schauen oben rechts hervor. */
.tool-history-stapel::before,
.tool-history-stapel::after {
  content: "";
  position: absolute;
  border: 1px solid #b9b8b3;
  border-radius: 3px;
  background: #cdccc8;
}
.tool-history-stapel::before {
  inset: -7px -7px 14px 14px;
  background: #bcbbb6;
  transform: rotate(var(--stapel-a, .55deg));
}
.tool-history-stapel::after {
  inset: -4px -4px 8px 8px;
  transform: rotate(var(--stapel-b, -.35deg));
}
/* Mal liegen zwei Blaetter im Stapel, mal drei. */
.tool-history-stapel[data-blaetter="2"]::before { display: none; }

/* Das oberste Blatt fuellt die Kachel. */
.tool-history-seite {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border: 1px solid #d9d8d3;
  border-radius: 4px;
  background: linear-gradient(180deg, #eeece6 0%, #f8f7f3 26%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
  /* Papier liegt nie exakt gerade. Die Neigung kommt aus der Lauf-Kennung,
     ist also je Blatt anders und bleibt beim Neuzeichnen dieselbe. */
  transform: rotate(var(--blatt-drehung, 0deg));
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Vier Papiertoene - keine zwei Blaetter nebeneinander sind gleich weiss. */
.tool-history-seite[data-papier="1"] { background: linear-gradient(180deg, #ece7db 0%, #faf6ea 26%); }
.tool-history-seite[data-papier="2"] { background: linear-gradient(180deg, #e8eaee 0%, #f5f7fa 26%); }
.tool-history-seite[data-papier="3"] { background: linear-gradient(180deg, #edeae4 0%, #f7f5ef 26%); }

/* Der Content-Kalender ist kein Bericht, sondern ein Arbeitsmanuskript.
   Warmes Papier, Schreibmaschinensatz und eine redaktionelle Randlinie machen
   das auf den ersten Blick sichtbar, ohne einen kuenstlichen Text zu zeigen. */
.tool-history-stapel[data-dokument="manuskript"] .tool-history-seite {
  background:
    linear-gradient(90deg, transparent 0 34px, rgba(190, 55, 65, .32) 34px 35px, transparent 35px),
    repeating-linear-gradient(180deg, rgba(69, 73, 79, .035) 0 1px, transparent 1px 25px),
    linear-gradient(180deg, #eee9dc 0%, #fbf7eb 28%, #f6f0e3 100%);
  border-color: #d8cfbd;
}
.tool-history-stapel[data-dokument="manuskript"] .tool-history-seite-text {
  padding-left: clamp(48px, 3.1vw, 62px);
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.85;
}
.tool-history-manuskript-label {
  display: block;
  margin: 0 0 9px;
  color: #9b3945;
  font: 700 8px/1.2 'DM Sans', sans-serif;
  letter-spacing: .18em;
  text-align: left;
}
.tool-history-stapel[data-dokument="manuskript"] .tool-history-seite-titel {
  color: #25211e;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: none;
}
.tool-history-stapel[data-dokument="manuskript"] .tool-history-seite-kopfzeile {
  border-bottom-style: dashed;
  border-bottom-color: #bdb3a2;
}
.tool-history-stapel[data-dokument="manuskript"] .tool-history-seite-absatz {
  text-indent: 0;
}
/* Der Satzspiegel eines Schriftstuecks: Rand ringsum, ruhige Zeilen,
   Blocksatz. Auch unscharf bleibt der Eindruck einer gesetzten Seite.

   Anlass, 26.08.2026: Vorher stand hier ein einziger Textblock am oberen
   Rand - ohne Ueberschrift, ohne Absaetze, darunter leeres Papier. Ein
   Schriftstueck sieht anders aus, und genau darum geht es hier. */
.tool-history-seite-text {
  display: block;
  /* Oben bleibt Platz fuer Zustandssymbol und Laufnummer. Vorher lief die
     Ueberschrift darunter durch - der erste und wichtigste Anschlag des
     Blattes war halb verdeckt. */
  padding: 42px 21px 0;
  color: #33363c;
  font: 400 10.5px/1.95 Georgia, 'Times New Roman', serif;
  text-align: justify;
  hyphens: auto;
}
/* Die Ueberschrift traegt das Blatt: kraeftiger, groesser, linksbuendig -
   der Anschlag, an dem man ein Dokument von einer Textwand unterscheidet.

   Sie ist als Einzige NICHT weichgezeichnet. Anlass, 26.08.2026: acht
   Kacheln unterschieden sich nur im Dateinamen. Alles darunter bleibt
   Darstellung und damit unlesbar.

   Am 27.08.2026 aus drei Zeilen zwei geworden. Solange dort der erste SATZ
   des Berichts stand, brauchte es drei Zeilen und sah trotzdem nach
   abgesetztem Fliesstext aus - halbfett, mit Punkt am Ende, ueber die halbe
   Kachel. Jetzt steht dort eine echte Ueberschrift von hoechstens 64 Zeichen
   (siehe blattUeberschrift in ai-contentfactory.js): fett statt halbfett,
   enger gesetzt, auf zwei Zeilen ausgewogen umbrochen. */
.tool-history-seite-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 10px;
  color: #14171d;
  font: 700 clamp(15px, 1.02vw, 19px)/1.26 'Space Grotesk', 'DM Sans', 'Segoe UI', sans-serif;
  letter-spacing: -.016em;
  text-align: left;
  text-wrap: balance;
  hyphens: none;
}
/* Kopfzeile wie bei einem Protokoll: Sprache, Dauer, Datum. Sie stehen
   lesbar unter der Kachel - hier genuegt ihr Umriss, unter einem Strich. */
.tool-history-seite-kopfzeile {
  filter: blur(2px);
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c7c6c1;
}
.tool-history-seite-kopfzeile > span {
  height: 3px;
  border-radius: 2px;
  background: #c2c1bc;
}
/* Absaetze statt eines Blocks - mit Einzug in der ersten Zeile. */
.tool-history-seite-absatz {
  display: block;
  margin: 0 0 10px;
  text-indent: 15px;
  filter: blur(3px);
}
/* Was das Gesprochene nicht mehr fuellt, sind LEERE Zeilen. Erfundener
   Text stuende sonst als Aussage auf der Kachel. */
.tool-history-seite-leer { margin-bottom: 15px; }
/* Der Zeilenabstand der leeren Zeilen entspricht dem des gesetzten Textes
   (10,5 px mal 1,95) - sonst sieht man in der Mitte des Blattes, wo das
   Gesprochene aufhoert. */
.tool-history-seite-linie {
  display: block;
  margin: 0 0 15px;
  font-size: 0;
}
.tool-history-seite-linie:last-child { margin-bottom: 0; }
/* Woerter statt eines durchgehenden Balkens: ein Balken sah aus wie ein
   Ladeplatzhalter, erst die Luecken lesen sich als Text. */
.tool-history-seite-wort {
  display: inline-block;
  height: 5px;
  margin-right: 1.8%;
  border-radius: 1.5px;
  background: rgba(45, 48, 54, .52);
  vertical-align: middle;
}
.tool-history-seite-wort:last-child { margin-right: 0; }
/* Der Schleier - er macht die Angaben darauf lesbar. */
.tool-history-seite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(9, 11, 16, .1) 0%,
    rgba(9, 11, 16, .2) 34%,
    rgba(9, 11, 16, .62) 62%,
    rgba(9, 11, 16, .93) 84%,
    rgba(9, 11, 16, .96) 100%);
  transition: background .18s ease;
}

/* Die Angaben liegen ueber dem Papier. */
.tool-history-row:has(.tool-history-stapel) > .tool-history-kopf,
.tool-history-row:has(.tool-history-stapel) > strong,
.tool-history-row:has(.tool-history-stapel) > .tool-history-zahlen,
.tool-history-row:has(.tool-history-stapel) > .tool-history-fuss,
.tool-history-row:has(.tool-history-stapel) > .tool-history-delete,
.tool-history-row:has(.tool-history-stapel) > .mdi-chevron-right { position: relative; z-index: 2; }
/* Der Dateiname steht auf dem Papier - er darf ruhig kraeftig sein. */
.tool-history-row:has(.tool-history-stapel) > strong {
  min-height: 0;
  color: #f1f3f7;
  font: 650 14px/1.45 'DM Sans', sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  -webkit-line-clamp: 2;
}
/* Der Fuss braucht keine Trennlinie mehr - der Schleier trennt schon. */
.tool-history-row:has(.tool-history-stapel) > .tool-history-fuss { border-top: 0; padding-top: 4px; }

/* Beim Ueberfahren hebt sich das oberste Blatt an und der Schleier wird
   duenner - das Papier tritt hervor. */
.tool-history-row:hover .tool-history-seite {
  transform: translate(-2px, -3px) rotate(calc(var(--blatt-drehung, 0deg) - .5deg));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55), inset 0 1px 0 #fff;
}
.tool-history-row:hover .tool-history-seite::after {
  background: linear-gradient(180deg,
    rgba(9, 11, 16, .04) 0%,
    rgba(9, 11, 16, .12) 34%,
    rgba(9, 11, 16, .55) 62%,
    rgba(9, 11, 16, .9) 84%,
    rgba(9, 11, 16, .95) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tool-history-row:hover .tool-history-seite { transform: none; }
}

/* Das Blatt: ein paar echte Zeilen aus dem Ergebnis, unten sanft
   ausgeblendet statt hart abgeschnitten. */
.tool-history-blatt {
  position: relative;
  display: block;
  max-height: 66px;
  overflow: hidden;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid rgba(255, 48, 79, .45);
  border-radius: 4px 10px 10px 4px;
  background: #0b0c12;
  color: #868e9d;
  font: 400 11.5px/1.6 'DM Sans', sans-serif;
}
.tool-history-blatt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(180deg, rgba(11, 12, 18, 0), #0b0c12);
}
.tool-history-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  padding-top: 11px; border-top: 1px solid #1e212a; }
.tool-history-fuss small { overflow: hidden; color: #767d8c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool-history-row > .tool-history-delete,
.tool-history-row > .mdi-chevron-right {
  position: absolute;
  top: 14px;
  right: 14px;
  /* Dauerhaft leicht sichtbar wie beim Thumbnail-Verlauf (Wunsch vom
     03.09.2026): vorher war das Loeschen unsichtbar, bis man zufaellig
     ueber genau diese Karte fuhr - es wirkte, als gaebe es keins. */
  opacity: .82;
  transition: opacity .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.tool-history-row:hover > .tool-history-delete,
.tool-history-row:focus-within > .tool-history-delete,
.tool-history-row:hover > .mdi-chevron-right,
.tool-history-row > .tool-history-delete:focus-visible { opacity: 1; }
.tool-history-delete { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #292e39; border-radius: 8px; background: #151820; color: #858d9c; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.tool-history-row > .mdi-chevron-right { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #292e39; border-radius: 8px; background: #151820; color: #858d9c; cursor: pointer; transition: border-color .16s ease,color .16s ease,background .16s ease; }
.tool-history-row > .mdi-chevron-right::before { content: "\F9E6"; }
.tool-history-row > .mdi-chevron-right:hover { border-color: rgba(255,48,79,.62); background: rgba(255,48,79,.1); color: #ff5973; }
.tool-history-delete:hover, .tool-history-delete:focus-visible { border-color: rgba(255,48,79,.62); background: rgba(255,48,79,.1); color: #ff5973; outline: none; }
.tool-history-delete[disabled] { cursor: wait; opacity: .55; }
.history-delete-dialog-open { overflow: hidden; }
.history-delete-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 22px; background: rgba(3,4,8,.76); opacity: 0; backdrop-filter: blur(7px); transition: opacity .16s ease; }
.history-delete-overlay[hidden] { display: none; }
.history-delete-overlay.is-open { opacity: 1; }
.history-delete-dialog { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 15px; width: min(430px,100%); padding: 24px; border: 1px solid #343844; border-radius: 16px; background: linear-gradient(145deg,#171922,#101117); color: #f4f5f8; box-shadow: 0 28px 80px rgba(0,0,0,.52),0 0 0 1px rgba(255,48,79,.04); transform: translateY(8px) scale(.985); transition: transform .16s ease; }
.history-delete-overlay.is-open .history-delete-dialog { transform: translateY(0) scale(1); }
.history-delete-symbol { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,48,79,.36); border-radius: 12px; background: rgba(255,48,79,.12); color: #ff4966; font-size: 22px; }
.history-delete-copy { min-width: 0; padding-right: 22px; }
.history-delete-copy span { display: block; margin: 1px 0 6px; color: #ff4966; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.history-delete-copy h3 { margin: 0 0 7px; color: #fff; font: 700 18px/1.2 'Space Grotesk'; }
.history-delete-copy p { margin: 0; color: #9298a7; font-size: 12px; line-height: 1.55; }
.history-delete-close { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #7f8695; cursor: pointer; }
.history-delete-close:hover { background: #20232d; color: #fff; }
.history-delete-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.history-delete-actions button { min-height: 38px; padding: 0 15px; border: 1px solid #343844; border-radius: 9px; font: 700 11px 'DM Sans'; cursor: pointer; }
.history-delete-cancel { background: #1a1d26; color: #d9dce3; }
.history-delete-cancel:hover { border-color: #555b69; background: #20232d; }
.history-delete-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: #ff304f!important; background: #ff304f; color: #fff; box-shadow: 0 9px 24px rgba(255,48,79,.2); }
.history-delete-confirm:hover { background: #ff4966; }
.history-delete-confirm[hidden] { display: none; }
.history-delete-overlay.is-error .history-delete-symbol { background: rgba(255,176,40,.11); border-color: rgba(255,176,40,.35); color: #ffc15a; }
.tool-history-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #59606f;
  font-size: 18px;
  transition: color .18s ease;
}
/* Beim Ueberfahren faerbt sich das Symbol - so zeigt die Farbe, welche
   Kachel gemeint ist, statt staendig alle zu betonen. */
.tool-history-row:hover .tool-history-icon,
.tool-history-row:focus-visible .tool-history-icon { color: #ff5973; }
/* Liegt ein Ergebnisbild vor, tritt es an die Stelle des Werkzeugsymbols:
   bei zehn Kacheln sagt dasselbe Symbol zehnmal nichts. Der Rahmen bleibt
   gleich gross, damit die Kacheln in einer Flucht stehen. */
.tool-history-icon.hat-vorschau {
  overflow: hidden;
  background: #14161d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.tool-history-icon.hat-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Der Punkt mit dem Zustand muss ueber dem Bild bleiben. */
.tool-history-icon.hat-vorschau .tool-history-dot { z-index: 1; }

/* Kennzahlen statt des immer gleichen Berichtsanfangs.
   Zuerst standen sie als kleine Kaesten da - drei Rahmen unter jeder Kachel,
   bei zwoelf Kacheln sechsunddreissig. Das Sinnbild sagt dasselbe ohne Rahmen:
   eine Zeile, ruhig, in der Schriftfarbe der Fusszeile. */
.tool-history-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}
.tool-history-zahl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.tool-history-zahl > i {
  flex: none;
  color: #ff6b82;
  font-size: 14px;
  line-height: 1;
}
.tool-history-zahl > b {
  overflow: hidden;
  color: #b9c0cd;
  font: 600 12px/1.2 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nur fuer Vorleseprogramme: die Beschriftung, die das Sinnbild ersetzt. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tool-history-dot {
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid #101118;
  border-radius: 50%;
  background: #2b3040;
  color: #cfd4de;
  font-size: 11px;
}
.tool-history-icon.success .tool-history-dot { background: #1d7a51; color: #eafff4; }
.tool-history-icon.failed .tool-history-dot { background: #a32036; color: #ffe9ed; }
.tool-history-icon.running .tool-history-dot { background: #9a6c14; color: #fff6e2; }
/* Die Laufnummer ist eine Ordnungshilfe, keine Ueberschrift. Sie stand mit
   26 Pixeln neben dem Titel und zog den Blick auf sich. */
.tool-history-number {
  margin-right: 34px;
  color: #3a3f4d;
  font: 650 13px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  transition: color .16s ease, margin .16s ease;
}
.tool-history-number::before { content: "#"; opacity: .55; }
.tool-history-row:hover .tool-history-number { margin-right: 34px; }
.tool-history-row:hover .tool-history-number,
.tool-history-row:focus-visible .tool-history-number { color: #ff304f; }
.tool-history-icon.failed { background: linear-gradient(145deg, #7c1122, #b8253c); box-shadow: 0 8px 20px rgba(255,48,79,.2); }
.tool-history-icon.running { background: linear-gradient(145deg, #d38b0f, #ffb400); box-shadow: 0 8px 20px rgba(255,176,40,.24); }
.tool-history-copy { display: grid; gap: 5px; min-width: 0; }
.tool-history-copy strong { overflow: hidden; color: #fff; font: 700 16px/1.3 'Space Grotesk', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.tool-history-copy small { overflow: hidden; color: #838a99; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* Die Frische war eine rote Plakette - neben dem gruenen Zustand und dem
   Datum ergab das drei Signale in einer Zeile. Rot heisst hier nichts, es
   ist nur ein Zeitpunkt. */
.tool-history-fresh { display: inline-block; margin-right: 2px; color: #7c8393; font-size: 11px; font-weight: 650; }
.tool-history-state { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #767d8c; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.tool-history-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tool-history-state.success { color: #46d494; }
.tool-history-state.failed { color: #ff6179; }
.tool-history-state.running { color: #ffc15a; }

/* Laufende Textproduktionen besitzen noch keine Dokumentvorschau. Wenn in
   derselben Rasterzeile bereits fertige Papierkarten stehen, wird die Kachel
   trotzdem genauso hoch. Diese Live-Flaeche nutzt den Platz als Statusbuehne
   statt ihn wie ein leeres, defektes Dokument aussehen zu lassen. */
.tool-history-row.is-running {
  grid-template-rows: auto auto minmax(210px, 1fr) auto;
  border-color: rgba(255, 183, 39, .3);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 48, 79, .12), transparent 38%),
    radial-gradient(circle at 12% 10%, rgba(255, 188, 45, .11), transparent 30%),
    linear-gradient(155deg, #141620, #0d0f16 72%);
}
.tool-history-row.is-running:hover,
.tool-history-row.is-running:focus-visible {
  border-color: rgba(255, 190, 65, .58);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 32px rgba(255, 48, 79, .07);
}
.tool-history-live {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  min-height: 0;
  padding: clamp(22px, 3vw, 44px) 12px;
  text-align: center;
}
.tool-history-live-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 73, 102, .52);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 48, 79, .18), rgba(255, 181, 38, .08));
  color: #ff536d;
  font-size: 29px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(0, 0, 0, .28);
}
.tool-history-live-orbit::before,
.tool-history-live-orbit::after,
.tool-history-live-orbit b {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #ffbd43;
  box-shadow: 0 0 12px rgba(255, 189, 67, .75);
}
.tool-history-live-orbit::before { top: 9px; right: 8px; width: 6px; height: 6px; }
.tool-history-live-orbit::after { bottom: 10px; left: 7px; width: 4px; height: 4px; opacity: .72; }
.tool-history-live-orbit b { top: -4px; left: 19px; width: 3px; height: 3px; opacity: .5; }
.tool-history-live-orbit i { animation: historie-live-atmen 1.8s ease-in-out infinite; }
.tool-history-live-copy { display: grid; justify-items: center; gap: 5px; max-width: 310px; }
.tool-history-live-copy small { color: #ff526d; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.tool-history-live-copy b { color: #f8f9fb; font: 700 18px/1.2 'Space Grotesk', sans-serif; }
.tool-history-live-copy em { color: #9299a8; font: normal 11.5px/1.55 'DM Sans', sans-serif; }
.tool-history-live-track {
  position: relative;
  width: min(270px, 88%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #272b36;
}
.tool-history-live-track i {
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #ff304f 42%, #ffc14d 78%, transparent);
  animation: historie-live-lauf 1.65s ease-in-out infinite;
}
@keyframes historie-live-atmen {
  0%, 100% { transform: scale(.92) rotate(-4deg); opacity: .72; }
  50% { transform: scale(1.08) rotate(3deg); opacity: 1; }
}
@keyframes historie-live-lauf {
  0% { left: -42%; }
  55%, 100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-history-live-orbit i,
  .tool-history-live-track i { animation: none; }
  .tool-history-live-track i { left: 29%; }
}
.tool-history-empty { display: grid; justify-items: center; gap: 7px; padding: 30px 20px; color: #777e8d; text-align: center; }
.tool-history-empty i { color: #ff304f; font-size: 34px; }
.tool-history-empty strong { color: #dfe1e6; }
.tool-history-empty p { max-width: 450px; margin: 0; font-size: 11px; line-height: 1.55; }

/* The image-first gallery is exclusive to the Thumbnail & Banner Maker. */
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history { margin-top: 28px; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 20px; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-head > div { display: contents; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-head .section-kicker,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-head p { display: none; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-head h3 { margin: 0; color: #f5f6f8; font: 650 22px/1.2 'Space Grotesk', sans-serif; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-count { display: grid; place-items: center; min-width: 27px; height: 24px; padding: 0 7px; border: 1px solid #2a2e38; border-radius: 99px; background: #151820; color: #aeb4c0; font: 800 10px/1 'Inter',sans-serif; }
body.factory-page-active #factory-workspace .thumbnail-rebuild-header-action .thumbnail-action-frame,
body.factory-page-active #factory-workspace .thumbnail-rebuild-header-action .thumbnail-action-art { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card { position: relative; display: block; overflow: hidden; flex: 1.78 1 auto; min-width: 0; max-width: 100%; width: auto; padding: 0; height: var(--thumbnail-zeilenhoehe, clamp(175px, 13vw, 290px)); aspect-ratio: 16/9; border: 1px solid #252a34; border-radius: 14px; background: #0d1016; box-shadow: 0 14px 32px rgba(0,0,0,.2); cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid.is-justiert { width: 100%; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid.is-justiert .thumbnail-history-card { flex: 0 0 auto; max-width: none; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-thumbnail-portrait { flex: .56 1 auto; min-width: 0; aspect-ratio: 9/16; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-thumbnail-square { flex: 1 1 auto; min-width: 0; aspect-ratio: 1/1; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease,filter .2s ease; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-actions { position: absolute; inset: 12px; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; opacity: 0; transform: translateY(-5px); transition: opacity .18s ease,transform .18s ease; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-action { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(7,9,14,.84); box-shadow: 0 10px 24px rgba(0,0,0,.35); color: #fff; font-size: 20px; line-height: 1; pointer-events: auto; cursor: pointer; backdrop-filter: blur(10px); transition: color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-action:hover { transform: translateY(-1px) scale(1.04); }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-action.is-delete:hover { border-color: rgba(255,48,79,.75); background: rgba(92,13,30,.92); color: #ff647c; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-action.is-download:hover { border-color: rgba(255,48,79,.75); background: #ff304f; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-action:focus-visible { outline: 2px solid #ff304f; outline-offset: 2px; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:hover,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:focus-visible { border-color: rgba(255,48,79,.7); box-shadow: 0 18px 38px rgba(0,0,0,.3),0 0 0 2px rgba(255,48,79,.12); outline: 0; transform: translateY(-2px); }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:hover img,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:focus-visible img { filter: brightness(.82); transform: scale(1.025); }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:hover .thumbnail-history-actions,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:focus-visible .thumbnail-history-actions,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card:focus-within .thumbnail-history-actions { opacity: 1; transform: none; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-generating,
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-generating,
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-failed, #workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-failed { display: grid; place-items: center; cursor: default; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-generating, #workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-generating { border-color: rgba(255,184,0,.42); background: radial-gradient(circle at 50% 38%,rgba(255,48,79,.15),transparent 45%),linear-gradient(145deg,#171923,#0d1016); }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-failed, #workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-failed { border-color: rgba(255,74,103,.42); background: linear-gradient(145deg,#211219,#0d1016); }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state { display: grid; justify-items: center; gap: 7px; width: min(86%,340px); text-align: center; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state > i, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,48,79,.14); color: #ff4562; font-size: 22px; animation: thumbnail-generation-pulse 1.5s ease-in-out infinite; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-failed .thumbnail-generation-state > i, #workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-failed .thumbnail-generation-state > i { animation: none; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state small, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state small { color: #ffbd42; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-failed .thumbnail-generation-state small, #workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-failed .thumbnail-generation-state small { color: #ff647c; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state strong, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state strong { overflow: hidden; max-width: 100%; color: #f5f6f8; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state p, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state p { margin: 0; color: #929aaa; font-size: 11px; line-height: 1.4; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state > span, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state > span { overflow: hidden; width: 100%; height: 5px; margin-top: 4px; border-radius: 99px; background: #242833; }
#workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-generation-state > span b, #workspace-body[data-tool="social-media-post-banner-generator"] .thumbnail-generation-state > span b { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff304f,#ffb527); animation: thumbnail-generation-progress 1.8s ease-in-out infinite; }
@keyframes thumbnail-generation-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,48,79,.06); } }
@keyframes thumbnail-generation-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }

@media (min-width: 2100px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { --thumbnail-zeilenhoehe: clamp(230px, 12vw, 310px); }
}

@media (min-width: 2800px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { --thumbnail-zeilenhoehe: clamp(260px, 11vw, 340px); }
}

@media (max-width: 1050px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { --thumbnail-zeilenhoehe: clamp(140px, 17vw, 185px); }
}

@media (max-width: 650px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-grid { gap: 16px; }
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card { flex: 1 1 100%; min-width: 0; height: auto; }
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-thumbnail-portrait { flex: 0 0 min(72vw,280px); min-width: 210px; height: auto; }
}
.tool-run-toolbar { display: flex; justify-content: space-between; margin-bottom: 24px; }

@keyframes factory-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


@media (max-width:700px) {
  body.factory-page-active .factory-workspace.open { inset: 76px 0 0; }
  .tool-page-hero { grid-template-columns: auto 1fr; }
  .tool-page-hero .tool-new-run { grid-column: 1 / -1; }
  .tool-page-stats { grid-template-columns: 1fr; }
  .tool-history-state { display: none; }
}

/* Keep the production screen a real page even when the workspace shell was
   opened before the page-mode class was attached. These selectors intentionally
   do not depend on body.factory-page-active. */
@media (min-width: 900px) {
  .factory-workspace.open:has(#workspace-body[data-tool="creator-content-ideas-generator"] .factory-processing) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.factory-processing) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 56px clamp(42px, 6vw, 108px) !important;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.factory-processing) #workspace-result {
    width: min(1180px, 100%);
    margin: 0;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"]:has(.factory-processing) .tool-run-toolbar {
    display: flex;
    width: min(1180px, 100%);
    margin: 0 0 24px;
    justify-content: space-between;
  }

  #workspace-body[data-tool="creator-content-ideas-generator"] .factory-processing {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* Keep the wide production card airy; the full-width page layout must
       not push its content directly against the card edges. */
    padding: 34px 38px 24px !important;
  }

  /* The live keyword research uses the same page-aligned production canvas
     as Content-Ideen instead of centring the status card in empty space. */
  .factory-workspace.open:has(#workspace-body[data-tool="youtube-keyword-research"] .factory-processing) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
  }

  #workspace-body[data-tool="youtube-keyword-research"]:has(.factory-processing) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 56px clamp(42px, 6vw, 108px) !important;
  }

  #workspace-body[data-tool="youtube-keyword-research"]:has(.factory-processing) #workspace-result,
  #workspace-body[data-tool="youtube-keyword-research"]:has(.factory-processing) .tool-run-toolbar {
    width: min(1180px, 100%);
    margin-left: 0;
    margin-right: 0;
  }

  #workspace-body[data-tool="youtube-keyword-research"]:has(.factory-processing) .tool-run-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .factory-processing {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 38px 24px !important;
  }
}

/* Der sichtbare Rahmen auf dem Telefon gehört zum Produktionsdialog, nicht
   zum Formular. Bei der Transkription blieb dieser Dialog trotz des langen
   Inhalts ein Flex-Element mit begrenzter Höhe; die Felder zeichneten sich
   deshalb unter seinem abgerundeten Ende weiter. Beide mobilen
   Produktionsdialoge erhalten einen normalen Dokumentenfluss: Der Dialog
   und sein Inhaltsbereich werden so hoch wie das vollständige Formular. */
@media (max-width: 760px) {
  .generic-tool-modal-dialog,
  .transcription-production-dialog {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .generic-tool-modal-content,
  .transcription-production-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Die Transkription bleibt im äusseren Produktionsdialog zusammen. Der
   zusätzliche Formularrahmen darin verdoppelt die Einfassung jedoch ohne
   zusätzlichen Nutzen. Auf dem Telefon trennt daher nur eine Haarlinie die
   Einführung vom Briefing. */
@media (max-width: 760px) {
  .transcription-production-body .workspace-form {
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid #262a35 !important;
    border-bottom: 1px solid #262a35 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* Die Aktionsleiste ist ein Kind des Formulars, wurde aber mit negativen
     Rändern aus dessen Fläche gezogen. Sie bleibt auf Mobil innerhalb der
     Abschlusslinie, damit der Startknopf sichtbar zur Briefing-Fläche gehört. */
  .transcription-production-body .workspace-actions {
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  .transcription-production-body .workspace-run {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

/* Desktop navigation: more room and 20% larger labels for faster scanning. */
@media (min-width:1051px) {
  :root { --sidebar: 300px; }
  .factory-sidebar { width:var(--sidebar);padding-right:18px;padding-left:18px; }
  .factory-brand { font-size:21.6px; }
  .factory-nav a { font-size:15.6px; }
  .factory-sidebar-tools-head { font-size:12px; }
  .factory-sidebar-tools-head b { font-size:10.8px; }
  .factory-sidebar-tool-group h3,
  .factory-sidebar-control-group h3 { font-size:10.8px; }
  .factory-sidebar-tool,
  .factory-sidebar-control { font-size:13.2px; }
  .factory-sidebar-tool { gap:12px;padding:9px 10px; }
  .factory-sidebar-tool span,
  .factory-sidebar-control span { font-size:13.2px; }
}
/* Keep the research and ideas overview aligned with the full tool workspace. */
@media (min-width: 900px) {
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"],
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] {
    width: 100% !important;
    max-width: none !important;
  }

  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] > .tool-page-hero,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] > .tool-page-stats,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] > .tool-history,
  body.factory-page-active #workspace-body[data-tool="youtube-keyword-research"] > .content-calendar-history,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] > .tool-page-hero,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] > .tool-page-stats,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] > .tool-history,
  body.factory-page-active #workspace-body[data-tool="creator-content-ideas-generator"] > .content-calendar-history {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 900px) {
  .factory-workspace.open:has(#workspace-body[data-tool="thumbnail-banner-maker"] .factory-processing) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0;
    border-radius: 0;
  }

  #workspace-body[data-tool="thumbnail-banner-maker"]:has(.factory-processing) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 56px clamp(42px, 6vw, 108px) !important;
  }

  #workspace-body[data-tool="thumbnail-banner-maker"]:has(.factory-processing) #workspace-result {
    width: min(1240px, 100%);
    margin: 0;
  }

  #workspace-body[data-tool="thumbnail-banner-maker"] .factory-processing {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 44px 48px 34px !important;
  }
}
/* The script generator production state uses the same full-page canvas as the other tool views. */
@media (min-width: 900px) {
  .factory-workspace.open:has(#workspace-body[data-tool="youtube-video-script-generator"] .factory-processing) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"]:has(.factory-processing) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 56px clamp(42px, 6vw, 108px) !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"]:has(.factory-processing) #workspace-result,
  #workspace-body[data-tool="youtube-video-script-generator"]:has(.factory-processing) .tool-run-toolbar,
  #workspace-body[data-tool="youtube-video-script-generator"] .factory-processing {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .factory-processing {
    padding: 34px 38px 24px !important;
  }

  /* Finished script results must use the same page-aligned canvas as the
     production state. The generic result stylesheet centers them with
     margin:auto, which creates a second, narrower reading edge. */
  .factory-workspace.open:has(#workspace-body[data-tool="youtube-video-script-generator"] .result-finished) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"]:has(.result-finished) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 38px clamp(42px, 6vw, 108px) 80px !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"]:has(.result-finished) #workspace-result,
  #workspace-body[data-tool="youtube-video-script-generator"]:has(.result-finished) .tool-run-toolbar,
  #workspace-body[data-tool="youtube-video-script-generator"]:has(.result-finished) .result-finished {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Keep the optimization center aligned with the shared tool workspace. */
@media (min-width: 901px) {
  body.factory-page-active #workspace-body[data-tool="optimizer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    padding: 38px clamp(42px, 6vw, 108px) 80px !important;
  }

  body.factory-page-active #workspace-body[data-tool="optimizer"] > .cc-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
@media (min-width: 900px) {
  .factory-workspace.open:has(#workspace-body[data-tool="creator-content-calendar"] .factory-processing) .workspace-panel {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #workspace-body[data-tool="creator-content-calendar"]:has(.factory-processing) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 82px) !important;
    padding: 56px clamp(42px, 6vw, 108px) !important;
  }

  #workspace-body[data-tool="creator-content-calendar"]:has(.factory-processing) #workspace-result,
  #workspace-body[data-tool="creator-content-calendar"]:has(.factory-processing) .tool-run-toolbar,
  #workspace-body[data-tool="creator-content-calendar"] .factory-processing {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #workspace-body[data-tool="creator-content-calendar"]:has(.factory-processing) #workspace-result,
  #workspace-body[data-tool="creator-content-calendar"]:has(.factory-processing) .tool-run-toolbar {
    width: min(1180px, 100%) !important;
  }

  #workspace-body[data-tool="creator-content-calendar"] .factory-processing {
    padding: 34px 38px 24px !important;
  }
}
/* Shorts production status uses the same left reading edge as the other tools. */
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"] .factory-processing,
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .factory-processing {
  justify-self: start;
  width: min(1240px, 100%);
  max-width: 1240px;
  margin-left: 0;
  margin-right: auto;
}

/* Compact two-step YouTube Publisher. */
body.factory-page-active #workspace-body[data-tool="youtube-publisher"] > .workspace-intro-card,
body.factory-page-active #workspace-body[data-tool="youtube-publisher"] > .workspace-profile-note,
body.factory-page-active #workspace-body[data-tool="youtube-publisher"] > .workspace-form {
  width: min(980px, 100%);
  margin-right: auto;
  margin-left: 0;
}
#workspace-body[data-tool="youtube-publisher"] .workspace-intro-card { margin-bottom: 14px; padding: 14px 16px; }
#workspace-body[data-tool="youtube-publisher"] .workspace-wizard-progress { margin-bottom: 14px; }
.youtube-publisher-step .workspace-group-grid { gap: 12px; padding: 14px 16px 16px; }
.youtube-publisher-step legend { padding: 12px 16px; }
.youtube-publisher-step .youtube-video-source-local {
  grid-column: 1;
  min-width: 0;
}
.youtube-publisher-step .youtube-thumbnail-field {
  grid-column: 2;
  min-width: 0;
  align-self: start;
}
#workspace-body[data-tool="youtube-publisher"] [data-config-field="VIDEO_TITLE"],
#workspace-body[data-tool="youtube-publisher"] [data-config-field="VIDEO_DESCRIPTION"] { grid-column: 1 / -1; }
.youtube-video-source-local .video-file-picker { min-height: 62px; padding: 11px 14px; }
.youtube-video-source-local .video-file-picker > i { font-size: 23px; }
.youtube-publisher-step .youtube-video-source-local .video-file-preview,
.youtube-publisher-step .youtube-video-source-local .video-file-preview img {
  width: 292px;
}
.youtube-publisher-step .youtube-video-source-local .video-file-preview img { height: 164px; }
.youtube-publisher-step .youtube-video-source-local .video-file-preview figcaption { max-width: 292px; }
.youtube-publisher-step .youtube-thumbnail-picker {
  position: relative;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  width: min(420px,100%);
  min-height: 62px;
  gap: 12px;
  padding: 11px 14px;
}
.youtube-publisher-step .youtube-thumbnail-preview {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  background: none;
  font-size: 23px;
}
.youtube-publisher-step .has-image .youtube-thumbnail-picker {
  grid-template-columns: minmax(0,1fr);
  align-items: stretch;
  min-height: 0;
  gap: 9px;
  padding: 8px;
}
.youtube-publisher-step .has-image .youtube-thumbnail-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #090b10;
  font-size: 38px;
}
.youtube-thumbnail-text {
  display: grid;
  gap: 3px;
  padding: 0 4px 2px;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.youtube-thumbnail-text b,
.youtube-thumbnail-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-thumbnail-tools { display: grid; gap: 6px; width: min(420px,100%); margin-top: 8px; }
.youtube-thumbnail-tools[hidden] { display: none; }
.youtube-thumbnail-tools small { color: #8e95a4; font-size: 11px; line-height: 1.45; }
/* Das Bild ist der Ausloeser des Editors: Vorschau, Platzhalter und der
   Hinweis darueber liegen deshalb im selben Rasterfeld uebereinander. */
.youtube-thumbnail-preview { border: 0; cursor: pointer; }
.youtube-thumbnail-preview > * { grid-area: 1 / 1; }
.youtube-thumbnail-preview:disabled { cursor: progress; }
.youtube-thumbnail-preview.is-loading { opacity: .55; }
.youtube-thumbnail-edit-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  background: rgba(6, 8, 13, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.youtube-thumbnail-edit-hint i { font-size: 19px; color: #ff5470; }
.has-image .youtube-thumbnail-preview:hover .youtube-thumbnail-edit-hint,
.has-image .youtube-thumbnail-preview:focus-visible .youtube-thumbnail-edit-hint { display: flex; }
.youtube-publisher-auto-metadata { grid-column: 1 / -1; border: 1px solid #303541; border-radius: 12px; background: #11141b; overflow: hidden; }
.youtube-publisher-auto-metadata > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border: 0; }
.youtube-publisher-auto-metadata > header > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.youtube-publisher-auto-metadata > header > span > i { color: #4edb99; font-size: 20px; }
.youtube-publisher-manual-toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer; }
.youtube-publisher-manual-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border-top: 1px solid #292e39; }
.youtube-publisher-manual-fields[hidden] { display: none !important; }
.youtube-publisher-manual-fields [data-config-field="TAGS"] { grid-column: 1 / -1; }
.youtube-publisher-extras { margin-top: 0; }
.youtube-publisher-extras > summary { min-height: 54px; padding: 10px 14px; }
.youtube-publisher-extras .workspace-optional-fields-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; }
#workspace-body[data-tool="youtube-publisher"] .workspace-actions { margin-top: 12px; }
@media(max-width:700px){
  .youtube-publisher-step .youtube-video-source-local,
  .youtube-publisher-step .youtube-thumbnail-field { grid-column: 1; }
  .youtube-publisher-step .youtube-video-source-local .video-file-preview,
  .youtube-publisher-step .youtube-video-source-local .video-file-preview img,
  .youtube-publisher-step .youtube-video-source-local .video-file-preview figcaption,
  .youtube-publisher-step .youtube-thumbnail-picker { width: 100%; max-width: none; }
  .youtube-publisher-step .youtube-video-source-local .video-file-preview img { height: auto; aspect-ratio: 16/9; }
  .youtube-publisher-manual-fields,
  .youtube-publisher-extras .workspace-optional-fields-grid { grid-template-columns: 1fr; }
  .youtube-publisher-auto-metadata > header { align-items: flex-start; flex-direction: column; }
}

/* Tablet und Telefon: Die Schrittkarte bleibt der einzige sichtbare Rahmen.
   Die Metadaten und optionalen Ergänzungen darin werden durch Linien getrennt,
   damit keine zweite, zu enge Box aus der ersten herausragt. */
@media(max-width:1280px){
  /* Der Fortschritt ist Teil des Publishers, aber keine eigene Karte. Ohne
     diese Ausnahme legt die allgemeine Tablet-Regel einen Rahmen um
     "Schritt 1 von 2", der in die erste Schrittkarte hineinragt. */
  #workspace-body[data-tool="youtube-publisher"] .workspace-form,
  .generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-form { box-sizing:border-box !important; display:block !important; width:100% !important; min-height:auto !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #workspace-body[data-tool="youtube-publisher"] .workspace-wizard-progress,
  .generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-wizard-progress { margin:0 0 14px !important; padding:0 0 14px !important; border-bottom:1px solid #262a35; }
  #workspace-body[data-tool="youtube-publisher"] .workspace-form > .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-form > .workspace-group[data-current] { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; }
  #workspace-body[data-tool="youtube-publisher"] .workspace-actions,
  .generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-actions { box-sizing:border-box !important; width:100% !important; margin:16px 0 0 !important; padding:16px 0 0 !important; border-top:1px solid #262a35; }
  .youtube-publisher-step .workspace-group-grid { box-sizing:border-box; width:100%; min-width:0; height:auto !important; min-height:0; overflow:visible !important; }
  .youtube-publisher-step [data-config-field="VIDEO_DESCRIPTION"] { grid-row:auto; align-self:start; min-height:0; }
  .youtube-publisher-auto-metadata,
  .youtube-publisher-extras { box-sizing:border-box; width:100%; min-width:0; margin:0; border:0; border-top:1px solid #292e39; border-radius:0; background:transparent; overflow:visible; }
  .youtube-publisher-auto-metadata > header,
  .youtube-publisher-extras > summary { padding:14px 0; }
  .youtube-publisher-manual-fields { padding:14px 0 0; }
  .youtube-publisher-extras .workspace-optional-fields-grid { padding:14px 0 0; }
}

/* Content-Ideen und Keyword-Recherche folgen auf Tablet und Telefon derselben
   Schrittstruktur wie der Publisher: ein Abschnitt mit Trennlinien, keine
   zusätzliche Karte um Formular, Beschreibung und Aktionsleiste. */
@media(max-width:1280px){
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-form,
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-form,
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-form,
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-form { box-sizing:border-box !important; display:block !important; width:100% !important; min-height:auto !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-form > .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-form > .workspace-group[data-current],
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-form > .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-form > .workspace-group[data-current] { box-sizing:border-box !important; margin:0 !important; padding:0 !important; min-height:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid,
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid,
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid,
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-group-grid { box-sizing:border-box !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; padding:18px 0 0 !important; overflow:visible !important; border:0 !important; border-top:1px solid #262a35 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-actions,
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-actions,
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-actions,
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-actions { box-sizing:border-box !important; width:100% !important; margin:16px 0 0 !important; padding:16px 0 0 !important; border-top:1px solid #262a35 !important; }
}

/* Keyword research dialog: compact, native-looking choice cards and a roomy
   canvas without permanently visible browser scrollbars. */
.factory-workspace.open:has(#workspace-body[data-tool="youtube-keyword-research"] > .workspace-form:not([hidden])) .workspace-panel {
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: 1180px !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
}

.factory-workspace.open:has(#workspace-body[data-tool="youtube-keyword-research"] > .workspace-form:not([hidden])) .workspace-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

.factory-workspace.open:has(#workspace-body[data-tool="youtube-keyword-research"] > .workspace-form:not([hidden])) .workspace-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) {
  gap: 10px !important;
  padding: 16px 18px 18px !important;
}

#workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) > .workspace-intro-card {
  margin-bottom: 0 !important;
  padding: 12px 14px !important;
}

#workspace-body[data-tool="youtube-keyword-research"]:has(> .workspace-form:not([hidden])) > .workspace-profile-note {
  min-height: 42px !important;
  margin-bottom: 0 !important;
  padding: 8px 13px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .workspace-wizard-progress {
  margin: 0 0 8px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .workspace-group[data-current] > legend {
  padding: 8px 0 9px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid {
  gap: 11px 16px !important;
  padding: 14px 16px 16px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form {
  gap: 11px 16px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 5px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  color: #eef1f8 !important;
  text-align: left !important;
  border: 1px solid #303542 !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #191c25, #12141b) !important;
  box-shadow: none !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card.active {
  border-color: #ff3151 !important;
  background: linear-gradient(145deg, rgba(255,49,81,.18), rgba(47,18,29,.78)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,49,81,.12) !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card > .mdi {
  width: 32px !important;
  height: 32px !important;
  font-size: 17px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card strong {
  color: #f7f8fb !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#workspace-body[data-tool="youtube-keyword-research"] button.keyword-research-mode-card small {
  color: #9099ad !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-picker + .workspace-field textarea {
  min-height: 86px !important;
  max-height: 110px !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .workspace-optional-fields {
  margin-top: 0 !important;
}

#workspace-body[data-tool="youtube-keyword-research"] .workspace-actions {
  min-height: 64px !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

@media (max-width: 720px) {
  #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-cards {
    grid-template-columns: 1fr !important;
  }
}

/* === YouTube Publisher: beide Umgebungen, 24.08.2026 =====================
   Die Gestaltung des Publishers war durchgehend auf
   #workspace-body[data-tool="youtube-publisher"] gemünzt. Das Werkzeug
   öffnet aber im allgemeinen Werkzeugfenster - dort griff keine der Regeln.
   Sichtbare Folge: die Überschrift lief in den Hilfetext ("Metadaten
   automatisch übernehmenSprache und Tags stammen aus …"), und das Kästchen
   war ein nacktes Browser-Kästchen.

   Die werkzeugeigenen Klassen sind oben entschränkt. Hier stehen die Regeln
   nach, die gemeinsame Klassen betreffen und deshalb ihre Einschränkung
   behalten müssen. */
.generic-tool-modal[data-generic-tool-id="youtube-publisher"] [data-config-field="VIDEO_TITLE"],
.generic-tool-modal[data-generic-tool-id="youtube-publisher"] [data-config-field="VIDEO_DESCRIPTION"] { grid-column: 1 / -1; }
.generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-intro-card { margin-bottom: 14px; padding: 14px 16px; }
.generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-wizard-progress { margin-bottom: 14px; }
.generic-tool-modal[data-generic-tool-id="youtube-publisher"] .workspace-actions { margin-top: 12px; }

/* --- Der Hinweis zu den automatischen Metadaten -------------------------
   Titel und Hilfetext sind <strong> und <small> - beides von Haus aus inline.
   Ohne den Block-Umbruch stehen sie in einer Zeile aneinandergeklebt. */
.youtube-publisher-auto-metadata > header > span > span { display: grid; gap: 3px; }
.youtube-publisher-auto-metadata strong {
  display: block;
  color: #eef1f6;
  font: 700 12.5px/1.35 'Space Grotesk', sans-serif;
}
.youtube-publisher-auto-metadata small {
  display: block;
  max-width: 62ch;
  color: #868d9d;
  font-size: 10.5px;
  line-height: 1.5;
}
.youtube-publisher-auto-metadata > header { gap: 20px; padding: 13px 15px; }
.youtube-publisher-auto-metadata > header > span > i { flex: 0 0 auto; }

/* --- Der Schalter statt eines nackten Kästchens -------------------------
   Ein Browser-Kästchen passt nicht zum übrigen Formular. Gebaut aus dem
   vorhandenen input, damit Tastatur und Screenreader unverändert arbeiten. */
.youtube-publisher-manual-toggle { gap: 9px; }
.youtube-publisher-manual-toggle input {
  appearance: none;
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 19px;
  margin: 0;
  border: 1px solid #3a4050;
  border-radius: 999px;
  background: #1b1f29;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.youtube-publisher-manual-toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #767d8e;
  transition: transform .16s, background .16s;
}
.youtube-publisher-manual-toggle input:checked { border-color: #ff304f; background: #40121f; }
.youtube-publisher-manual-toggle input:checked::after { background: #ff4b68; transform: translateX(15px); }
.youtube-publisher-manual-toggle input:focus-visible { outline: 2px solid #ff4b68; outline-offset: 2px; }
.youtube-publisher-manual-toggle:hover input { border-color: #4a5162; }
.youtube-publisher-manual-toggle span {
  color: #c7ccd7;
  font: 700 11px/1 'DM Sans', sans-serif;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .youtube-publisher-auto-metadata > header { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Hinweis, wenn der Kanal keine eigenen Thumbnails setzen darf. Er steht am
   Feld, nicht erst im Ergebnis - dort wäre es zu spät. */
.youtube-thumbnail-sperre {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #3a2f16;
  border-radius: 9px;
  background: #1d1810;
  color: #c6a961;
  font-size: 10.5px;
  line-height: 1.55;
}
.youtube-thumbnail-sperre > i { margin-top: 1px; font-size: 14px; }

/* --- Verlauf des YouTube-Publishers --------------------------------------
   Bis zum 24.08.2026 stand dort "Noch keine Produktion" - auch nach einem
   erfolgreichen Upload. Der allgemeine Verlauf liest portal_flow_runs, der
   Publisher legt seine Aufträge aber in portal_youtube_publish_jobs ab.
   Gezeigt wird beides: geplant und veröffentlicht. */
.youtube-publisher-history-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}
.youtube-publisher-history-layout > .youtube-history { padding-right: 26px; }
.youtube-publisher-sidebar {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 0;
  margin-top: 76px;
  padding-left: 26px;
  border-left: 1px solid #272727;
}
.youtube-publisher-overview,
.youtube-publisher-sidebar-card {
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid #272727;
  border-radius: 0;
  background: transparent;
}
.youtube-publisher-sidebar-card { padding-top: 24px; }
.youtube-publisher-sidebar-card:last-child { border-bottom: 0; }
.youtube-publisher-overview > h3,
.youtube-publisher-planning h3 {
  margin: 7px 0 17px;
  color: #f1f3f7;
  font: 600 18px/1.2 'Space Grotesk';
}
.youtube-publisher-overview > h3 {
  margin-bottom: 16px;
  font: 600 22px/1.2 'Space Grotesk';
}
.youtube-publisher-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #272727;
  border-bottom: 1px solid #272727;
}
.youtube-publisher-stats > article {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.youtube-publisher-stats > article + article { border-left: 1px solid #272727; }
.youtube-publisher-stats > article > i { color: #ff0033; font-size: 16px; }
.youtube-publisher-stats > article > span { display: grid; gap: 2px; min-width: 0; }
.youtube-publisher-stats strong { color: #f4f5f8; font: 650 17px/1 'Space Grotesk'; }
.youtube-publisher-stats small { overflow: hidden; color: #838b9a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.youtube-publisher-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
}
.youtube-publisher-next-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: #272727;
  color: #ff0033;
  font-size: 19px;
}
.youtube-publisher-next > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.youtube-publisher-next small { color: #aaa; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.youtube-publisher-next strong { overflow: hidden; color: #f2f4f7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.youtube-publisher-next p { margin: 0; color: #858d9c; font-size: 10px; }
.youtube-publisher-next-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.youtube-publisher-next-actions > button,
.youtube-publisher-next-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 18px;
  background: #272727;
  color: #f1f1f1;
  font: 700 9px/1 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.youtube-publisher-next-actions > button:hover,
.youtube-publisher-next-actions > a:hover { background: #3f3f3f; color: #fff; }
.youtube-publisher-next-actions > button { background: transparent; color: #3ea6ff; }
.youtube-publisher-next-actions > button:hover { background: rgba(62, 166, 255, .12); }
.youtube-publisher-no-next { display: grid; justify-items: center; gap: 6px; padding: 8px 0; text-align: center; }
.youtube-publisher-no-next > i { color: #687080; font-size: 27px; }
.youtube-publisher-no-next > strong { color: #e7e9ee; font-size: 12px; }
.youtube-publisher-no-next > p { margin: 0; color: #7e8695; font-size: 10px; }
.youtube-publisher-selection-note { margin: 12px 0 0; color: #717171; font-size: 10px; line-height: 1.5; }

.youtube-publisher-planning { display: grid; gap: 0; }
.youtube-publisher-planning h3 { margin-bottom: 6px; }
.youtube-publisher-planning p { margin: 0 0 8px; color: #7f8796; font-size: 10px; line-height: 1.5; }
.youtube-publisher-planning > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid #272727;
  border-radius: 0;
  background: transparent;
  color: #ced3dc;
  text-align: left;
  cursor: pointer;
}
.youtube-publisher-planning > button:last-child { border-bottom: 1px solid #272727; }
.youtube-publisher-planning > button:hover { background: #1f1f1f; color: #fff; }
.youtube-publisher-planning > button > i:first-child { color: #ff0033; font-size: 18px; }
.youtube-publisher-planning > button > i:last-child { color: #697181; }
.youtube-publisher-planning > button > span { display: grid; gap: 2px; }
.youtube-publisher-planning > button strong { font-size: 10.5px; }
.youtube-publisher-planning > button small { color: #747c8b; font-size: 8.5px; }

.youtube-history-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 11px 8px;
  border-bottom: 1px solid #272727;
  color: #aaa;
  font-size: 9px;
  font-weight: 600;
}
.youtube-history-list { display: grid; gap: 0; border-top: 0; }
.youtube-history-row {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 10px 12px 14px;
  border: 0;
  border-bottom: 1px solid #1a1b21;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background .16s;
  animation: yt-zeile-auf .34s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: var(--yt-verzug, 0ms);
}
.youtube-history-row:hover { background: #17181e; }
.youtube-history-row.is-selected {
  background: #1a1b21;
  box-shadow: none;
}
.youtube-history-row:focus-visible { outline: 2px solid #3ea6ff; outline-offset: -2px; }

.youtube-history-bild {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  background: #272727;
}
.youtube-history-bild > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Das Symbol liegt darunter: bei einem privaten Video liefert YouTube kein
   Vorschaubild, dann bleibt es sichtbar. */
.youtube-history-bild > i { color: #ff4b68; font-size: 20px; }

.youtube-history-copy { display: grid; gap: 3px; min-width: 0; }
.youtube-history-copy > strong {
  overflow: hidden;
  color: #eef0f5;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-history-copy > small { color: #838a99; font-size: 10.5px; }
.youtube-history-warnung { color: #c6a961 !important; }
.youtube-history-warnung > i { font-size: 12px; vertical-align: -1px; }

.youtube-history-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #aaa;
  font: 700 10px/1 'DM Sans', sans-serif;
  white-space: nowrap;
}
.youtube-history-status > i { font-size: 13px; }
.youtube-history-row.geplant .youtube-history-status { color: #3ea6ff; }
.youtube-history-row.veroeffentlicht .youtube-history-status { color: #aaa; }
.youtube-history-row.privat .youtube-history-status,
.youtube-history-row.unlisted .youtube-history-status { color: #aaa; }
.youtube-history-row.fehler .youtube-history-status { color: #ff4e45; }

.youtube-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.youtube-history-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #3ea6ff;
  font: 700 10px/1 'DM Sans', sans-serif;
  cursor: pointer;
}
.youtube-history-edit:hover,
.youtube-history-edit[aria-expanded="true"] { background: rgba(62, 166, 255, .12); color: #6fbdff; }
.youtube-history-edit:focus-visible { outline: 2px solid #ff4b68; outline-offset: 2px; }
.youtube-history-edit > i { font-size: 14px; }

body.youtube-history-edit-dialog-open { overflow: hidden; }
.youtube-history-edit-dialog {
  width: min(1180px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 40px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: #f1f3f7;
}
.youtube-history-edit-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(3px);
}
.youtube-history-edit-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, calc(100vw - 370px));
  max-height: calc(100vh - 42px);
  overflow: visible;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #181818;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .78);
}
.youtube-history-edit-dialog-panel > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #303030;
  background: #212121;
}
.youtube-history-edit-dialog-panel > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ff0033;
  color: #fff;
  font-size: 22px;
}
.youtube-history-edit-dialog-panel > header > div { display: grid; gap: 3px; min-width: 0; }
.youtube-history-edit-dialog-panel > header small {
  color: #ff4b68;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.youtube-history-edit-dialog-panel > header h3 {
  margin: 0;
  color: #f5f5f5;
  font: 600 18px/1.2 'Space Grotesk';
}
.youtube-history-edit-dialog-panel > header p {
  overflow: hidden;
  margin: 0;
  color: #aaa;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-history-edit-dialog-panel > header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
}
.youtube-history-edit-dialog-panel > header button:hover { background: #3f3f3f; color: #fff; }
.youtube-history-edit-dialog-panel > header button:focus-visible { outline: 2px solid #3ea6ff; outline-offset: 2px; }
.youtube-history-edit-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 13px;
  margin-top: 3px;
  padding: 16px;
  border: 0;
  border-top: 1px solid #272727;
  border-radius: 0;
  background: #181818;
}
.youtube-history-edit-dialog .youtube-history-edit-form {
  margin: 0;
  padding: 22px 20px 20px;
  overflow: visible;
  border-top: 0;
  background: #181818;
}
.youtube-history-edit-dialog .youtube-history-edit-grid textarea { min-height: 150px; }
.youtube-history-edit-thumbnail { display: grid; gap: 8px; }
.youtube-history-edit-thumbnail > span {
  color: #b9bfcc;
  font: 700 10px/1.2 'DM Sans', sans-serif;
}
.youtube-history-edit-thumbnail > label {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 101px;
  padding: 0;
  color: #f1f3f7;
  cursor: pointer;
}
.youtube-history-edit-thumbnail > label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.youtube-history-edit-thumbnail > label:focus-within .youtube-history-edit-thumbnail-preview {
  outline: 2px solid #3ea6ff;
  outline-offset: 2px;
}
.youtube-history-edit-thumbnail-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 180px;
  aspect-ratio: 16 / 9;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  background: #0f0f0f;
}
.youtube-history-edit-thumbnail-preview > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.youtube-history-edit-thumbnail-preview > i { color: #ff4b68; font-size: 27px; }
.youtube-history-edit-thumbnail > label > span:last-child { display: grid; gap: 5px; }
.youtube-history-edit-thumbnail strong { color: #3ea6ff; font-size: 11px; }
.youtube-history-edit-thumbnail small { color: #858d9c; font-size: 9.5px; }
.youtube-history-edit-thumbnail small.error { color: #ff8098; }
.youtube-history-ai-coach {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #353535;
  border-radius: 4px;
  background: #212121;
}
.youtube-history-ai-coach > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.youtube-history-ai-coach > header > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 0, 51, .14);
  color: #ff4b68;
  font-size: 17px;
}
.youtube-history-ai-coach > header > div { display: grid; gap: 3px; min-width: 0; }
.youtube-history-ai-coach > header strong { color: #f1f3f7; font-size: 11.5px; }
.youtube-history-ai-coach > header small { color: #8f96a3; font-size: 9px; line-height: 1.4; }
.youtube-history-ai-coach > header button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
}
.youtube-history-ai-coach > header button:hover { background: #3f3f3f; color: #fff; }
.youtube-history-ai-coach > header button:disabled { opacity: .45; cursor: wait; }
.youtube-history-ai-coach > p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #949baa;
  font-size: 9.5px;
}
.youtube-history-ai-coach > p.ready { color: #8fd18a; }
.youtube-history-ai-coach > p.error { color: #ff8098; }
.youtube-history-edit-field-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.youtube-history-edit-field-row > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}
.youtube-history-edit-field-row > label > span {
  color: #b9bfcc;
  font: 700 10px/1.2 'DM Sans', sans-serif;
}
.youtube-history-ai-slot {
  position: absolute;
  top: 17px;
  /* Der Schweif haengt 24px links aus der Blase heraus: die Spalte ruckt um
     genau diesen Betrag nach links und gibt ihn als Innenabstand wieder her.
     So steht die Blase weiter bei 100% + 28px, ohne breiter zu werden - sonst
     schnitte das overflow-x des Dialogs ihre rechte Kante ab. */
  left: calc(100% + 4px);
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 780px));
  min-width: 290px;
  padding-left: 24px;
  overflow: visible;
}
.youtube-history-ai-slot > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 12px;
  border: 1px dashed #414854;
  border-radius: 3px;
  background: rgba(20, 23, 29, .86);
  color: #7f8795;
  font-size: 9px;
}
.youtube-history-ai-slot[data-youtube-ai-slot="title"] {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  column-gap: 28px;
  padding: 3px 4px 7px 24px;
  overflow: visible;
}
.youtube-history-ai-slot[data-youtube-ai-slot="title"] .youtube-history-ai-value { -webkit-line-clamp: 2; }
.youtube-history-ai-bubble {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  margin-left: 4px;
  padding: 11px 18px;
  overflow: visible;
  border: 0;
  border-radius: 26px 26px 26px 8px;
  background: #e6e8ee;
  color: #141821;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
  animation: youtube-ai-thought-float 4.6s ease-in-out infinite;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.youtube-history-ai-bubble:nth-child(2) { animation-delay: -1.1s; }
.youtube-history-ai-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e6e8ee;
  transition: background .18s;
}
.youtube-history-ai-bubble::after {
  content: "";
  position: absolute;
  left: -19px;
  bottom: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e6e8ee;
  transition: background .18s;
}
.youtube-history-ai-bubble:hover {
  z-index: 2;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.012);
}
.youtube-history-ai-bubble:hover::before,
.youtube-history-ai-bubble:hover::after { background: #ffffff; }
.youtube-history-ai-bubble:focus-visible {
  outline: 2px solid #3ea6ff;
  outline-offset: 3px;
}
.youtube-history-ai-bubble.is-applied,
.youtube-history-ai-bubble.is-applied::before,
.youtube-history-ai-bubble.is-applied::after { background: #cfe4ff; }
.youtube-history-ai-value {
  display: -webkit-box;
  overflow: hidden;
  color: #141821;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.youtube-history-ai-slot[data-youtube-ai-slot="description"] .youtube-history-ai-bubble { min-height: 92px; }
.youtube-history-ai-slot[data-youtube-ai-slot="tags"] .youtube-history-ai-value { -webkit-line-clamp: 2; }
@keyframes youtube-ai-thought-float {
  0%, 100% { transform: translateY(0) rotate(-.2deg); }
  50% { transform: translateY(-2px) rotate(.2deg); }
}
.youtube-history-edit-dialog .youtube-history-edit-buttons {
  position: sticky;
  bottom: -20px;
  padding: 14px 0 2px;
  background: #181818;
}
.youtube-history-edit-form[hidden] { display: none; }
.youtube-history-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  gap: 12px;
}
.youtube-history-edit-grid > label { display: grid; align-content: start; gap: 7px; min-width: 0; }
.youtube-history-edit-grid > label > span { color: #b9bfcc; font: 700 10px/1.2 'DM Sans', sans-serif; }
.youtube-history-edit-grid input,
.youtube-history-edit-grid textarea {
  width: 100%;
  border: 1px solid #303644;
  border-radius: 2px;
  background: #0f0f0f;
  color: #f1f3f7;
  font: 500 12px/1.45 'DM Sans', sans-serif;
}
.youtube-history-edit-grid input { min-height: 39px; padding: 0 11px; }
.youtube-history-edit-grid textarea { min-height: 92px; padding: 10px 11px; resize: vertical; }
.youtube-history-edit-grid input:focus,
.youtube-history-edit-grid textarea:focus { border-color: #ff4b68; outline: 0; }
.youtube-history-edit-date > small { color: #707787; font-size: 9px; }
.youtube-history-edit-local-date { position: relative; }
.youtube-history-edit-local-date > input { padding-right: 48px; }
.youtube-history-edit-local-date > span {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 42px;
  height: 39px;
  place-items: center;
  color: #9199a8;
  pointer-events: none;
}
.youtube-history-edit-local-date > span > input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 39px;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
.youtube-history-edit-wide { grid-column: 1 / -1; }
.youtube-history-edit-feedback { min-height: 15px; margin: 0; color: #949bab; font-size: 10.5px; }
.youtube-history-edit-feedback.success { color: #8fd18a; }
.youtube-history-edit-feedback.error { color: #ff8098; }
.youtube-history-edit-buttons { display: flex; justify-content: flex-end; gap: 9px; }
.youtube-history-edit-buttons .tool-new-run,
.youtube-history-edit-buttons .wizard-secondary { position: static; min-height: 36px; }

.youtube-history-link {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.youtube-history-link:hover { background: #3f3f3f; color: #fff; }
.youtube-history-link:focus-visible { outline: 2px solid #ff4b68; outline-offset: 2px; }
.youtube-history-link.leer { border: 0; }
.youtube-history-laedt { margin: 0; color: #8b91a1; font-size: 12px; }

.youtube-publish-check {
  grid-column: 1 / -1;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid #272727;
}
.youtube-publish-check-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.youtube-publish-check-head h3,
.youtube-publish-check-empty h3 {
  margin: 7px 0 5px;
  color: #f1f3f7;
  font: 600 22px/1.2 'Space Grotesk';
}
.youtube-publish-check-head p,
.youtube-publish-check-empty p {
  margin: 0;
  color: #838b9a;
  font-size: 10.5px;
  line-height: 1.5;
}
.youtube-publish-check-score {
  color: #f1f3f7;
  font: 650 26px/1 'Space Grotesk';
}
.youtube-publish-check-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
  margin-top: 22px;
}
.youtube-publish-check-preview {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-width: 0;
}
.youtube-publish-preview-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  background: #272727;
}
.youtube-publish-preview-media > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.youtube-publish-preview-media > i { color: #ff0033; font-size: 42px; }
.youtube-publish-preview-copy { display: grid; gap: 7px; min-width: 0; }
.youtube-publish-preview-copy > small {
  color: #aaa;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}
.youtube-publish-preview-copy h4 {
  overflow: hidden;
  margin: 0;
  color: #f2f4f7;
  font: 600 17px/1.3 'Space Grotesk';
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-publish-preview-copy > strong { color: #d9dce2; font-size: 11px; }
.youtube-publish-preview-copy > p { margin: 0; color: #838b9a; font-size: 10px; }
.youtube-publish-check-result { min-width: 0; }
.youtube-publish-check-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 11px;
}
.youtube-publish-check-summary > div { display: flex; align-items: baseline; gap: 8px; }
.youtube-publish-check-summary strong { color: #f1f3f7; font: 650 20px/1 'Space Grotesk'; }
.youtube-publish-check-summary span,
.youtube-publish-check-summary small { color: #838b9a; font-size: 10px; }
.youtube-publish-check-progress { overflow: hidden; height: 3px; background: #272727; }
.youtube-publish-check-progress > span { display: block; height: 100%; background: #ff0033; }
.youtube-publish-check-list { margin: 12px 0 0; padding: 0; list-style: none; }
.youtube-publish-check-list > li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-bottom: 1px solid #272727;
  color: #c9cdd5;
  font-size: 10.5px;
}
.youtube-publish-check-list > li > i { color: #6cbb64; font-size: 15px; }
.youtube-publish-check-list > li.failed { color: #f0c36a; }
.youtube-publish-check-list > li.failed > i { color: #ff9f0a; }
.youtube-publish-check-warnings {
  margin-top: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #3a2f16;
  color: #c6a961;
  font-size: 10px;
  line-height: 1.5;
}
.youtube-publish-check-warnings > strong { display: flex; align-items: center; gap: 7px; }
.youtube-publish-check-warnings p { margin: 5px 0 0; }
.youtube-publish-check-edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 15px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: #3ea6ff;
  color: #0f0f0f;
  font: 700 10px/1 'DM Sans', sans-serif;
  cursor: pointer;
}
.youtube-publish-check-edit:hover { background: #65b8ff; }
.youtube-publish-check-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.youtube-publish-check-empty {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 130px;
}
.youtube-publish-check-empty > i { color: #ff0033; font-size: 40px; }

@media (max-width: 1050px) {
  .youtube-publisher-history-layout { grid-template-columns: 1fr; }
  .youtube-publisher-history-layout > .youtube-history { padding-right: 0; }
  .youtube-publisher-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding-left: 0;
    border-left: 0;
  }
  .youtube-publisher-overview { grid-column: 1 / -1; }
  .youtube-publish-check-body { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .youtube-history-edit-dialog { width: calc(100vw - 16px); overflow: hidden; }
  .youtube-history-edit-dialog-panel { width: 100%; }
  .youtube-history-edit-field-row { gap: 10px; }
  .youtube-history-ai-slot,
  .youtube-history-ai-slot[data-youtube-ai-slot="title"] {
    position: static;
    grid-template-columns: 1fr;
    width: auto;
    min-width: 0;
    overflow: visible;
    padding: 0;
  }
}

@media (max-width: 720px) {
  .youtube-publisher-sidebar { grid-template-columns: 1fr; }
  .youtube-publisher-overview { grid-column: auto; }
  .youtube-history-row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .youtube-history-bild { width: 72px; }
  .youtube-history-link { display: none; }
  .youtube-history-actions { align-items: flex-end; flex-direction: column; }
  .youtube-history-edit > span { display: none; }
  .youtube-history-edit-grid { grid-template-columns: 1fr; }
  .youtube-history-edit-wide { grid-column: auto; }
  .youtube-history-edit-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .youtube-history-edit-dialog-panel { max-height: calc(100vh - 18px); }
  .youtube-history-edit-dialog-panel > header { padding: 14px; }
  .youtube-history-edit-dialog .youtube-history-edit-form { padding: 16px 14px; }
  .youtube-history-edit-thumbnail > label { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; min-height: 73px; }
  .youtube-history-edit-thumbnail-preview { width: 130px; }
  .youtube-publish-check-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .youtube-publish-check-preview { grid-template-columns: 1fr; }
}


/* Der Leerzustand steht in einer Lesespalte - dort steht ein Satz
   Fliesstext, und der laeuft ueber die volle Fensterbreite auseinander.

   Kopfzeile und Kachelraster standen bis zum 27.08.2026 mit darin. Das war
   der Deckel, den der Nutzer gemeldet hat ("Die Seiten werden nur bis zu
   einem bestimmten Zeitpunkt groesser"): der Werkzeugrahmen war laengst
   100 % breit, aber Ueberschrift und Raster hoerten bei 1400px auf. Ab rund
   1884px Fensterbreite wurde das sichtbar, bei 2560px blieben 676px rechts
   leer, bei 3440px 1556px.

   Fuer ein Kachelraster ist eine Lesespalte auch das falsche Mass: Kacheln
   werden nicht gelesen, sondern ueberflogen. Ihre Breite begrenzt jetzt die
   Kachel selbst (siehe .tool-history-list weiter unten), nicht der
   Behaelter. */
.tool-history-empty { width: min(1400px, 100%); justify-self: start; }

/* =======================================================================
   YouTube-Publisher - Gestaltung
   Anlass, 26.08.2026: Die Ansicht war eine Liste, ein Kastenraster und ein
   drei Pixel hoher Balken. Nichts bewegte sich, nichts hob etwas hervor,
   und der wichtigste Wert der Seite - ist der Upload fertig? - stand als
   nackte Zahl da.

   Dieselben Größen wie in der besten Veröffentlichungszeit: EIN Grund, EIN
   Rand, zwei Eckenradien.
   ======================================================================= */
.youtube-publisher-history-layout {
  --yt-flaeche: #101219;
  --yt-flaeche-tief: #0b0d12;
  --yt-rand: #1e1f26;
  --yt-ecke: 14px;
  --yt-ecke-klein: 10px;
  --yt-rot: #ff0033;
}

/* --- Die vier Kennzahlen als Zeile ------------------------------------ */
.youtube-publisher-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border: 0;
  background: none;
}
.youtube-publisher-stats > article { display: none; }
.yt-fakt { display: inline-flex; align-items: baseline; gap: 7px; }
.yt-fakt > i { align-self: center; color: #5f6577; font-size: 15px; }
.yt-fakt > b {
  color: #f4f5f8;
  font: 600 17px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
.yt-fakt > small { color: #838b9a; font-size: 10.5px; }
/* Der Zustand, der etwas verlangt, färbt sich - die anderen bleiben ruhig. */
.yt-fakt.achtung > i, .yt-fakt.achtung > b { color: #f3b251; }
.yt-fakt.gut > i { color: #6cbb64; }

/* --- Der Bereitschaftsring -------------------------------------------- */
.yt-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0;
  flex: none;
}
.yt-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.yt-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.yt-ring-grund { stroke: #22252f; }
.yt-ring-wert {
  stroke: var(--yt-rot);
  /* Der Ring zieht sich auf, statt fertig dazustehen. */
  animation: yt-ring-auf .85s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes yt-ring-auf {
  from { stroke-dashoffset: 214; }
  to { stroke-dashoffset: var(--yt-ring-rest, 0); }
}
.yt-ring.fast .yt-ring-wert { stroke: #f3b251; }
.yt-ring.fertig .yt-ring-wert { stroke: #6cbb64; }
.yt-ring figcaption {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.yt-ring figcaption b {
  color: #f4f5f8;
  font: 600 22px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
.yt-ring figcaption span { color: #6b7183; font: 500 12px/1 'Space Grotesk', sans-serif; }
.yt-ring.fertig figcaption b { color: #6cbb64; }

.youtube-publish-check-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--yt-rand);
}
.youtube-publish-check-summary-text { display: grid; gap: 2px; min-width: 0; }
.youtube-publish-check-summary-text strong {
  color: #f1f3f7;
  font: 600 24px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
.youtube-publish-check-summary-text span { color: #aeb4c0; font-size: 11.5px; }
.youtube-publish-check-summary-text small { color: #6b7183; font-size: 10.5px; }

/* --- Die Prüfliste liest sich als Liste, nicht als Fließtext ---------- */
.youtube-publish-check-list > li {
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .16s ease;
}
.youtube-publish-check-list > li + li { margin-top: 3px; }
.youtube-publish-check-list > li.failed { background: #1c1509; }
.youtube-publish-check-list > li.failed > i { color: #f3b251; }
.youtube-publish-check-list > li:hover { background: #16181f; }

/* --- Die Uploadliste: Zustand sichtbar, Bewegung beim Aufbau ---------- */
@keyframes yt-zeile-auf { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* Eine schmale Leiste am linken Rand trägt den Zustand - vorher sahen
   geplant, privat und veröffentlicht bis auf ein Wort gleich aus. */
.youtube-history-row::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: #2c313d;
  transition: background .16s ease;
}
.youtube-history-row.geplant::before { background: #3ea6ff; }
.youtube-history-row.veroeffentlicht::before { background: #6cbb64; }
.youtube-history-row.privat::before { background: #6b7183; }
.youtube-history-row.fehler::before { background: var(--yt-rot); }
.youtube-history-row.is-selected::before { background: var(--yt-rot); width: 3px; left: 3px; }

/* Ohne Vorschaubild stand dort ein graues Feld mit drei Punkten. Ein
   Platzhalter darf aussehen wie Absicht, nicht wie ein Ladefehler. */
.youtube-history-bild {
  border-radius: 6px;
  background: linear-gradient(140deg, #1c1e26 0%, #121319 100%);
}
.youtube-history-bild > i { color: #3a3f4c; font-size: 22px; }
.youtube-history-bild img { position: relative; z-index: 1; }

/* --- Die Karten der Seitenleiste im selben Maß ------------------------ */
.youtube-publisher-sidebar-card,
.youtube-publisher-overview,
.youtube-publish-check {
  border-radius: var(--yt-ecke);
  border-color: var(--yt-rand);
}
.youtube-publisher-next { align-items: center; }
.youtube-publisher-next-icon {
  border-radius: 11px;
  background: #241119;
  color: #ff4f6c;
}

@media (prefers-reduced-motion: reduce) {
  .yt-ring-wert { animation: none; stroke-dashoffset: var(--yt-ring-rest, 0); }
  .youtube-history-row { animation: none; }
}

/* --- Aus einer Fehlermeldung wird eine Aufforderung ---------------------
   Anlass, 26.08.2026: Unter dem Check stand der Rohtext von YouTube — 403,
   "domain": "youtube.thumbnail", "reason": "forbidden". Für einen Kunden ist
   das keine Auskunft, sondern eine Wand. Jetzt steht dort, was zu tun ist. */
.youtube-publish-check-warnings { display: grid; gap: 10px; margin-top: 16px; }
.yt-freigabe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid #3a2d14;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c1509 0%, #14110b 100%);
}
.yt-freigabe-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #2a2010;
  color: #f3b251;
  font-size: 18px;
}
/* Sperre aufgehoben: gruen statt warnend. Es ist keine Warnung mehr, sondern
   der Hinweis, dass genau ein Schritt jetzt moeglich ist. */
.yt-freigabe.is-freigegeben {
  border-color: #1f4433;
  background: linear-gradient(180deg, #0d1c15 0%, #0b1410 100%);
}
.yt-freigabe.is-freigegeben .yt-freigabe-icon { background: #122c20; color: #63d39b; }
.yt-freigabe.is-freigegeben strong { color: #d7f3e4; }
.yt-freigabe.is-freigegeben p { color: #93b9a6; }

.yt-freigabe > div { display: grid; gap: 7px; min-width: 0; }
.yt-freigabe strong { color: #f6e8cf; font: 600 13.5px/1.35 'DM Sans', sans-serif; }
.yt-freigabe p { margin: 0; color: #b9ac95; font-size: 11.5px; line-height: 1.6; }
/* Die Schritte sind nummeriert, weil sie eine Reihenfolge haben. */
.yt-freigabe ol {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding-left: 17px;
  color: #cbbfa8;
  font-size: 11.5px;
  line-height: 1.55;
}
.yt-freigabe ol::marker, .yt-freigabe li::marker { color: #8a7b5f; }
.yt-freigabe-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.yt-freigabe-aktionen > a,
.yt-freigabe-aktionen > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid #4a3a1c;
  border-radius: 9px;
  background: #241b0d;
  color: #f3b251;
  font: 600 11.5px/1 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.yt-freigabe-aktionen > a { border-color: #f3b251; background: #f3b251; color: #1a1409; }
.yt-freigabe-aktionen > a:hover { background: #ffc76e; border-color: #ffc76e; }
.yt-freigabe-aktionen > button:hover { border-color: #f3b251; color: #ffd08f; }
.yt-freigabe-aktionen > button[disabled] { opacity: .6; cursor: default; }
.yt-freigabe-aktionen i { font-size: 14px; }

/* Der Wortlaut von YouTube bleibt erreichbar, aber zugeklappt. */
.yt-freigabe-roh > summary {
  color: #8a7b5f;
  font-size: 10.5px;
  cursor: pointer;
  list-style: none;
}
.yt-freigabe-roh > summary::-webkit-details-marker { display: none; }
.yt-freigabe-roh > summary::before { content: "▸ "; }
.yt-freigabe-roh[open] > summary::before { content: "▾ "; }
.yt-freigabe-roh > code {
  display: block;
  overflow-x: auto;
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #0d0b07;
  color: #6f6553;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.yt-freigabe-fehlschlag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px !important;
  color: #ff9c8f !important;
  font-size: 11px;
}

/* --- Der Check nutzt seine Fläche --------------------------------------
   Vorher lagen Vorschau und Ergebnis in zwei gleich breiten Spalten mit
   52 Pixeln Abstand — links stand ein kleines Bild in viel Leere. */
.youtube-publish-check-body {
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: 30px;
  align-items: start;
}
/* Die Vorschau wird gestapelt wie eine YouTube-Kachel: Bild oben, Text
   darunter. Nebeneinander war das Bild zu klein, um etwas zu zeigen. */
.youtube-publish-check-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #1e1f26;
  border-radius: 14px;
  background: #0d0f15;
}
.youtube-publish-preview-media { border-radius: 10px; }
.youtube-publish-preview-copy h4 {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
}

@media (max-width: 1200px) {
  .youtube-publish-check-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* =======================================================================
   YouTube-Publisher - Aufteilung
   Anlass, 26.08.2026: Zwei Fehler auf einmal.

   1. Die Seitenleiste klebt beim Rollen oben fest und lag im SELBEN Raster
      wie der Veröffentlichungs-Check darunter. Ein klebendes Element wandert
      innerhalb seines Rasters - liegt der nächste Abschnitt darin, schiebt
      es sich über ihn. Liste und Seitenleiste haben deshalb jetzt eine
      eigene Ebene (.youtube-publisher-oben), der Check liegt daneben.

   2. Die Abschnitte hatten keine Flächen, nur Trennlinien. Drei Blöcke ohne
      Rahmen auf schwarzem Grund lesen sich nicht als Aufbau, sondern als
      Aufzählung.
   ======================================================================= */
.youtube-publisher-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.youtube-publisher-oben {
  display: grid;
  /* Die Liste ist der Inhalt, die Seitenleiste die Begleitung - deshalb
     nicht halbe-halbe. */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 20px;
  align-items: start;
}

/* --- Jeder Block ist eine Fläche -------------------------------------- */
.youtube-publisher-history-layout > .youtube-history,
.youtube-publisher-history-layout .youtube-publisher-sidebar,
.youtube-publisher-oben > .youtube-history,
.youtube-publisher-oben > .youtube-publisher-sidebar,
.youtube-publisher-history-layout > .youtube-publish-check {
  padding: 18px 20px 20px;
  border: 1px solid var(--yt-rand);
  border-radius: var(--yt-ecke);
  background: var(--yt-flaeche);
}
.youtube-publisher-oben > .youtube-history { padding-right: 20px; }
.youtube-publisher-oben > .youtube-publisher-sidebar {
  top: 18px;
  margin-top: 0;
  padding-left: 20px;
  gap: 0;
}
.youtube-publisher-history-layout > .youtube-publish-check {
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid var(--yt-rand);
}

/* Die Karten in der Seitenleiste teilen sich Trennlinien statt Rahmen -
   ein Rahmen im Rahmen wäre eine Schachtel zu viel. */
.youtube-publisher-overview,
.youtube-publisher-sidebar-card {
  border-bottom-color: #1a1b21;
}

/* --- Überschriften mit gleichem Anschlag ------------------------------- */
.youtube-publisher-history-layout .section-kicker {
  color: #ff4f6c;
  font: 800 9.5px/1 'DM Sans', sans-serif;
  letter-spacing: .17em;
}
.youtube-publisher-history-layout h3 {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: -.015em;
}
.youtube-publisher-overview > h3,
.youtube-publisher-history-layout .tool-history-head h3,
.youtube-publish-check-head h3 { font-size: 19px; }
.youtube-publisher-planning h3 { font-size: 15px; }

/* --- Der Check bekommt eine Rangfolge ---------------------------------- */
/* Der Bereitschaftsgrad ist die Antwort auf die Frage in der Überschrift -
   er steht deshalb als eigenes Band oben, nicht irgendwo in der Spalte. */
.youtube-publish-check-summary {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--yt-rand);
  border-radius: 12px;
  background: linear-gradient(120deg, #14161d 0%, #0d0f15 62%);
}
.youtube-publish-check-list { margin-top: 0; }

/* Die Vorschau trägt ein Abspielzeichen - so liest man sie als Video und
   nicht als Bildplatzhalter. */
.youtube-publish-preview-media:has(img)::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 32px;
  border-radius: 8px;
  background: rgba(12, 14, 20, .74);
  backdrop-filter: blur(2px);
}
.youtube-publish-preview-media:has(img)::before {
  content: "";
  position: absolute;
  z-index: 3;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}
.youtube-publish-check-preview:hover .youtube-publish-preview-media:has(img)::after { background: rgba(255, 0, 51, .85); }

/* --- Der Kopf der Liste bekommt Luft ----------------------------------- */
.youtube-publisher-history-layout .tool-history-head { margin-bottom: 4px; }
.youtube-history-columns { margin-top: 10px; }

/* --- Die Werkzeuge lesen sich als Wege, nicht als Zeilen ---------------- */
.youtube-publisher-planning button {
  border-radius: 10px;
  transition: background .16s ease, border-color .16s ease;
}
.youtube-publisher-planning button:hover { background: #16181f; }

/* =======================================================================
   Publisher, Gestaltung 26.08.2026: EINE Fläche, Trennlinien darin.

   Vorgeschichte in zwei Schritten, beide mit einem wahren Kern:
   Erst hatten die Abschnitte gar keine Flächen - drei rahmenlose Blöcke auf
   schwarzem Grund lasen sich als Aufzählung, nicht als Aufbau. Daraufhin
   bekam jeder Abschnitt eine eigene Fläche - und damit lag Kachel neben
   Kachel neben Kachel, jede gleich schwer, dazu Flächen INNERHALB der
   Flächen (ausgewählter Upload, Werkzeuge, Bereitschaftsband). Auf einem
   Bildschirm standen fünf verschiedene Eckradien.

   Beides ist derselbe Fehler an zwei Enden: Struktur wurde über Rahmen
   gesucht statt über Rang. Deshalb jetzt:

   - Der gesamte Publisher ist EIN Feld mit einem Rahmen.
   - Innen trennen Linien, keine weiteren Rahmen: senkrecht zwischen Liste
     und Seitenleiste, waagerecht vor dem Check.
   - Kein Kasten im Kasten. Was vorher eine kleine Fläche war, wird zu Abstand
     plus Haarlinie.
   - Zwei Radien statt fünf: das Feld selbst, und 6px für Bild und Knopf.
   - Rang entsteht über Schriftgrad und Weißraum, nicht über Rahmen.
   ======================================================================= */

.youtube-publisher-history-layout {
  gap: 0;
  padding: 0;
  border: 1px solid var(--yt-rand);
  border-radius: var(--yt-ecke);
  background: var(--yt-flaeche);
}

/* Die Abschnitte geben ihre eigene Fläche ab - sie liegen jetzt in einer. */
.youtube-publisher-history-layout > .youtube-history,
.youtube-publisher-history-layout .youtube-publisher-sidebar,
.youtube-publisher-oben > .youtube-history,
.youtube-publisher-oben > .youtube-publisher-sidebar,
.youtube-publisher-history-layout > .youtube-publish-check {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.youtube-publisher-oben { gap: 0; }

/* Die Trennlinie hängt an der Liste, nicht an der Seitenleiste: die Liste ist
   die höhere Spalte, damit läuft die Linie über die volle Inhaltshöhe. An der
   kürzeren Seitenleiste bliebe sie auf halber Strecke stehen. */
.youtube-publisher-oben > .youtube-history {
  padding: 20px 24px 22px;
  border-right: 1px solid var(--yt-rand);
}
.youtube-publisher-oben > .youtube-publisher-sidebar {
  padding: 20px 24px 22px;
}
.youtube-publisher-history-layout > .youtube-publish-check {
  margin-top: 0;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--yt-rand);
}

/* --- Keine Fläche mehr innerhalb der Fläche ---------------------------- */
.youtube-publisher-overview,
.youtube-publisher-sidebar-card {
  border-radius: 0;
  border-color: #1a1b21;
}

/* Das Bereitschaftsband war ein gerahmter Kasten mit Verlauf mitten im Feld.
   Es bleibt eine eigene Zeile - jetzt aber durch eine Linie abgesetzt. */
.youtube-publish-check-summary {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--yt-rand);
  border-radius: 0;
  background: transparent;
}

/* --- Zwei Radien, nicht fünf ------------------------------------------- */
/* .youtube-history-row braucht hier nichts mehr: die Basisregel setzt bereits
   border-radius: 0, die Zwischenschicht ist am 27.08.2026 entfallen. */
.youtube-history-bild { border-radius: 6px; }
.youtube-publisher-next-icon { border-radius: 6px; }
.youtube-publisher-next-actions > button,
.youtube-publisher-next-actions > a { border-radius: 6px; }
.youtube-publish-check-list > li { border-radius: 0; }
/* Die Werkzeuge sind Zeilen mit Trennlinien - ein Radius machte Knöpfe daraus. */
.youtube-publisher-planning button { border-radius: 0; }

/* --- Zeilen reagieren über die ganze Breite ---------------------------- */
/* Der negative Rand gegen die Feldpolsterung ist am 27.08.2026 entfallen: eine
   spätere Regel (siehe "Das Feld um die Liste ist weg") setzte Rand und
   Polsterung derselben Selektoren wieder auf 0. Beide Blöcke zusammen ergaben
   den Ausgangszustand - gemessen mit tests/contentfactory-publisher-kaskade. */

/* Der Farbbalken bleibt, wo er ist (4px ab Zeilenkante) - er wandert mit der
   Zeile nach außen und steht damit dicht an der Feldkante. Ein eigener Wert
   hier würde nur die Regel für die ausgewählte Zeile aushebeln. */

/* =======================================================================
   Meister/Detail, 26.08.2026.

   Die Liste ist eine Auswahl, keine Galerie: schmal, dicht, kleine Bilder.
   Die rechte Spalte ist der Inhalt: ein Upload, alles darüber, untereinander.
   ======================================================================= */

/* Kopf: Titel links, die vier Zahlen rechts auf derselben Grundlinie. */
.youtube-publisher-kopf {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--yt-rand);
}
.youtube-publisher-kopf h3 { margin: 6px 0 0; font-size: 19px; }
.youtube-publisher-kopf .youtube-publisher-stats {
  display: flex;
  gap: 18px;
  border: 0;
  padding: 0;
}
.youtube-publisher-kopf .youtube-publisher-stats > article {
  padding: 0;
  border: 0;
}

/* Die Liste bekommt die schmalere Spalte - sie wählt aus, sie erzählt nicht.
   align-items: stretch, damit die Trennlinie über die volle Höhe läuft: die
   Detailspalte ist jetzt die höhere, und eine Linie, die auf halber Strecke
   aufhört, sieht nach abgeschnitten aus. Möglich, seit die Spalte nicht mehr
   klebt - ein klebendes Element braucht Luft in seinem Raster. */
.youtube-publisher-oben {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
}

/* Kleine, ruhige Vorschau: 44px statt 92px. Ohne eigenes Bild bleibt eine
   flache Fläche stehen statt des grauen YouTube-Zeichens - das sah in jeder
   Zeile nach fehlendem Bild aus, obwohl nichts fehlt. */
.youtube-publisher-oben .youtube-history-row {
  /* Auswahl, Vorschaubild, Inhalt und Aktionen sind vier eigene Zellen.
     Die alte Dreispaltenregel liess die Aktionen in eine zweite Zeile
     umbrechen; Status und Link erschienen dadurch links neben dem Upload. */
  grid-template-columns: 24px 44px minmax(0, 1fr) auto;
  gap: 11px;
  padding-top: 9px;
  padding-bottom: 9px;
  transition: background .16s ease, transform .16s ease;
}
.youtube-publisher-oben .youtube-history-row:hover { background: #14161d; transform: translateX(2px); }
.youtube-publisher-oben .youtube-history-bild {
  width: 44px;
  border-radius: 4px;
  background: #181a21;
}
.youtube-publisher-oben .youtube-history-bild > i { font-size: 13px; color: #2f333d; }
.youtube-publisher-oben .youtube-history-copy strong { font-size: 11.5px; }
.youtube-publisher-oben .youtube-history-copy small { font-size: 10px; }

/* Die Spalte klebte beim Rollen oben fest - richtig, solange sie Beiwerk neben
   der Liste war. Jetzt trägt sie den Inhalt der Seite und ist die höhere von
   beiden; eine klebende Hauptspalte gibt es nicht. */
.youtube-publisher-oben > .youtube-publisher-sidebar { position: static; }

/* Rechts steht ein Thema, deshalb keine Trennlinie zwischen Kopf und Inhalt
   der Spalte - nur zwischen den Abschnitten darin. */
.youtube-publisher-sidebar-card.is-erste { padding-top: 0; }
.youtube-publisher-oben > .youtube-publisher-sidebar > .youtube-publish-check {
  margin-top: 0;
  padding: 20px 0 0;
  border-top: 1px solid #1a1b21;
}
/* Der Check ist kein eigener Abschnitt mehr - seine Überschrift wäre die
   dritte auf einer Seite mit einem Thema. */
.youtube-publisher-sidebar .youtube-publish-check-head { display: none; }
/* Untereinander statt nebeneinander: die Spalte ist jetzt schmaler als das
   halbe Feld, zwei Spalten darin wären Streifen. */
.youtube-publisher-sidebar .youtube-publish-check-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 0;
}

/* Die Vorschau ist ein Beleg, kein Bühnenbild.
   Über die volle Spaltenbreite wurde sie 430px hoch und war damit das größte
   Element der Seite - ausgerechnet dann, wenn gar kein eigenes Bild da ist und
   nur das graue YouTube-Zeichen steht. Auf 220px begrenzt steht sie neben dem
   Titel statt über allem. */
.youtube-publisher-sidebar .youtube-publish-check-preview {
  grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr);
  gap: 28px;
  align-items: center;
}
.youtube-publisher-sidebar .youtube-publish-preview-details {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}
.youtube-publisher-sidebar .youtube-publish-preview-media {
  width: 220px;
  border-radius: 6px;
}
/* Ohne eigenes Bild bleibt eine ruhige Fläche statt des grauen Zeichens. */
.youtube-publisher-sidebar .youtube-publish-preview-media:not(:has(img)) {
  background: #15171e;
}
.youtube-publisher-sidebar .youtube-publish-preview-score {
  display: grid;
  justify-items: start;
  gap: 10px;
  justify-self: start;
}
.youtube-publisher-sidebar .youtube-publish-preview-score .youtube-publish-check-edit {
  width: auto;
  min-height: 32px;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid #2a303b;
  border-radius: 6px;
  background: #171a21;
  color: #4dadff;
}
.youtube-publisher-sidebar .youtube-publish-preview-score .youtube-publish-check-edit:hover {
  border-color: #3ea6ff;
  background: #202632;
}

/* --- Dichte der Detailspalte, 26.08.2026 ------------------------------
   Die Spalte war rund 900px hoch, obwohl sie fünf Zeilen Text trägt. Drei
   Ursachen, alle drei behoben:

   1. Die Vorschau war eine gerahmte Kachel INNERHALB der gerahmten Spalte.
      Ein Kasten im Kasten kostet 2x14px Innenabstand plus eine Linie und
      trennt nichts, was nicht schon getrennt wäre.
   2. Die Prüfliste lief einspaltig über die volle Breite - fünf Zeilen mit
      je zwei Wörtern und daneben 400px Leerraum. Zweispaltig braucht sie
      drei statt fünf Zeilen und nutzt die Breite, die ohnehin da ist.
   3. Ring und Abstände waren auf die frühere, volle Feldbreite ausgelegt. */
.youtube-publisher-sidebar .youtube-publish-check-preview {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--yt-rand);
  border-radius: 0;
  background: none;
}
.youtube-publisher-sidebar .youtube-publish-check-body { gap: 14px; }
.youtube-publisher-sidebar .youtube-publish-check-result { display: grid; gap: 12px; }

/* In die Breite statt in die Höhe: die Prüfungen sind unabhängig
   voneinander, ihre Reihenfolge trägt keine Bedeutung.
   Höchstens drei Spalten, obwohl vier hineinpassen: es sind fünf Prüfungen.
   Vier nebeneinander lassen die fünfte allein in der zweiten Zeile stehen —
   3+2 liest sich als Block, 4+1 als Rest. Deshalb hier eine feste Spaltenzahl
   und kein auto-fit: die Zahl der Prüfungen ist bekannt, die Aufteilung soll
   ihr folgen und nicht der zufällig verfügbaren Breite. */
.youtube-publisher-sidebar .youtube-publish-check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px;
}
/* Eine feine Linie zwischen den Spalten - sonst schwimmen die Häkchen. */
.youtube-publisher-sidebar .youtube-publish-check-list > li + li { border-left: 1px solid #191b22; }
.youtube-publisher-sidebar .youtube-publish-check-list > li:nth-child(3n + 1) { border-left: 0; }
@media (max-width: 1250px) {
  .youtube-publisher-sidebar .youtube-publish-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .youtube-publisher-sidebar .youtube-publish-check-list > li:nth-child(3n + 1) { border-left: 1px solid #191b22; }
  .youtube-publisher-sidebar .youtube-publish-check-list > li:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 820px) {
  .youtube-publisher-sidebar .youtube-publish-check-list { grid-template-columns: minmax(0, 1fr); }
  .youtube-publisher-sidebar .youtube-publish-check-list > li { border-left: 0 !important; }
}
.youtube-publisher-sidebar .youtube-publish-check-list > li {
  min-height: 30px;
  padding: 5px 8px;
}
.youtube-publisher-sidebar .youtube-publish-check-list > li + li { margin-top: 0; }

/* Der Ring bildet die zweite Spalte der Vorschau. Die Prozentangabe steht
   direkt darunter; beides beginnt an derselben linken Kante. */
.youtube-publisher-sidebar .youtube-publish-check-summary { gap: 14px; padding: 0 0 12px; }
.youtube-publisher-sidebar .yt-ring,
.youtube-publisher-sidebar .yt-ring svg { width: 68px; height: 68px; }
.youtube-publisher-sidebar .yt-ring figcaption b { font-size: 18px; }
.youtube-publisher-sidebar .yt-ring figcaption span { font-size: 10px; }
.youtube-publisher-sidebar .youtube-publish-check-summary-text strong { font-size: 20px; }

/* Die Prüfliste ordnet sich selbst um; die Vorschau kann das nicht, weil ihre
   Breite fest ist. Unter 1250px wird sie deshalb von Hand kleiner gesetzt. */
@media (max-width: 1250px) {
  .youtube-publisher-sidebar .youtube-publish-preview-details { grid-template-columns: 170px minmax(0, 1fr); }
  .youtube-publisher-sidebar .youtube-publish-preview-media { width: 170px; }
}

@media (max-width: 620px) {
  .youtube-publisher-sidebar .youtube-publish-check-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .youtube-publisher-sidebar .youtube-publish-preview-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .youtube-publisher-sidebar .youtube-publish-preview-media {
    width: min(240px, 100%);
  }
}

/* Der Startknopf bleibt mittig - so ist er über alle Werkzeuge hinweg an
   derselben Stelle, und die Gewohnheit wiegt hier schwerer als die Kante. */


/* --- Ausschmückung der Publisher-Ansicht, 26.08.2026 -------------------
   Nach dem Verdichten war die Seite kompakt, aber leer: eine flache Fläche
   in einem Ton, ein graues Rechteck in der Mitte, ein blauer Balken darunter.
   Alles hier gibt der Fläche Tiefe oder erklärt etwas — nichts davon ist
   Dekoration um ihrer selbst willen. */

/* Der Kopf trägt die Farbe der Marke, aber nur als Hauch: ein weicher Schein
   hinter der Überschrift statt einer bunten Leiste. */
.youtube-publisher-history-layout { position: relative; overflow: hidden; }
.youtube-publisher-history-layout::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -60px;
  width: 420px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(255, 0, 51, .10), transparent 68%);
  pointer-events: none;
}
.youtube-publisher-kopf h3 { position: relative; }

/* Die Kennzahlen bekommen Trennstriche - vier Zahlen in einer Reihe ohne
   Gliederung liest man als eine Zahl. */
.youtube-publisher-stats .yt-fakt + .yt-fakt {
  padding-left: 14px;
  border-left: 1px solid #1c1e26;
}

/* Die beiden Spalten heben sich minimal voneinander ab: links die Liste und
   ihre Verlaufsdaten (etwas tiefer), rechts der gewählte Upload mit seinem
   Qualitätscheck und den Planungswerkzeugen (etwas heller). */
.youtube-publisher-oben > .youtube-history { background: #0e1016; }
.youtube-publisher-oben > .youtube-publisher-sidebar {
  /* Der Wert steht hier ausgeschrieben und nicht als var(--yt-flaeche):
     nur so laesst sich am gerenderten Ergebnis nachweisen, dass er greift. */
  background: linear-gradient(180deg, #12141c 0%, #101219 320px);
}

/* Kanalrhythmus: kein weiterer Kasten, sondern ein Analyseband innerhalb der
   Verlaufsspalte. Die Balken zeigen Upload-Haeufigkeit, nicht Reichweite. */
.youtube-publisher-rhythmus {
  margin: 20px -24px -22px;
  padding: 18px 24px 20px;
  border-top: 1px solid #1a1b21;
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, 0));
}
.youtube-publisher-rhythmus > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.youtube-publisher-rhythmus > header h3 {
  margin: 5px 0 0;
  color: #f1f3f7;
  font: 600 15px/1.2 'Space Grotesk', sans-serif;
}
.youtube-rhythmus-steuerung { display: flex; align-items: center; gap: 9px; }
.youtube-rhythmus-steuerung > small { color: #656d7d; font-size: 8.5px; }
.youtube-rhythmus-steuerung > button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 23, 73, .1);
  color: #ff5c77;
  font-size: 8px;
  cursor: pointer;
}
.youtube-rhythmus-steuerung > button[hidden] { display: none; }
.youtube-rhythmus-tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.youtube-rhythmus-tage > li {
  min-width: 0;
}
.youtube-rhythmus-tage > li > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 54px auto;
  align-items: end;
  gap: 5px 3px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #657083;
  text-align: left;
  cursor: pointer;
}
.youtube-rhythmus-tage > li > button:disabled {
  cursor: default;
  opacity: .42;
}
.youtube-rhythmus-balken {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 54px;
  border-bottom: 1px solid #252935;
}
.youtube-rhythmus-balken > i {
  width: min(14px, 46%);
  height: var(--yt-rhythmus-level);
  min-height: 3px;
  border-radius: 4px 4px 1px 1px;
  background: #343947;
  box-shadow: 0 -5px 14px rgba(0, 0, 0, .16);
  transition: height .24s ease, background .18s ease, box-shadow .18s ease;
}
.youtube-rhythmus-tage > li > button:not(:disabled):hover .youtube-rhythmus-balken > i,
.youtube-rhythmus-tage > li > button:focus-visible .youtube-rhythmus-balken > i,
.youtube-rhythmus-tage > li > button[aria-pressed="true"] .youtube-rhythmus-balken > i,
.youtube-rhythmus-tage > li.is-leading .youtube-rhythmus-balken > i {
  background: linear-gradient(180deg, #ff496c, #e80037);
  box-shadow: 0 0 16px rgba(255, 23, 73, .2);
}
.youtube-rhythmus-tage > li > button:not(:disabled):hover .youtube-rhythmus-balken > i,
.youtube-rhythmus-tage > li > button:focus-visible .youtube-rhythmus-balken > i {
  transform: translateY(-3px);
}
.youtube-rhythmus-tage > li > button:focus-visible {
  border-radius: 4px;
  outline: 1px solid rgba(255, 73, 108, .65);
  outline-offset: 4px;
}
.youtube-rhythmus-tage > li small {
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.youtube-rhythmus-tage > li b {
  color: #9ba3b1;
  font-size: 8px;
  font-weight: 650;
}
.youtube-rhythmus-tage > li.is-leading small,
.youtube-rhythmus-tage > li.is-leading b,
.youtube-rhythmus-tage > li > button[aria-pressed="true"] small,
.youtube-rhythmus-tage > li > button[aria-pressed="true"] b { color: #ff5c77; }
.youtube-publisher-rhythmus > p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: #7d8696;
}
.youtube-publisher-rhythmus > p > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 23, 73, .1);
  color: #ff4263;
  font-size: 15px;
  flex: none;
}
.youtube-publisher-rhythmus > p > span { display: grid; gap: 2px; }
.youtube-publisher-rhythmus > p strong { color: #d9dde5; font-size: 9.5px; }
.youtube-publisher-rhythmus > p small { color: #687181; font-size: 8.5px; }

/* Die Zeilen der Liste bekommen ein Standbild mit Rahmen und heben sich beim
   Überfahren leicht an - vorher lagen sie flach auf der Fläche. */
.youtube-publisher-oben .youtube-history-bild {
  border: 1px solid #23252e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Die Vorschau ist eine YouTube-Kachel, also sieht sie auch so aus: weiche
   Ecke, Schatten, und ohne eigenes Bild eine ruhige Verlaufsfläche statt
   eines grauen Blocks. Das graue Rechteck war das Auffälligste der Seite. */
.youtube-publisher-sidebar .youtube-publish-preview-media {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.youtube-publisher-sidebar .youtube-publish-preview-media:not(:has(img)) {
  background: linear-gradient(150deg, #1b1e27 0%, #12141b 60%, #0f1117 100%);
  border: 1px solid #23252e;
}
.youtube-publisher-sidebar .youtube-publish-preview-media:not(:has(img)) > i {
  color: #2c3040;
  font-size: 34px;
}

/* Der Kanalname bekommt einen Punkt in Kanalfarbe davor - so liest sich der
   Block als Kanalkarte und nicht als drei Zeilen Text. */
.youtube-publisher-sidebar .youtube-publish-preview-copy > strong {
  display: flex;
  align-items: center;
  gap: 7px;
}
.youtube-publisher-sidebar .youtube-publish-preview-copy > strong::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yt-rot), #a1001f);
  flex: none;
}

/* Bestandene Prüfungen bekommen einen leisen Hof um das Häkchen - fünf
   gleiche Zeilen brauchen einen Anker fürs Auge. */
.youtube-publisher-sidebar .youtube-publish-check-list > li > i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 13px;
  flex: none;
}
.youtube-publisher-sidebar .youtube-publish-check-list > li.passed > i { background: rgba(108, 187, 100, .12); }
.youtube-publisher-sidebar .youtube-publish-check-list > li.failed > i { background: rgba(243, 178, 81, .14); }

/* Der Ring bekommt Tiefe statt eines flachen Bogens. */
.youtube-publisher-sidebar .yt-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .035), transparent 70%);
  pointer-events: none;
}

/* Die Werkzeuge unten waren zwei Textzeilen mit einem Pfeil. Jetzt tragen sie
   ihr Zeichen in einem eigenen Feld und antworten auf das Überfahren. */
.youtube-publisher-planning > button[data-factory-tool] {
  border-radius: var(--yt-ecke-klein);
  transition: background .16s ease;
}
.youtube-publisher-planning > button[data-factory-tool]:hover { background: #14161d; }
.youtube-publisher-planning > button[data-factory-tool] > i:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #23252e;
  background: #14161d;
  flex: none;
}

/* Bewegung ist eine Zutat, keine Notwendigkeit - wer sie abbestellt hat,
   bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .youtube-publisher-oben .youtube-history-row:hover { transform: none; }
}


/* --- Die Fußzeile des Publishers, 26.08.2026 ---------------------------
   Unter den zwei Spalten war nichts. Die drei Abschnitte hier stehen in
   derselben Fläche und werden nur durch Linien getrennt - es ist eine Seite
   und kein Stapel Karten. */
.youtube-publisher-unten:empty { display: none; }
/* Achtung: `ai-contentfactory.css` enthält eine nackte Element-Regel
   `footer { display: flex; padding: 28px 0 40px; justify-content: space-between; … }`
   für die Seitenfußzeile. Jedes <footer> auf der Seite erbt sie. Genau das
   hat diesen Block zuerst in eine Reihe gelegt statt in zwei: Plan links,
   Hinweise und Legende rechts daneben, dazu 68px Innenabstand von nirgendwo.
   Die Werte werden hier deshalb ausdrücklich zurückgesetzt — ein <div> statt
   eines <footer> wäre der billigere Weg gewesen, aber der falsche: der Block
   IST der Abschluss des Feldes, und das gehört ins Markup und nicht in eine
   Klasse. */
.youtube-publisher-unten {
  display: block;
  padding: 0;
  border-top: 1px solid var(--yt-rand);
  color: inherit;
  font-size: inherit;
  justify-content: initial;
}
.youtube-publisher-card { padding: 18px 24px 20px; }
.youtube-publisher-card > header { margin-bottom: 14px; }
.youtube-publisher-card > header h3 {
  margin: 2px 0 0;
  color: #eceef3;
  font: 600 15px/1.25 'Space Grotesk', sans-serif;
}

/* Die beiden unteren Abschnitte teilen sich die Breite; die Linie dazwischen
   ist dieselbe wie die zwischen Liste und Detailspalte darüber. */
.youtube-publisher-unten-paar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  border-top: 1px solid var(--yt-rand);
}
.youtube-publisher-unten-paar > .youtube-publisher-card + .youtube-publisher-card {
  border-left: 1px solid var(--yt-rand);
}

/* --- Der Veröffentlichungsplan ----------------------------------------
   Vierzehn Tage nebeneinander, ein Punkt je Upload. Ein voller Kalender wäre
   mehr Fläche für dieselbe Auskunft: wann kommt als Nächstes etwas, und wie
   dicht liegt es beieinander. */
.youtube-plan-tage {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.youtube-plan-tag {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 2px 8px;
  border: 1px solid #1a1c23;
  border-radius: var(--yt-ecke-klein);
  background: #0e1016;
  cursor: default;
}
.youtube-plan-tag > small {
  color: #6b7183;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.youtube-plan-tag > b {
  color: #aeb4c0;
  font: 600 15px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Das Wochenende bleibt lesbar, tritt aber zurück. */
.youtube-plan-tag.wochenende { background: #0c0e13; }
.youtube-plan-tag.wochenende > b { color: #767d8d; }
/* Heute ist der einzige Tag mit einem Rahmen - der Blick braucht einen
   Nullpunkt, von dem aus er den Streifen liest. */
.youtube-plan-tag.ist-heute {
  border-color: #33363f;
  background: #14161d;
}
.youtube-plan-tag.ist-heute > b { color: #f1f3f7; }
/* Ein Tag mit Upload trägt die Kanalfarbe, nicht nur einen Punkt. */
.youtube-plan-tag.hat-upload {
  border-color: rgba(255, 0, 51, .32);
  background: linear-gradient(180deg, rgba(255, 0, 51, .10), rgba(255, 0, 51, .03));
}
.youtube-plan-tag.hat-upload > b { color: #f4f5f8; }
.youtube-plan-punkte {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 6px;
}
.youtube-plan-punkte > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yt-rot);
}
.youtube-plan-punkte > b { color: #9aa1b0; font-size: 9px; font-weight: 600; }

.youtube-plan-naechster {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid #191b22;
  min-width: 0;
}
.youtube-plan-naechster > i { color: var(--yt-rot); font-size: 15px; }
.youtube-plan-naechster > span { color: #838b9a; font-size: 11px; }
.youtube-plan-naechster > strong {
  overflow: hidden;
  color: #eceef3;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-plan-naechster > small { color: #6b7183; font-size: 10.5px; white-space: nowrap; margin-left: auto; }

.youtube-plan-leer,
.youtube-hinweis-leer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid #191b22;
  color: #838b9a;
  font-size: 11.5px;
}
.youtube-plan-leer > i { color: #4a5060; font-size: 16px; }
.youtube-hinweis-leer { margin: 0; padding-top: 0; border-top: 0; }
.youtube-hinweis-leer > i { color: #6cbb64; font-size: 16px; }

/* --- Die offenen Hinweise ----------------------------------------------
   Die Kennzahl im Kopf nannte eine Zahl, aber nirgends stand, welche Uploads
   gemeint sind. Ein Klick wählt den betroffenen Upload aus. */
.youtube-hinweis-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.youtube-hinweis-liste > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--yt-ecke-klein);
  cursor: pointer;
  transition: background .16s ease;
}
.youtube-hinweis-liste > li:hover,
.youtube-hinweis-liste > li:focus-visible { background: #16181f; outline: none; }
.youtube-hinweis-liste > li.is-selected { background: #1a1b21; }
.youtube-hinweis-liste > li > i:first-child { color: #f3b251; font-size: 16px; }
.youtube-hinweis-liste > li > i:last-child { color: #4a5060; font-size: 15px; }
.youtube-hinweis-liste > li > span { display: grid; gap: 1px; min-width: 0; }
.youtube-hinweis-liste > li strong {
  overflow: hidden;
  color: #e7e9ee;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-hinweis-liste > li small {
  overflow: hidden;
  color: #838b9a;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Die Legende --------------------------------------------------------
   Die farbigen Leisten links trugen den Zustand, ohne dass irgendwo stand,
   welche Farbe was bedeutet. Die Farben stehen hier nicht noch einmal
   geschrieben, sondern kommen aus denselben Werten wie die Leisten. */
.youtube-legende-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.youtube-legende-liste > li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aeb4c0;
  font-size: 11.5px;
}
.youtube-legende-farbe {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  flex: none;
}
.youtube-legende-farbe.geplant { background: #3ea6ff; }
.youtube-legende-farbe.veroeffentlicht { background: #6cbb64; }
.youtube-legende-farbe.unlisted { background: #9aa1b0; }
.youtube-legende-farbe.privat { background: #6b7183; }
.youtube-legende-farbe.fehler { background: var(--yt-rot); }

/* Schmaler wird aus dem Streifen ein Block aus sieben Tagen, und die beiden
   unteren Abschnitte stehen untereinander. */
@media (max-width: 1050px) {
  .youtube-plan-tage { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .youtube-publisher-unten-paar { grid-template-columns: minmax(0, 1fr); }
  .youtube-publisher-unten-paar > .youtube-publisher-card + .youtube-publisher-card {
    border-left: 0;
    border-top: 1px solid var(--yt-rand);
  }
}
@media (max-width: 640px) {
  .youtube-legende-liste { grid-template-columns: minmax(0, 1fr); }
  .youtube-plan-naechster { flex-wrap: wrap; }
  .youtube-plan-naechster > small { margin-left: 0; }
}

@media (max-width: 1050px) {
  .youtube-publisher-oben { grid-template-columns: minmax(0, 1fr); }
  /* Untereinander wird aus der senkrechten Trennlinie eine waagerechte. */
  .youtube-publisher-oben > .youtube-history {
    border-right: 0;
    border-bottom: 1px solid var(--yt-rand);
  }
  .youtube-publisher-oben > .youtube-publisher-sidebar {
    position: static;
    padding: 20px 24px 22px;
  }
}

/* =======================================================================
   Publisher als offene Arbeitsflaeche, 26.08.2026.

   Der aeussere Rahmen fasste Verlauf, Detail, Kalender und Hinweise zu einer
   einzigen grossen Box zusammen. Diese Ebene ist jetzt bewusst unsichtbar:
   Inhalt und Interaktion bilden die Struktur, nicht ein Rahmen um alles.
   ======================================================================= */
.youtube-publisher-history-layout {
  position: relative;
  overflow: visible;
  gap: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.youtube-publisher-history-layout::before { display: none; }
.youtube-publisher-kopf {
  padding: 0 0 17px;
  border-bottom: 1px solid #20232b;
}

/* Der Publisher-Assistent ist eine offene Dialogzeile und keine weitere
   Karte. Seine Empfehlung folgt dem ausgewaehlten Upload; der zweite Knopf
   blaettert durch die naechsten sinnvollen Aktionen. */
.youtube-publisher-assistent {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 13px 0 14px;
  border-bottom: 1px solid #20232b;
  overflow: hidden;
}
.youtube-publisher-assistent::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 38, 76, .68));
  content: "";
  animation: yt-assistent-linie 3.8s ease-in-out infinite alternate;
}
.youtube-publisher-assistent-symbol {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 40, 76, .38);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff3658, #77172a 70%);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 0 0 0 rgba(255, 40, 76, .24);
  animation: yt-assistent-puls 2.8s ease-out infinite;
}
.youtube-publisher-assistent-symbol::after {
  position: absolute;
  right: -5px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid #090b10;
  border-radius: 50%;
  background: #7fe077;
  content: "";
}
.youtube-publisher-assistent-copy {
  min-width: 0;
}
.youtube-publisher-assistent-copy small,
.youtube-publisher-assistent-copy strong,
.youtube-publisher-assistent-copy p {
  display: block;
}
.youtube-publisher-assistent-copy small {
  margin-bottom: 2px;
  color: #ff4864;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.youtube-publisher-assistent-copy strong {
  color: #f7f8fb;
  font-size: 12px;
  line-height: 1.35;
}
.youtube-publisher-assistent-copy p,
.youtube-publisher-assistent > p {
  margin: 2px 0 0;
  overflow: hidden;
  color: #858d9d;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-publisher-assistent-aktionen {
  display: flex;
  align-items: center;
  gap: 7px;
}
.youtube-publisher-assistent-aktionen button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #343945;
  border-radius: 7px;
  background: #151820;
  color: #f7f8fb;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.youtube-publisher-assistent-aktionen button:hover,
.youtube-publisher-assistent-aktionen button:focus-visible {
  border-color: #ff3455;
  background: #241219;
  color: #fff;
  outline: 0;
  transform: translateY(-1px);
}
.youtube-publisher-assistent-aktionen .weiter {
  width: 32px;
  padding: 0;
  justify-content: center;
  color: #8d95a5;
}
.is-assistent-focus {
  animation: yt-assistent-fokus 1.8s ease both;
}
@keyframes yt-assistent-puls {
  0%, 55% { box-shadow: 0 0 0 0 rgba(255, 40, 76, .24); }
  100% { box-shadow: 0 0 0 11px rgba(255, 40, 76, 0); }
}
@keyframes yt-assistent-linie {
  from { opacity: .25; transform: translateX(30%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes yt-assistent-fokus {
  0%, 100% { background: transparent; }
  18%, 65% { background: rgba(255, 40, 76, .1); }
}
.youtube-publisher-oben {
  gap: 30px;
  align-items: stretch;
}
.youtube-publisher-oben > .youtube-history {
  padding: 0 30px 0 0;
  border-right: 1px solid #20232b;
  background: transparent;
}
.youtube-publisher-oben > .youtube-history .youtube-history-row,
.youtube-publisher-oben > .youtube-history .youtube-history-columns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}
.youtube-publisher-oben > .youtube-publisher-sidebar {
  padding: 0;
  background: transparent;
}
.youtube-publisher-oben > .youtube-history > .youtube-publisher-rhythmus {
  margin: 20px 0 0;
  padding: 18px 0 0;
  background: transparent;
}

/* Auch der Abschluss ist kein Boden der alten Box mehr. Kalender, Hinweise
   und Legende beginnen jeweils an einer eigenen Linie auf der Seite. */
.youtube-publisher-unten {
  display: block;
  margin-top: 2px;
  padding: 0;
  border-top: 0;
}
.youtube-publisher-card {
  padding: 22px 0;
  border-top: 1px solid #20232b;
  background: transparent;
}
.youtube-publisher-unten-paar {
  gap: 30px;
  border-top: 0;
}
.youtube-publisher-unten-paar > .youtube-publisher-card + .youtube-publisher-card {
  padding-left: 30px;
  border-left: 1px solid #20232b;
}

/* Der Rhythmus ist ein Steuerinstrument. Die Balken wachsen beim Aufbau,
   reagieren auf Hover/Fokus und der aktive Tag filtert die Liste sichtbar. */
.youtube-rhythmus-balken > i {
  transform-origin: center bottom;
  animation: yt-rhythmus-auf .42s cubic-bezier(.2, .78, .2, 1) var(--yt-rhythmus-delay, 0ms) both;
  transition: height .24s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.youtube-history-row[hidden] { display: none; }
.youtube-history-row.is-rhythmus-match { animation: yt-rhythmus-treffer .24s ease both; }
@keyframes yt-rhythmus-auf {
  from { opacity: .25; transform: scaleY(.08); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes yt-rhythmus-treffer {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1050px) {
  .youtube-publisher-oben { gap: 24px; }
  .youtube-publisher-oben > .youtube-history {
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid #20232b;
  }
  .youtube-publisher-oben > .youtube-publisher-sidebar { padding: 0; }
  .youtube-publisher-unten-paar { gap: 0; }
  .youtube-publisher-unten-paar > .youtube-publisher-card + .youtube-publisher-card {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .youtube-publisher-kopf { align-items: flex-start; }
  .youtube-publisher-assistent {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px 0 16px;
  }
  .youtube-publisher-assistent-aktionen {
    grid-column: 2;
    justify-content: flex-start;
  }
  .youtube-publisher-assistent-copy p { white-space: normal; }
  .youtube-rhythmus-steuerung { align-items: flex-end; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .youtube-publisher-assistent::after,
  .youtube-publisher-assistent-symbol,
  .is-assistent-focus,
  .youtube-rhythmus-balken > i,
  .youtube-history-row.is-rhythmus-match { animation: none; }
}

/* Dokumentverlauf: die Blaetter wachsen mit dem Fenster.

   Anlass, 27.08.2026, vom Nutzer gemeldet: "Die Seiten werden nur bis zu
   einem bestimmten Zeitpunkt groesser. Das sieht komisch aus, wenn so viel
   von der Seite noch frei ist." Dahinter steckten zwei Fehler, die einander
   verdeckt haben:

   1. Der Deckel. Nicht hier, sondern 1500 Zeilen weiter oben: die Regel
      `.tool-history-head, .tool-history-list, .tool-history-empty
      { width: min(1400px, 100%) }` fasste den Verlauf in eine Lesespalte.
      Ab rund 1884px Fensterbreite hoerte er auf mitzuwachsen, bei 2560px
      blieben 676px rechts leer, bei 3440px 1556px. Der Rahmen darum war
      laengst voll breit - das sah aus, als waere die Seite kaputt.
      Kopfzeile und Raster stehen jetzt nicht mehr in dieser Regel.

   2. Die feste Spaltenzahl: vier, unter 1500px zwei, ab 2560px bei
      Seitenverhaeltnis 2:1 acht. Bei acht Spalten blieben rund 150px je
      Kachel - Ueberschrift, Kennzahlen und Fusszeile lagen uebereinander.
      Und an der Kante 1500/1501px sprang die Kachel von 516px auf 249px.

   Beide kamen aus derselben Denkrichtung: die Spaltenzahl war vorgegeben,
   die Kachelbreite ergab sich. Jetzt ist es umgekehrt - die Kachelbreite
   ist vorgegeben, die Spaltenzahl ergibt sich. Damit gibt es keine
   Fensterbreite mehr, bei der die Kachel zu schmal wird, und keine, bei der
   die Seite aufhoert mitzuwachsen. Durchgerechnet: 1366px -> 3 Spalten,
   1920px -> 3, 2560px -> 4, 3440px -> 6, 3840px -> 7 - und rechts bleibt
   nichts mehr frei. */

/* Eine eigene Breitenregel brauchen die vier Dokumentwerkzeuge nicht.
   Bis zum 27.08.2026 stand hier zweimal `width: 100% !important;
   max-width: none !important` - einmal fuer den Rahmen, einmal fuer den
   Verlauf darin. Beides steht laengst in ai-contentfactory-alignment.css:2-9
   fuer JEDES Werkzeug, und .tool-history ist ohnehin ein Block und damit
   voll breit. Zwei Stellen fuer dieselbe Zusage - und man sah keiner davon
   an, welche gewinnt. */

/* Die Mindestbreite einer Dokumentkachel waechst mit dem Fenster, bleibt
   aber zwischen 300px und 420px; `auto-fill` legt die Spaltenzahl danach
   fest.

   Die 300px unten sind kein runder Wert, sondern gemessen: in die Fusszeile
   muessen "Fertig" und ein Datum wie "vor 1 Woche - 20.08.2026, 12:00"
   nebeneinander, das braucht rund 281px zuzueglich Innenabstand. Darunter
   kuerzt das Datum weg (white-space: nowrap plus text-overflow, siehe
   .tool-history-fuss small).

   Die 420px oben: darueber wirkt ein Dokument wie ein Plakat.

   Das `min(100%, ...)` ersetzt die frueheren Umbruchabfragen: unterschreitet
   der Platz die Mindestbreite, wird die Spalte schmaler statt ueberzulaufen.
   Auf einem Telefon liegt damit ein Dokument allein, ohne dass dafuer eine
   eigene @media-Regel noetig waere. */
.tool-history-list:has(.tool-history-stapel) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(300px, 19vw, 420px)), 1fr));
  gap: clamp(16px, 1.25vw, 28px);
}

/* Satzspiegel und Beschriftung wachsen leicht mit. Nur die Karte zu strecken,
   waehrend ihr Inhalt klein bleibt, wuerde auf breiten Monitoren wieder wie
   eine feste Miniatur auf einer grossen Flaeche wirken. */
.tool-history-row:has(.tool-history-stapel) {
  padding: clamp(19px, 1.3vw, 25px) clamp(20px, 1.45vw, 28px) clamp(17px, 1.2vw, 23px);
}
.tool-history-seite-text {
  padding: clamp(42px, 3vw, 54px) clamp(21px, 1.6vw, 30px) 0;
  font-size: clamp(10.5px, .72vw, 13px);
}
.tool-history-row:has(.tool-history-stapel) > strong {
  font-size: clamp(14px, .86vw, 16px);
}

/* =======================================================================
   YouTube-Publisher: Maßstab und Anschluss an den Rest der Seite
   27.08.2026, gemeldet vom Nutzer: "Die YT veroeffentlichen Seite sieht
   teilweise klein aus. Auf meinem FullHD sieht es zu gross aus. Auf meinem
   wqhd zu klein. Ausserdem sieht die Seite so anders aus als die restliche
   Seite."

   Beides hat eine gemeinsame Ursache und ist nachmessbar:

   1. DER PUBLISHER WAR DER EINZIGE VERLAUF OHNE BREITENGRENZE. Jeder andere
      Verlauf steht in einer Lesespalte; der Publisher rendert weder
      .tool-history-head noch .tool-history-list und fiel deshalb durch jede
      dieser Regeln hindurch. Die nutzbare Breite ist auf FullHD rund
      1920-300-184 = 1436px, auf WQHD rund 2560-300-184 = 2076px. Der Inhalt
      ist aber durchgehend in festen Pixeln gesetzt. Also: auf FullHD fuellt
      er die Flaeche (wirkt gross), auf WQHD zieht er sich auseinander und die
      Schrift wirkt verloren (wirkt klein). Es ist immer dieselbe Schrift -
      nur die Flaeche darum aendert sich.

   2. DIE SCHRIFT WAR ZU KLEIN. Von den 26 Angaben zwischen 8px und 9,5px in
      dieser 4000-zeiligen Datei gehoerten 23 dem Publisher; der Rest der
      Seite geht nie unter 10px. Zehn davon lagen bei 8-9px.

   Dieser Block steht am Ende der Datei und ist damit die letzte von acht
   Schichten Publisher-CSS. Das ist kein Zustand, den man sich wuenscht - die
   Datei definiert .youtube-publisher-history-layout sechsmal und
   .youtube-publisher-oben viermal. Eine Entschichtung ist ein eigener
   Arbeitsschritt; sie hier nebenbei zu machen hiesse, in einem Zug Maßstab UND
   Struktur zu aendern, ohne dass man hinterher noch zuordnen koennte, welche
   Aenderung was bewirkt hat. Was hier steht, ist deshalb bewusst auf zwei
   Dinge beschraenkt: Breite und Schriftgroesse.
   ======================================================================= */

/* --- 1. Die Lesespalte -------------------------------------------------
   1500px statt der 1400px des uebrigen Verlaufs: der Publisher ist
   zweispaltig (Liste und Detail nebeneinander), da braucht jede Spalte
   ihren Platz. Links buendig, wie jede andere Werkzeugseite. */
.youtube-publisher-history-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-right: auto;
  margin-left: 0;
}

/* --- 2. Die Ueberschrift ----------------------------------------------
   Der Rest der Seite setzt Verlaufsueberschriften in 26px 'Space Grotesk' 600
   (.tool-history-head h3) und den Kicker darueber in 11px. Der Publisher hatte
   19px und 9,5px - 27 beziehungsweise 14 Prozent kleiner, dazu in anderer
   Schrift, anderem Sperrmass und anderem Rot. Jetzt derselbe Anschlag, nur
   fluid, damit er auf breiten Fenstern mitwaechst. */
.youtube-publisher-history-layout .section-kicker {
  font: 800 clamp(10px, .62vw, 11px)/1 'DM Sans', sans-serif;
  letter-spacing: .14em;
}
.youtube-publisher-kopf h3,
.youtube-publisher-history-layout .tool-history-head h3,
.youtube-publish-check-head h3 {
  font-size: clamp(20px, 1.35vw, 26px);
  line-height: 1.2;
}

/* Zwischenueberschriften eine Stufe darunter - vorher 15px, also kleiner als
   der Fliesstext mancher Karten. */
.youtube-publisher-planning h3,
.youtube-publisher-card > header h3,
.youtube-publisher-rhythmus > header h3 {
  font-size: clamp(15px, 1.05vw, 18px);
}

/* --- 3. Die Untergrenze: 10px -----------------------------------------
   Jede Angabe unter 10px wird angehoben. Aufgelistet statt ueber einen
   Sammelselektor geloest, damit man jede Stelle einzeln nachschlagen kann -
   ein `* { font-size: … }` wuerde hier auch Symbole und Zahlen treffen. */
.youtube-publisher-next small,
.youtube-publish-preview-copy > small,
.youtube-rhythmus-steuerung > button,
.youtube-rhythmus-tage > li small,
.youtube-rhythmus-tage > li b,
.youtube-publisher-assistent-copy small,
.youtube-history-edit-dialog-panel > header small,
.youtube-publisher-planning > button small,
.youtube-rhythmus-steuerung > small,
.youtube-publisher-rhythmus > p small,
.youtube-history-columns,
.youtube-publisher-stats small,
.youtube-publisher-next-actions > a,
.youtube-publisher-next-actions > button,
.youtube-plan-punkte > b,
.youtube-publisher-assistent-aktionen button,
.youtube-history-ai-coach > header small,
.youtube-history-ai-slot > span,
.youtube-history-edit-date > small,
.youtube-plan-tag > small,
.youtube-publisher-rhythmus > p strong,
.youtube-history-edit-thumbnail small,
.youtube-history-ai-coach > p {
  font-size: clamp(10px, .68vw, 12px);
}

/* Die tragenden Groessen wachsen ebenfalls mit - sonst bleibt die Seite auf
   einem breiten Monitor eine Briefmarke in der Mitte. */
.youtube-history-row > .youtube-history-title,
.youtube-publisher-card > header strong,
.youtube-publish-preview-copy > strong {
  font-size: clamp(12.5px, .82vw, 15px);
}
.youtube-publisher-stats strong,
.yt-fakt > b {
  font-size: clamp(15px, 1.05vw, 19px);
}

/* --- 4. Feste Breiten, die nicht mitwachsen ---------------------------
   Die Vorschau war 220px breit und wurde unter 1250px von Hand auf 170px
   gesetzt - ein handgeschriebener Sprung, weil "ihre Breite fest ist".
   Mit clamp() entfaellt der Sprung. */
.youtube-publish-preview-details { grid-template-columns: clamp(170px, 12vw, 240px) minmax(0, 1fr); }
.youtube-publish-preview-media { width: clamp(170px, 12vw, 240px); }

/* --- 5. Reste einer Klebrigkeit, die es nicht gibt --------------------
   .youtube-publisher-sidebar traegt in der ersten Fassung position:sticky mit
   top:22px, die dritte setzt top:18px, und die fuenfte schaltet das Kleben mit
   position:static wieder ab. Weil die Seitenleiste im gerenderten DOM Kind von
   .youtube-publisher-oben ist, gewinnt die fuenfte - sticky wirkt nirgends.
   Uebrig bleiben zwei irrefuehrende top-Werte. Hier ausdruecklich
   zurueckgesetzt, damit beim naechsten Umbau niemand auf ein Klebeverhalten
   schliesst, das es nicht gibt. */
.youtube-publisher-oben > .youtube-publisher-sidebar { top: auto; }

/* =======================================================================
   Thumbnail als Chatbox - 27.08.2026

   Das Formular "Neues Thumbnail erstellen" war eine Feldliste mit
   Assistentenschritt, Gruppenlegende und einem zugeklappten Bereich
   "Optionale Ergaenzungen". Jetzt ist es ein Komponist: oben das
   Video-Thema als Chattext, darunter eine Leiste aus Chips fuer die
   einzelnen Parameter, links das Anhaengen von Referenzbildern und
   rechts der Startknopf mit der Kreditzahl.

   ALLE Regeln haengen an .tk-composer AM FORMULAR, nicht an
   #workspace-body[data-tool="..."]. Grund: das Formular erscheint in zwei
   Umgebungen - direkt in #workspace-body und im Overlay
   .thumbnail-production-body, das an document.body haengt. Eine Regel auf
   #workspace-body greift dort nicht.

   Der Aufbau folgt dem Komponisten des Videogenerators
   (.is-chat-composer in ai-contentfactory-control-center.css); die Werte
   sind bewusst dieselben, damit beide Werkzeuge gleich aussehen.
   ======================================================================= */

.tk-composer .workspace-group,
.tk-composer .workspace-group-grid {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

.tk-box {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #343947;
  border-radius: 20px;
  background: #181b24;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
  overflow: visible;
}

/* --- Das Eingabefeld ---------------------------------------------------
   Die Beschriftung traegt .nur-vorlesen und wird nicht gezeichnet; der
   Hilfetext darunter entfaellt, weil der Platzhalter dasselbe sagt. */
.tk-box .tk-thema-feld { display: block; margin: 0; }
.tk-box .tk-thema-feld > small { display: none; }
.tk-box .tk-thema-feld textarea,
.tk-box .tk-thema-feld input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 92px;
  max-height: 240px;
  padding: 12px 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #f2f4f8;
  font: 400 15px/1.5 'DM Sans', sans-serif;
  resize: vertical;
  box-shadow: none;
}
.tk-box .tk-thema-feld textarea::placeholder { color: #6d7484; }
.tk-box .tk-thema-feld textarea:focus-visible { outline: none; }

/* --- Angehaengte Referenzbilder -----------------------------------------
   Seit dem 29.08.2026 stehen sie UNTER der Eingabe und doppelt so gross:
   der Kunde sieht vor dem Start klar, welche Bilder mitgehen. */
.tk-anhaenge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin-top: 8px;
}
.tk-anhaenge[hidden] { display: none; }
.tk-anhang {
  position: relative;
  width: 148px;
  margin: 0;
  border: 1px solid #3a4050;
  border-radius: 14px;
  background: #12141c;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: border-color .15s ease, transform .15s ease;
}
.tk-anhang:hover { border-color: rgba(255, 48, 79, .65); transform: translateY(-1px); }
.tk-anhang img { display: block; width: 100%; height: 96px; object-fit: cover; }
.tk-anhang figcaption {
  display: block;
  overflow: hidden;
  padding: 5px 8px;
  color: #9aa2b3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-anhang > button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 11, 16, .82);
  color: #e6e9f0;
  font-size: 13px;
  cursor: pointer;
}
.tk-anhang > button:hover { background: #ff304f; color: #fff; }

/* --- Die Leiste -------------------------------------------------------- */
.tk-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 3px;
}
.tk-leiste-links {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.tk-chips { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.tk-chip-halter { position: relative; }

/* Ein Chip ist eine Pille mit Sinnbild und aktuellem Wert - dieselbe Form
   wie der Konfigurationsknopf des Videogenerators. */
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #303543;
  border-radius: 999px;
  background: #222631;
  color: #d6dae4;
  font: 700 10.5px/1 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.tk-chip > span {
  overflow: hidden;
  max-width: 140px;
  text-overflow: ellipsis;
}
.tk-chip > i { color: #aeb6c8; font-size: 14px; }
.tk-chip:hover,
.tk-chip[aria-expanded="true"] { border-color: #555d70; background: #292e3a; color: #fff; }
.tk-chip.is-gesetzt > i { color: #ff5271; }
.tk-chip-zahnrad { padding: 5px 10px; }
.tk-chip-zahnrad > i { font-size: 16px; }

/* Anhaengen sieht aus wie ein Chip, ist aber ein Dateifeld. */
.tk-anhang-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #303543;
  border-radius: 999px;
  background: #222631;
  color: #d6dae4;
  font: 700 10.5px/1 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.tk-anhang-knopf:hover { border-color: #555d70; background: #292e3a; color: #fff; }
.tk-anhang-knopf > i { color: #aeb6c8; font-size: 15px; }
.tk-anhang-knopf input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- Die Klappen ------------------------------------------------------- */
.tk-chip-menue,
.tk-mehr-menue {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 3px;
  min-width: 218px;
  max-height: min(420px, 60vh);
  padding: 9px;
  border: 1px solid #373d4d;
  border-radius: 16px;
  background: #1d202a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .58);
  overflow: auto;
}
.tk-chip-menue[hidden],
.tk-mehr-menue[hidden] { display: none; }
.tk-chip-menue-kopf {
  display: block;
  padding: 2px 6px 7px;
  border-bottom: 1px solid #303542;
  color: #ff526c;
  font: 800 9px/1 'DM Sans', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tk-chip-menue > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #dfe3eb;
  font: 600 11.5px/1.3 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
.tk-chip-menue > button:hover { background: #262a36; color: #fff; }
.tk-chip-menue > button > i { color: transparent; font-size: 14px; }
.tk-chip-menue > button.is-gewaehlt { background: #2a1a20; color: #fff; }
.tk-chip-menue > button.is-gewaehlt > i { color: #ff4965; }

/* Hinter dem Zahnrad liegen ganze Feldrahmen, keine Menuepunkte. */
.tk-mehr-menue { width: min(420px, calc(100vw - 48px)); gap: 12px; padding: 11px 12px 13px; }
.tk-mehr-menue .workspace-field { margin: 0; }
.tk-mehr-menue .workspace-field label {
  display: block;
  margin-bottom: 5px;
  color: #c8cdd8;
  font: 700 10.5px/1.3 'DM Sans', sans-serif;
}
.tk-mehr-menue .workspace-field small { color: #7f8798; font-size: 10px; line-height: 1.5; }
.tk-mehr-menue .workspace-field input,
.tk-mehr-menue .workspace-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #343a49;
  border-radius: 10px;
  background: #14171f;
  color: #f0f2f6;
  font: 400 12px/1.5 'DM Sans', sans-serif;
}
.tk-mehr-menue .workspace-field textarea { min-height: 68px; resize: vertical; }

/* --- Der Startknopf ---------------------------------------------------- */
.tk-leiste-rechts { display: flex; align-items: center; flex: 0 0 auto; }
.tk-composer .workspace-run {
  min-height: 38px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Auf schmalen Fenstern rutscht der Startknopf unter die Chips, und die
   Klappen werden zu normalen Bloecken statt zu schwebenden Kaesten. */
@media (max-width: 720px) {
  .tk-leiste { flex-wrap: wrap; }
  .tk-leiste-rechts { width: 100%; }
  .tk-composer .workspace-run { width: 100%; justify-content: center; }
  .tk-chip-menue,
  .tk-mehr-menue { position: static; width: auto; min-width: 0; box-shadow: none; }
}

/* Die Chatbox des Thumbnail-Makers traegt exakt das Layout der
   Coach-Chatbox. Die Werte sind gemessen, nicht geschaetzt: sie stammen aus
   der vollen Kaskade an .cc-shell:has(.coach-form) und werden von
   tests/contentfactory-thumbnail-chatbox-coachform.regression.js Paar fuer
   Paar gegen den Coach geprueft.

   Warum die Werte hier stehen und nicht einfach die Coach-Regeln greifen:
   jene haengen an .coach-form. Und warum sie so spezifisch geschrieben sind
   (.tk-composer .tk-box .tk-thema-feld textarea): ai-contentfactory-polish.css
   wird SPAETER geladen und setzt .workspace-field textarea. Bei gleicher
   Spezifitaet gewinnt polish - dann traegt das Feld einen fremden Rahmen. */

/* Der Kasten ist nur noch Positionsanker. Rahmen und Flaeche traegt das
   Eingabefeld, genau wie beim Coach. */
.tk-composer .tk-box {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tk-composer .tk-box:focus-within {
  border: 0;
  box-shadow: none;
}

.tk-composer .tk-box .tk-eingabe {
  position: relative;
  min-width: 0;
}

.tk-composer .tk-prompt-assistent {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #353c4c;
  border-radius: 10px;
  background: rgba(23, 27, 37, .94);
  color: #ff5570;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.tk-composer .tk-prompt-assistent:hover,
.tk-composer .tk-prompt-assistent:focus-visible {
  border-color: rgba(255, 73, 101, .72);
  background: #242936;
  color: #ff7187;
  outline: 0;
}
.tk-composer .tk-prompt-assistent::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 5;
  top: calc(100% + 9px);
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid #353c4c;
  border-radius: 8px;
  background: #171b24;
  color: #e8ebf2;
  font: 600 10px/1.4 'DM Sans', sans-serif;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
}
.tk-composer .tk-prompt-assistent:hover::after,
.tk-composer .tk-prompt-assistent:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.tk-composer .tk-prompt-assistent:disabled { cursor: wait; opacity: .82; }
.tk-composer .tk-prompt-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/*
 * Der Hinweis erscheint als schlichter Kleintext neben dem Feld - kein
 * Kasten mit Rahmen und Fuellung. Vorbild ist der Zauberstab im
 * Video-Generator (.video-prompt-optimize-feedback), dessen ruhige Zeile dem
 * Betreiber besser gefiel (19.09.2026). Die Zustaende unterscheiden sich nur
 * noch in der Schriftfarbe.
 */
.tk-composer .tk-prompt-status.is-visible {
  left: 24px;
  right: 72px;
  bottom: 62px;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: #aeb6c8;
  font: 500 9px/1.35 'DM Sans', sans-serif;
  text-align: right;
  white-space: normal;
  pointer-events: none;
}
.tk-composer .tk-prompt-status.is-success { color: #8de1bd; }
.tk-composer .tk-prompt-status.is-safety { color: #fde68a; }
.tk-composer .tk-prompt-status.is-error { color: #fda4af; }

.tk-composer .tk-box .tk-thema-feld textarea,
.tk-composer .tk-box .tk-thema-feld input[type="text"] {
  min-height: 320px;
  /* Ohne diese Freigabe wuchs die Box NIE mit dem Text (02.09.2026): die
     Basisregel oben setzt max-height 240px, zusammen mit min-height 320px
     stand die Hoehe fest auf 320 - die Anpassung des Skripts
     (passeHoeheAn) lief ins Leere. Die Obergrenze setzt das Skript. */
  max-height: none;
  /* Unten liegt die Parameterzeile innerhalb des Feldes. */
  padding: 24px 66px 82px 24px;
  border: 1px solid #3c4558;
  border-radius: 18px;
  background: linear-gradient(145deg, #0e1118, #0b0e14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 12px 30px rgba(0, 0, 0, .13);
  color: var(--cf-text);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
  /* Kein Übergang am großen Feld: Beim Wechsel zwischen Texteingabe,
     Parameterleiste und Konfigurationsfenster wirkte die Animation wie ein
     Flackern der gesamten Chatbox. */
  transition: none;
}

.tk-composer .tk-eingabe:focus-within .tk-thema-feld textarea,
.tk-composer .tk-eingabe:focus-within .tk-thema-feld input[type="text"] {
  border-color: rgba(255, 62, 92, .78);
  box-shadow: 0 0 0 3px rgba(255, 48, 79, .1), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.tk-composer .tk-box .tk-thema-feld textarea:focus,
.tk-composer .tk-box .tk-thema-feld input[type="text"]:focus { outline: 0; }

.tk-composer .tk-box .tk-thema-feld textarea::placeholder { color: #7a8294; }

/* Alle Parameter sitzen im Chatfeld, aber in einer einzigen kompakten Zeile.
   Das Textfeld reserviert dafuer unten Platz. */
.tk-composer .tk-eingabe-aktionen {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.tk-composer .tk-eingabe-aktionen > * { pointer-events: auto; }

/* Eine gemeinsame Parameter-Pille wie beim Videogenerator. Das sichtbare
   Element ist nur die Zusammenfassung; die echten Formularfelder liegen im
   strukturierten Panel und behalten ihre data-config-key-Vertraege. */
.tk-composer .tk-konfig-halter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tk-composer .tk-konfig-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  max-width: 510px;
  padding: 4px 10px;
  border: 1px solid #343a49;
  border-radius: 999px;
  background: linear-gradient(145deg, #242936, #1c202b);
  color: #d9deea;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.tk-composer .tk-konfig-trigger:hover,
.tk-composer .tk-konfig-trigger[aria-expanded="true"] {
  border-color: rgba(255, 71, 100, .62);
  background: linear-gradient(145deg, #2a2f3d, #202430);
}

/* Parameter-Chips wie beim Videogenerator (02.09.2026): jeder Erzeugungswert
   ist ein eigener klickbarer Knopf. Format/Aufloesung/Bildaufbau schalten
   durch, das Modell oeffnet eine Aufklappliste. Das Zahnrad daneben oeffnet
   weiterhin das vollstaendige Panel. */
.tk-composer .tk-param-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* In der gepinnten Desktop-Leiste bleibt es bei EINER Chip-Zeile - ein
   Umbruch wuerde die Leiste ueber das Textfeld wachsen lassen (dasselbe
   Problem, das auf Mobil durch den Fluss-Umbau geloest ist). Was nicht
   passt, bleibt ueber das Zahnrad-Panel erreichbar. */
@media (min-width: 561px) {
  .tk-composer .tk-eingabe-aktionen .tk-param-chips { flex-wrap: nowrap; overflow: hidden; }
}
.tk-composer .tk-param-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid #303543;
  border-radius: 999px;
  background: #222631;
  color: #dfe3eb;
  font: 700 10px/1 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tk-composer .tk-param-chip:hover { border-color: #555d70; background: #292e3a; color: #fff; }
.tk-composer .tk-param-chip i { color: #ff526b; font-size: 14px; }
.tk-composer .tk-param-chip span { overflow: hidden; max-width: 150px; text-overflow: ellipsis; }
.tk-composer .tk-param-popover {
  position: absolute;
  z-index: 24;
  bottom: calc(100% + 10px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 210px;
  max-width: 320px;
  max-height: 320px;
  padding: 8px;
  border: 1px solid #373d4d;
  border-radius: 14px;
  background: #1d202a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  overflow: auto;
}
.tk-composer .tk-param-popover button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #cfd4e0;
  font: 650 11px/1.3 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
.tk-composer .tk-param-popover button:hover { background: #262b37; color: #fff; }
.tk-composer .tk-param-popover button.is-active { background: rgba(255, 48, 79, .13); color: #ff8296; }
.tk-composer .tk-param-popover button i { font-size: 15px; }
.tk-composer .tk-konfig-trigger > .mdi-chevron-up,
.tk-composer .tk-konfig-trigger > .mdi-chevron-down {
  color: #7d879a;
  font-size: 15px;
}

.tk-composer .tk-konfig-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Genug Raum fuer beide Ansichten: Im Feinschliff muss insbesondere das
     mehrzeilige Feld "Weitere Bildwuensche" ohne Scrollen erreichbar sein. */
  height: 320px;
  max-height: none;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px 12px 42px;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  border: 1px solid #394151;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 52, 86, .09), transparent 34%),
    linear-gradient(145deg, #1d212c, #181c25 70%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.tk-composer .tk-konfig-panel.is-fine-tuning {
  /* Der Feinschliff ersetzt die Grundeinstellungen innerhalb derselben
     Flaeche. Die feste Panelhoehe verhindert einen Layoutsprung, darf den
     zweiten Freitextbereich aber nicht abschneiden. */
  min-height: 0;
  overflow: hidden;
}
.tk-composer .tk-konfig-panel[hidden] { display: none; }

.tk-composer .tk-konfig-panel > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(139, 149, 170, .18);
}
.tk-composer .tk-konfig-panel > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 74, 103, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 48, 79, .18), rgba(255, 48, 79, .08));
  color: #ff5270;
  font-size: 15px;
}
.tk-composer .tk-konfig-panel > header div { display: grid; gap: 3px; }
.tk-composer .tk-konfig-panel > header small {
  color: #ff5b75;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}
.tk-composer .tk-konfig-panel > header strong { color: #f3f5f9; font-size: 12px; }
.tk-composer .tk-konfig-schliessen {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid #3b4353;
  border-radius: 9px;
  background: #242935;
  color: #aab3c3;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.tk-composer .tk-konfig-schliessen:hover {
  border-color: rgba(255, 76, 105, .62);
  background: rgba(255, 48, 79, .11);
  color: #ff647c;
}

.tk-composer .tk-konfig-grid,
.tk-composer .tk-konfig-erweitert {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
.tk-composer .tk-konfig-erweitert {
  position: absolute;
  inset: 0 0 42px;
  z-index: 3;
  align-content: start;
  padding: 14px;
  overflow-y: hidden;
  overscroll-behavior: contain;
  border-bottom: 1px solid rgba(139, 149, 170, .16);
  background:
    linear-gradient(145deg, rgba(255, 51, 85, .065), transparent 38%),
    #151922;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, .18);
}
.tk-composer .tk-konfig-erweitert[hidden] { display: none; }
.tk-composer .tk-konfig-erweitert-kopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 149, 170, .16);
}
.tk-composer .tk-konfig-erweitert-kopf > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 48, 79, .12);
  color: #ff5270;
  font-size: 15px;
}
.tk-composer .tk-konfig-erweitert-kopf > div { display: grid; gap: 2px; }
.tk-composer .tk-konfig-erweitert-kopf small {
  color: #ff5b75;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}
.tk-composer .tk-konfig-erweitert-kopf strong { color: #f3f5f9; font-size: 12px; }
.tk-composer .tk-konfig-panel .workspace-field {
  position: relative;
  min-width: 0;
  margin: 0;
}
.tk-composer .tk-konfig-panel .workspace-field label {
  display: block;
  margin-bottom: 5px;
  color: #d1d6e0;
  font-size: 10px;
  font-weight: 750;
}
.tk-composer .tk-konfig-panel .workspace-field small { display: none; }
.tk-composer .tk-konfig-panel .workspace-field select,
.tk-composer .tk-konfig-panel .workspace-field input,
.tk-composer .tk-konfig-panel .workspace-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #3b4354;
  border-radius: 11px;
  background: linear-gradient(145deg, #121722, #0f131b);
  color: #eef1f6;
  font-size: 11px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.tk-composer .tk-konfig-panel .workspace-field select {
  /* Native Windows-Dropdowns übernehmen nicht in jedem Browser automatisch
     das dunkle Farbschema der Seite. Dann blieb die Schrift hell, während
     die systemseitige Optionsliste weiß gezeichnet wurde. */
  color-scheme: dark;
}
.tk-composer .tk-konfig-panel .workspace-field select option,
.tk-composer .tk-konfig-panel .workspace-field select optgroup {
  background: #121722;
  color: #eef1f6;
}
.tk-composer .tk-konfig-panel .workspace-field select option:checked {
  background: #263247;
  color: #ffffff;
}
.tk-composer .tk-konfig-panel .workspace-field textarea { min-height: 72px; resize: vertical; }

.tk-composer .tk-konfig-panel .workspace-field select:hover,
.tk-composer .tk-konfig-panel .workspace-field input:hover,
.tk-composer .tk-konfig-panel .workspace-field textarea:hover {
  border-color: #465064;
}

.tk-composer .tk-konfig-panel .workspace-field select:focus,
.tk-composer .tk-konfig-panel .workspace-field input:focus,
.tk-composer .tk-konfig-panel .workspace-field textarea:focus {
  border-color: #ff3e60;
  outline: 2px solid rgba(255, 48, 79, .1);
  outline-offset: 0;
}

/* Wie in der Video-Konfiguration: wenige feste Optionen werden nicht hinter
   einem Dropdown versteckt, sondern als sofort erfassbare Segmente gezeigt. */
.tk-composer .tk-konfig-panel .tk-segment-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.tk-composer .tk-segment-auswahl {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: 38px;
  padding: 4px;
  border: 1px solid #3b4354;
  border-radius: 11px;
  background: #11151e;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .22);
}
.tk-composer .tk-segment-auswahl > button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #858fa2;
  font: 700 9px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.tk-composer .tk-segment-auswahl > button:hover {
  color: #dfe3eb;
  background: rgba(255, 255, 255, .035);
}
.tk-composer .tk-segment-auswahl > button.is-active {
  background: linear-gradient(145deg, #353b4b, #2a303f);
  color: #f6f7fa;
  box-shadow: 0 4px 11px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.tk-composer .tk-segment-auswahl > button.is-active i { color: #ff5570; }
.tk-composer .tk-segment-auswahl > button i { flex: 0 0 auto; font-size: 13px; }
.tk-composer .tk-segment-auswahl > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-composer .tk-konfig-erweitert-knopf {
  position: absolute;
  right: 14px;
  bottom: 8px;
  left: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  margin: 0;
  padding: 9px 5px 2px;
  border: 0;
  border-top: 1px solid rgba(139, 149, 170, .16);
  background: transparent;
  color: #aeb6c6;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.tk-composer .tk-konfig-erweitert-knopf:hover { color: #f2f4f8; }
.tk-composer .tk-konfig-panel.is-fine-tuning .tk-konfig-erweitert-knopf { color: #f2f4f8; }
.tk-composer .tk-konfig-erweitert-knopf .mdi-chevron-down,
.tk-composer .tk-konfig-erweitert-knopf .mdi-chevron-up { margin-left: auto; }

/* Die Parameterzeile darf auf kleinen Fenstern horizontal scrollen, waehrend
   Preis und Absenden immer erreichbar bleiben. */
.tk-composer .tk-leiste {
  position: static;
  display: flex;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
}
.tk-composer .tk-leiste::-webkit-scrollbar { display: none; }

.tk-composer .tk-leiste-links {
  justify-content: flex-start;
  width: auto;
  flex-wrap: nowrap;
  gap: 6px;
}
.tk-composer .tk-chips { flex-wrap: nowrap; gap: 6px; }

.tk-composer .tk-chip,
.tk-composer .tk-anhang-knopf {
  min-height: 32px;
  padding: 4px 9px;
  border-color: #303644;
  border-radius: 999px;
  background: rgba(21, 24, 33, .96);
  color: #f1f3f8;
  font-size: 11px;
  font-weight: normal;
  gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.tk-composer .tk-chip { max-width: 112px; }
.tk-composer .tk-chip > span { max-width: 78px; }
.tk-composer .tk-anhang-knopf,
.tk-composer .tk-chip-zahnrad {
  justify-content: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}
.tk-composer .tk-anhang-knopf > span { display: none; }
.tk-composer [data-tk-chip="scene_variant"] {
  justify-content: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}
.tk-composer [data-tk-chip="scene_variant"] > span { display: none; }

.tk-composer .tk-chip:hover,
.tk-composer .tk-chip[aria-expanded="true"],
.tk-composer .tk-anhang-knopf:hover {
  border-color: rgba(255, 62, 92, .6);
  background: #20242f;
  color: #fff;
}

.tk-composer .tk-chip > i,
.tk-composer .tk-anhang-knopf > i { color: #ff5871; font-size: 14px; }

/* Referenzbilder-Kachel unter der Box (31.08.2026): gleiche Formsprache wie
   die Frame-Kacheln des Videogenerators. Der Anhang-Knopf zieht aus der
   Aktionsleiste in dieses Dock um und wird von der 32px-Bueroklammer zur
   beschrifteten Kachel. */
.tk-composer .tk-anhang-dock { display: flex; align-items: stretch; gap: 8px; padding: 8px 2px 2px; }
.tk-composer .tk-anhang-dock .tk-anhang-knopf {
  position: relative;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 7px;
  width: auto;
  min-width: 148px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid rgba(137, 147, 169, .24);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(42, 47, 60, .96), rgba(29, 33, 43, .98));
  color: #f5f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 5px 14px rgba(0, 0, 0, .15);
  cursor: pointer;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf:hover {
  border-color: rgba(255, 64, 94, .72);
  background: linear-gradient(145deg, rgba(255, 48, 79, .11), #252a36);
  transform: translateY(-1px);
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf.has-file {
  border-color: #ff405e;
  background: linear-gradient(145deg, rgba(255, 48, 79, .17), #242832);
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > i {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(255, 78, 105, .28);
  border-radius: 8px;
  background: rgba(255, 48, 79, .1);
  color: #ff6078;
  font-size: 13px;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > span {
  display: block;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > small {
  grid-column: 2;
  color: #aeb6c8;
  font-size: 9px;
  line-height: 1.2;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > small:empty { display: none; }

/* Drag & Drop: Box und Anhaenge zeigen an, wo losgelassen werden kann. */
.tk-composer .tk-box.tk-drop-ziel {
  border-color: #ffb948;
  box-shadow: 0 0 0 2px rgba(255, 185, 72, .32);
}
.tk-composer .tk-anhang[draggable="true"] { cursor: grab; }
.tk-composer .tk-anhang.tk-anhang-drop-ziel {
  border-color: #ffb948;
  box-shadow: 0 0 0 2px rgba(255, 185, 72, .32);
  transform: translateY(-1px);
}

/* Der Startknopf ist die eindeutige Hauptaktion. Beschriftung und Preis stehen
   in einem roten Element; so konkurriert kein zweiter Credit-Chip mit dem CTA. */
.tk-composer .tk-leiste-rechts { margin-left: 0; flex: 0 0 auto; }
.tk-composer .tk-leiste-rechts .workspace-run.tk-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 4px 5px 4px 13px;
  border: 1px solid #ff4965;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3153, #f20d3d);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 29, 72, .24);
  font: 750 11px/1 'DM Sans', sans-serif;
}
.tk-composer .tk-leiste-rechts .workspace-run.tk-start > i { font-size: 14px; }
.tk-composer .tk-leiste-rechts .workspace-run.tk-start:hover:not(:disabled) {
  border-color: #ff7087;
  background: linear-gradient(135deg, #ff4664, #ff1748);
  box-shadow: 0 10px 26px rgba(255, 29, 72, .32);
}
.tk-composer .tk-start-credit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(114, 0, 27, .32);
  color: #fff;
}
.tk-composer .tk-start-credit > i:first-child { color: #ffd166; font-size: 11px; }
.tk-composer .tk-start-credit > i:last-child { color: rgba(255, 255, 255, .75); font-size: 12px; }
.tk-composer .tk-start-credit > b { font-size: 11px; font-weight: 800; }
.tk-composer .tk-leiste-rechts .workspace-run.tk-start:disabled {
  background: #232936;
  border-color: #2c3341;
  color: #6a7386;
  box-shadow: none;
  cursor: default;
}
.tk-composer .tk-leiste-rechts .workspace-run.tk-start:disabled .tk-start-credit {
  background: rgba(10, 12, 18, .28);
  color: #7b8497;
}

/* Social Media Poster: Plattformen werden direkt im Composer gewählt. Der
   gespeicherte Wert bleibt intern eine kommaseparierte Liste für den Worker. */
.sp-composer .sp-hidden-field { display: none !important; }
.sp-composer,
.sp-composer .sp-box { width: 100%; max-width: none; }
.sp-composer .sp-platforms { display:flex; flex:1 1 auto; align-items:center; gap:6px; min-width:0; overflow:auto; scrollbar-width:none; }
.sp-composer .sp-platforms::-webkit-scrollbar { display:none; }
/* Format und Bildmodell stehen als Chips nebeneinander, das
   Referenzbildfeld als kompakter Knopf links - wie beim Thumbnail-Maker
   (13.09.2026). Vier einzelne Formatknoepfe und ein grosses Uploadfeld
   darunter waren der auffaelligste Unterschied zwischen beiden Werkzeugen. */
.sp-composer .sp-formats { display:flex; align-items:center; gap:5px; }
.sp-composer .sp-anhang { display:flex; align-items:center; min-width:0; }
.sp-composer .sp-anhang-feld { display:flex; align-items:center; margin:0; padding:0; border:0; background:none; }
.sp-composer .sp-anhang-feld > label:not(.video-file-picker) { display:none; }
.sp-composer .sp-anhang-feld > .workspace-help { display:none; }
.sp-composer .sp-anhang-feld .video-file-picker { display:inline-flex; align-items:center; gap:7px; min-height:34px; margin:0; padding:0 12px; border:1px solid #303543; border-radius:999px; background:#222633; color:#aab2c2; font:650 11px/1 'DM Sans',sans-serif; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,color .16s ease; }
.sp-composer .sp-anhang-feld .video-file-picker:hover { border-color:#596174; background:#292e3a; color:#eef1f6; }
.sp-composer .sp-anhang-feld .video-file-picker i { font-size:15px; }
.sp-composer .sp-anhang-feld .video-file-picker small { display:none; }
.sp-composer .sp-anhang-feld .video-file-picker b { font-weight:650; }
.sp-composer .sp-anhang-feld .reference-image-preview-list { position:absolute; left:14px; bottom:56px; display:flex; gap:6px; }

.social-poster-production-modal .thumbnail-production-dialog > header p {
  max-width: 520px;
  margin: 8px auto 0;
  color: #8a93a7;
  font: 400 13px/1.55 'DM Sans', system-ui, sans-serif;
  text-align: center;
}

.sp-composer .sp-platform-chip { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; min-height:34px; padding:5px 10px; border:1px solid #303543; border-radius:999px; background:#222631; color:#aeb6c8; font:700 10px/1 'DM Sans',sans-serif; cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease; }
.sp-composer .sp-platform-chip:hover { border-color:#596174; background:#292e3a; color:#eef1f6; }
.sp-composer .sp-platform-chip.is-active { border-color:rgba(255,70,101,.72); background:rgba(255,48,79,.14); color:#fff; }
.sp-composer .sp-platform-chip i { color:#8f98aa; font-size:14px; }
.sp-composer .sp-platform-chip.is-active i { color:#ff5a75; }
.sp-composer .reference-image-source { margin-top:14px; }

/* Der Social-Post-Komponist folgt auf grossen Bildschirmen derselben
   lesbaren Chatbreite wie der Thumbnail-Maker. Die breite Arbeitsflaeche
   der Seite bleibt fuer Verlauf und Ergebnisse erhalten. */
@media (min-width:721px) {
  #workspace-body[data-tool="social-media-post-banner-generator"] .sp-composer {
    width:100%;
    max-width:680px;
    margin-inline:auto;
  }
  /* Der rote Rahmen ist fuer den Startknopf reserviert. Die Chatbox bleibt
     beim Fokus so ruhig wie die des Thumbnail-Makers. */
  #workspace-body[data-tool="social-media-post-banner-generator"] .sp-composer .tk-eingabe:focus-within .tk-thema-feld textarea {
    border-color:#3c4558;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.13);
  }
}
@media(max-width:720px){.sp-composer .tk-eingabe-aktionen{align-items:flex-end;flex-wrap:wrap}.sp-composer .sp-platforms{order:3;flex-basis:100%}.sp-composer .tk-leiste-rechts{margin-left:auto}}

/* Social-Post-Verlauf ist ein kompaktes Kartenraster wie beim Thumbnail-Maker. */
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history { margin-top:28px; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-head { display:flex; align-items:center; justify-content:flex-start; gap:10px; margin-bottom:20px; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-head>div { display:contents; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-head .section-kicker,
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-head p { display:none; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-head h3 { margin:0; color:#f5f6f8; font:650 22px/1.2 'Space Grotesk',sans-serif; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history .thumbnail-history-count { display:grid; place-items:center; min-width:27px; height:24px; padding:0 7px; border:1px solid #2a2e38; border-radius:99px; background:#151820; color:#aeb4c0; font:800 10px/1 'Inter',sans-serif; }
/* Verlauf wie beim Thumbnail-Maker (13.09.2026): Zeilen statt starrer
   Spalten. Die Zeilenhoehe ist gemeinsam, die Breite jeder Kachel folgt dem
   echten Seitenverhaeltnis - Hochkant steht schmal, Querformat breit, und
   nichts wird beschnitten oder in ein 4:5-Fenster gezwaengt.
   Den Platz fuer den Posttext rechnet contentfactory-galerie-zeilen.js als
   Zuschlag oben drauf, damit das Bild sein Format behaelt. */
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-grid { display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-grid.is-justiert { width:100%; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card { position:relative; display:flex; flex-direction:column; overflow:hidden; flex:1.78 1 auto; box-sizing:border-box; width:auto; min-width:0; max-width:100%; padding:0; border:1px solid #252a34; border-radius:14px; background:#0d1016; box-shadow:0 14px 32px rgba(0,0,0,.2); cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-grid.is-justiert .social-poster-history-card { flex:0 0 auto; max-width:none; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-thumbnail-portrait { flex:.56 1 auto; }
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card.is-thumbnail-square { flex:1 1 auto; }
/* Das Bild fuellt die Kachel: ihre Breite folgt ja dem echten Verhaeltnis,
   also schneidet cover hier nichts ab - anders als im festen 4:5-Fenster,
   in dem am 12.09.2026 Schlagzeilen abgeschnitten wurden. */
#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-card>img,#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-placeholder { display:block; flex:1 1 auto; width:100%; min-height:0; height:auto; aspect-ratio:auto; object-fit:cover; background:#11151e; transition:transform .28s ease,filter .2s ease; }
.social-poster-history-placeholder { display:grid; place-items:center; color:#6f7788; font-size:28px; }
/* Der Posttext war mit 11px kaum lesbar, mit 13px immer noch zu klein
   (13.09.2026). Er ist das Ergebnis, das der Kunde beurteilen soll - also
   bekommt er Lesegroesse und drei Zeilen. Den Platz dafuer rechnet
   contentfactory-galerie-zeilen.js als Zuschlag auf die Zeilenhoehe. */
.social-poster-history-copy { flex:0 0 auto; display:grid; gap:5px; padding:12px 14px 14px; border-top:1px solid rgba(142,151,173,.16); background:linear-gradient(180deg,rgba(15,18,26,.72),#12151d); }
.social-poster-history-copy small { color:#ff637c; font:800 9px/1 'DM Sans',sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.social-poster-history-copy p { display:-webkit-box; margin:0; overflow:hidden; color:#dde2ec; font:500 18px/1.5 'DM Sans',sans-serif; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.social-poster-history-card:hover,.social-poster-history-card:focus-visible { border-color:rgba(255,48,79,.7); box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 0 2px rgba(255,48,79,.12); outline:0; transform:translateY(-2px); }
.social-poster-history-card:hover>img,.social-poster-history-card:focus-visible>img { filter:brightness(.82); transform:scale(1.025); }
.social-poster-history-card .thumbnail-history-actions { position:absolute; inset:12px; z-index:3; display:flex; align-items:flex-start; justify-content:flex-end; pointer-events:none; opacity:0; transform:translateY(-5px); transition:opacity .18s ease,transform .18s ease; }
.social-poster-history-card .thumbnail-history-action { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(7,9,14,.84); color:#fff; pointer-events:auto; cursor:pointer; }
.social-poster-history-card:hover .thumbnail-history-actions,.social-poster-history-card:focus-visible .thumbnail-history-actions,.social-poster-history-card:focus-within .thumbnail-history-actions { opacity:1; transform:none; }
@media(max-width:1050px){#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){#workspace-body[data-tool="social-media-post-banner-generator"] .social-poster-history-grid{grid-template-columns:1fr;gap:16px;}}
.social-poster-review-modal { position:fixed; inset:0; z-index:1750; display:grid; place-items:center; padding:24px; background:rgba(1,2,7,.88); backdrop-filter:blur(18px) saturate(.68); opacity:0; transition:opacity .16s ease; }
.social-poster-review-modal.is-open { opacity:1; }
/* Die Freigabe nutzt die volle Fensterhoehe (Wunsch vom 13.09.2026).
   Vorher war die Breite auf 360px gedeckelt und Bild wie Text hingen an
   festen vh-Werten - der Beitrag stand als schmale Saeule mitten im leeren
   Fenster. Jetzt gibt die Hoehe den Ton an: das Bild nimmt, was nach Text
   und Kanalzeile uebrig bleibt, die Breite folgt daraus. */
.social-poster-review-dialog { display:flex; flex-direction:column; --sp-beiwerk:430px; width:min(max(360px,calc((100dvh - 36px - var(--sp-beiwerk)) * var(--sp-bildverhaeltnis,0.8))),calc(100vw - 32px),1100px); height:calc(100dvh - 36px); max-height:calc(100dvh - 36px); overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; --alt-schatten:rgba(0,0,0,.72); transform:translateY(12px) scale(.985); transition:transform .18s ease; }
.social-poster-review-modal.is-open .social-poster-review-dialog { transform:none; }
.social-poster-review-dialog>header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; padding:0 2px 14px; border:0; background:transparent; }
.social-poster-review-dialog>header small { display:block; margin-bottom:2px; color:#ff3e63; font:800 9px/1 'DM Sans',sans-serif; letter-spacing:.18em; }
.social-poster-review-dialog>header h2 { margin:0; color:#f7f8fc; font:650 16px/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; }
.social-poster-review-dialog>header button { display:grid; width:30px; height:30px; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.04); color:#c6ccd8; font-size:15px; cursor:pointer; transition:border-color .16s ease,color .16s ease; }
.social-poster-review-dialog>header button:hover { border-color:rgba(255,70,101,.6); color:#fff; }
[data-social-poster-review-content] { display:flex; flex:1 1 auto; min-height:0; }
[data-social-poster-review-content] > * { flex:1 1 auto; min-width:0; }
.social-poster-review { display:flex; flex-direction:column; gap:14px; flex:1 1 auto; min-height:0; overflow:visible; }
/* Die Freigabe zeigt den Beitrag als Beitrag - Konto, Bild, Aktionsleiste,
   Text. Vorher stand dort ein nacktes Bild mit einem kleinen Knopf in der
   Ecke; niemand konnte sehen, wie der Post spaeter wirkt. */
.sp-post-karte { display:flex; flex-direction:column; flex:1 1 auto; width:100%; min-height:0; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#0f1218; box-shadow:0 26px 64px rgba(0,0,0,.5); }
.sp-post-karte > header { display:flex; align-items:center; gap:10px; padding:11px 13px; }
.sp-post-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#ff3d63,#ff8a3d); color:#fff; font:800 14px/1 'DM Sans',sans-serif; }
.sp-post-konto { display:grid; gap:2px; margin-right:auto; min-width:0; }
.sp-post-konto b { color:#f2f4f8; font:650 13px/1.2 'DM Sans',sans-serif; }
.sp-post-konto small { display:flex; align-items:center; gap:4px; color:#7d8697; font:500 10.5px/1 'DM Sans',sans-serif; }
.sp-post-mehr { color:#6d7686; font-size:18px; }
.sp-post-bild { display:block; width:100%; padding:0; border:0; background:#0a0c12; cursor:pointer; }
.sp-post-bild { display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:0; background:#0f1218; border-radius:15px 15px 0 0; overflow:hidden; }
.sp-post-bild > img { display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; background:#0f1218; }
.sp-post-bild-hinweis { position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:rgba(10,12,18,.82); color:#f4f6fa; font:650 11.5px/1 'DM Sans',sans-serif; opacity:0; transition:opacity .16s ease; }
.sp-post-bild { position:relative; }
.sp-post-bild:hover .sp-post-bild-hinweis,.sp-post-bild:focus-visible .sp-post-bild-hinweis { opacity:1; }
.sp-post-bild:focus-visible { outline:2px solid #ff305a; outline-offset:-2px; }
.sp-post-aktionen { display:flex; align-items:center; gap:14px; padding:11px 13px 4px; color:#c3cad6; font-size:20px; }
.sp-post-merken { margin-left:auto; }
/* Der Posttext wird dort bearbeitet, wo er im Beitrag steht. Deshalb traegt
   das Feld keinen Rahmen - nur beim Schreiben hebt es sich ab. */
.sp-post-text { display:block; box-sizing:border-box; flex:0 0 auto; width:100%; min-height:72px; max-height:34%; padding:10px 13px 15px; border:0; background:transparent; color:#d5dbe5; font:400 15px/1.6 'DM Sans',sans-serif; overflow-y:auto; overflow-wrap:anywhere; white-space:pre-wrap; }
.sp-post-text b { color:#8fb4ff; font-weight:500; }
.sp-post-text:empty::before { content:attr(aria-label); color:#616b7c; }
.sp-post-text:focus { outline:0; background:rgba(255,255,255,.03); }
.sp-post-text::placeholder { color:#616b7c; }
.sp-post-text b { color:#8fb4ff; font-weight:500; }
@media(max-width:820px){ .sp-post-karte { width:100%; margin:14px auto; } }
/* Der Beitrag muss bis nach unten durchreichen: steht hier flex:0 1 auto,
   hoert die Kachel auf halber Hoehe auf und der Dialog bleibt leer darunter -
   bei Querformaten besonders auffaellig (13.09.2026). */
.social-poster-review-image { position:relative; display:flex; flex:1 1 auto; min-height:0; padding:0; background:transparent; }
.social-poster-review-image>img { display:block; width:100%; max-height:100%; object-fit:contain; }
.social-poster-image-edit { position:absolute; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid rgba(255,93,120,.55); border-radius:10px; background:rgba(16,18,27,.92); color:#fff; font:700 11px/1 'DM Sans',sans-serif; cursor:pointer; }
.social-poster-copy-editor { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; min-height:0; padding:0; border:0; }
.social-poster-copy-editor header h3 { margin:3px 0 5px; color:#f5f7fb; font:650 18px/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; }.social-poster-copy-editor header p { margin:0; color:#939cad; font:500 12px/1.5 'DM Sans',sans-serif; }.social-poster-copy-editor textarea { flex:1 1 auto; min-height:150px; box-sizing:border-box; width:100%; padding:14px; border:1px solid #394153; border-radius:13px; background:#0c0f16; color:#edf0f6; font:400 13px/1.55 'DM Sans',sans-serif; resize:vertical; }.social-poster-copy-editor textarea:focus { border-color:#ff526d; outline:2px solid rgba(255,48,79,.12); }/* Unter dem Beitrag: links die Netzwerke als Symbole, rechts die Knoepfe. */
/* Entwurf speichern und KI-Ueberarbeitung sitzen als Symbole in der
   Aktionszeile des Beitrags - dort, wo bei Instagram das Merken-Symbol
   steht. Beschriftet sind sie ueber title und aria-label. */
.sp-post-werkzeuge { display:flex; align-items:center; gap:4px; margin-left:auto; }
.sp-post-werkzeug { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:9px; background:transparent; color:#ff3e63; font-size:18px; cursor:pointer; transition:background-color .16s ease,color .16s ease,transform .16s ease; }
.sp-post-werkzeug:hover { background:rgba(255,48,79,.14); color:#ff5c79; transform:translateY(-1px); }
.sp-post-werkzeug:focus-visible { outline:2px solid #ff305a; outline-offset:1px; }
.sp-post-werkzeug[disabled] { opacity:.45; cursor:default; }

.sp-review-leiste { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px; }
.sp-kanal-symbol { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.1); border-radius:50%; background:rgba(255,255,255,.04); color:#98a1b2; font-size:17px; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,color .16s ease; }
.sp-kanal-symbol:hover { border-color:rgba(255,255,255,.24); color:#e6eaf2; }
.sp-kanal-symbol.is-active { border-color:rgba(255,70,101,.75); background:rgba(255,48,79,.16); color:#fff; }
.sp-kanal-symbol:focus-visible { outline:2px solid #ff305a; outline-offset:2px; }
.sp-review-kanaele { display:flex; flex-wrap:wrap; gap:7px; }
.sp-social-publish { display:flex; flex:0 0 auto; align-items:center; margin-left:auto; }.social-poster-review-actions { display:flex; flex:0 0 auto; align-items:center; }.social-poster-review-actions .workspace-run { margin:0; min-height:34px; padding:7px 13px; white-space:nowrap; }.social-poster-review-feedback { min-height:18px; margin:0; color:#9ee6bd; font:600 11px/1.35 'DM Sans',sans-serif; }.social-poster-review-feedback.error { color:#ff9aa9; }
.social-poster-publish-success { display:grid; min-height:360px; place-content:center; justify-items:center; gap:10px; padding:36px; text-align:center; animation:socialPosterPublishSuccess .38s cubic-bezier(.2,.85,.25,1) both; }.social-poster-publish-success span { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:linear-gradient(145deg,#ff2d55,#ff6a85); color:#fff; font-size:38px; box-shadow:0 0 0 0 rgba(255,45,85,.42); animation:socialPosterSuccessPulse 1.15s ease-out infinite; }.social-poster-publish-success h3 { margin:6px 0 0; color:#f7f9ff; font:800 22px/1.15 'DM Sans',sans-serif; }.social-poster-publish-success p { max-width:360px; margin:0; color:#aeb8ca; font:400 14px/1.55 'DM Sans',sans-serif; }@keyframes socialPosterPublishSuccess { from { opacity:0; transform:scale(.94) translateY(12px); } to { opacity:1; transform:none; } }@keyframes socialPosterSuccessPulse { 70% { box-shadow:0 0 0 16px rgba(255,45,85,0); } 100% { box-shadow:0 0 0 0 rgba(255,45,85,0); } }
body.social-poster-review-modal-open { overflow:hidden; }
@media(max-width:820px){.social-poster-review-modal{padding:8px}.social-poster-review-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:15px}.social-poster-review{grid-template-columns:1fr;min-height:0}.social-poster-copy-editor{padding:18px;border-top:1px solid rgba(135,145,170,.16);border-left:0}.social-poster-review-image>img{max-height:52dvh}.sp-social-publish{margin-left:0}.social-poster-review-actions .workspace-run{width:auto;justify-content:center}}

.tk-composer .tk-leiste-rechts .workspace-run {
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .tk-composer .tk-box .tk-thema-feld textarea,
  .tk-composer .tk-box .tk-thema-feld input[type="text"] {
    min-height: 240px;
    padding: 17px 58px 72px 17px;
  }
  .tk-composer .tk-leiste { align-items: center; }
  .tk-composer .tk-eingabe-aktionen .tk-leiste-rechts { width: auto; }
  .tk-composer .tk-eingabe-aktionen .workspace-run { width: auto; }
  .tk-composer .tk-konfig-trigger {
    max-width: calc(100vw - 190px);
    overflow: hidden;
  }
  .tk-composer .tk-konfig-trigger > [data-tk-konfig-zusammenfassung] {
    overflow: hidden;
  }
  .tk-composer .tk-konfig-panel {
    width: 100%;
    max-height: min(440px, calc(100vh - 280px));
  }
  .tk-composer .tk-konfig-grid,
  .tk-composer .tk-konfig-erweitert {
    grid-template-columns: 1fr;
  }
}

/* Auf dem Telefon ist die Konfiguration ein fortlaufender Bereich direkt
   unter dem Einstellknopf. Dadurch entfällt die zweite Aufklappstufe und alle
   Feinschliff-Felder bleiben beim ersten Oeffnen erreichbar. */
@media (max-width: 560px) {
  .tk-composer .tk-konfig-panel {
    height: auto;
    max-height: none;
    padding: 10px;
    overflow: visible;
  }
  .tk-composer .tk-konfig-erweitert-knopf { display: none; }
  .tk-composer .tk-konfig-erweitert {
    position: static;
    inset: auto;
    z-index: auto;
    align-content: stretch;
    margin-top: 10px;
    padding: 10px 0 0;
    overflow: visible;
    border-top: 1px solid rgba(139, 149, 170, .16);
    border-bottom: 0;
    background: none;
    box-shadow: none;
  }
  .tk-composer .tk-konfig-erweitert-kopf {
    gap: 6px;
    margin: 0;
    padding: 0 0 8px;
    border: 0;
  }
  .tk-composer .tk-konfig-erweitert-kopf > span {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
    font-size: 13px;
  }
  .tk-composer .tk-konfig-erweitert-kopf > div { display: block; }
  .tk-composer .tk-konfig-erweitert-kopf small { display: none; }
  .tk-composer .tk-konfig-erweitert-kopf strong { font-size: 10px; }
}

/* Fehlgeschlagene Bilderzeugung: Ursache nachlesen, Werte pruefen, erneut
   starten. Vorher war die Kachel eine Sackgasse. */
.thumbnail-failed-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.thumbnail-failed-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.thumbnail-failed-action:hover {
  border-color: rgba(148, 163, 184, .7);
}

.thumbnail-failed-action.is-primary {
  background: rgba(248, 113, 113, .16);
  border-color: rgba(248, 113, 113, .45);
}

.thumbnail-failed-action.is-delete {
  padding: 7px 10px;
}

/* Handy: Die fehlgeschlagene Karte behielt die feste 16:9-Hoehe der
   Bildkarten - Text und Knopfzeile passten nicht hinein und wurden am
   Kartenrand abgeschnitten (360 px alle Knoepfe, DE auch 390/412 px
   "Thumbnail loeschen"). Hier waechst die Karte mit ihrem Inhalt,
   mindestens so hoch wie eine Bildkarte (CFAI-MOB-20260922-027). */
@media (max-width: 650px) {
  #workspace-body[data-tool="thumbnail-banner-maker"] .thumbnail-history-card.is-failed {
    display: grid;
    place-items: center;
    height: auto;
    min-height: min(56vw, 230px);
    aspect-ratio: auto;
    padding: 18px 0;
  }
}

.thumbnail-failure-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.thumbnail-failure-modal > section {
  width: min(560px, 100%);
  max-height: 80vh;
  overflow: auto;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--factory-surface, #fff);
  color: #f1f5f9;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.thumbnail-failure-modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.thumbnail-failure-modal header small {
  letter-spacing: .08em;
  font-size: 11px;
  opacity: .7;
}

.thumbnail-failure-modal header h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.thumbnail-failure-modal header button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.thumbnail-failure-message {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(248, 113, 113, .12);
  color: #fecdd3;
  line-height: 1.55;
}

.thumbnail-failure-values {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.thumbnail-failure-values > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  font-size: 13px;
}

.thumbnail-failure-values dt {
  opacity: .65;
  word-break: break-word;
}

.thumbnail-failure-values dd {
  margin: 0;
  word-break: break-word;
}

.thumbnail-failure-modal footer {
  display: flex;
  justify-content: flex-end;
}

/* Sammelaktionen im Publisher-Board. Auch ohne Auswahl bleibt ihre Hoehe
   reserviert. Sonst springt die komplette Uploadliste beim ersten Haken. */
.youtube-history-bulk {
  display: grid;
  place-items: center;
  padding-right: 4px;
  transform: translateX(6px);
}

.youtube-history-bulk input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.youtube-bulk-bar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 12px;
  background: rgba(148, 163, 184, .08);
  font-size: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}

.youtube-bulk-bar::-webkit-scrollbar { display: none; }
.youtube-bulk-bar.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.youtube-bulk-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.youtube-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.youtube-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.youtube-bulk-action b {
  opacity: .6;
  font-weight: 500;
}

.youtube-bulk-action:hover {
  border-color: rgba(148, 163, 184, .7);
}

.youtube-bulk-action.is-warn {
  border-color: rgba(248, 113, 113, .4);
}

.youtube-bulk-action.is-confirming {
  background: rgba(248, 113, 113, .18);
  border-color: rgba(248, 113, 113, .7);
}

.youtube-bulk-clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .7;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.youtube-bulk-feedback {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  opacity: .8;
}

.youtube-bulk-feedback.is-error {
  color: #f87171;
  opacity: 1;
}

.youtube-bulk-note {
  margin: 0 0 12px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(94, 203, 142, .12);
  border: 1px solid rgba(94, 203, 142, .3);
  font-size: 12.5px;
}

.youtube-bulk-note.is-error {
  background: rgba(248, 113, 113, .12);
  border-color: rgba(248, 113, 113, .35);
}

/* === Mobile Nachbesserungen, 28.08.2026 ==================================
   Nur additive @media-Bloecke am Dateiende. */
@media (max-width: 480px) {
  /* Der Titel-Vorschlagsplatz verlangt zwei Spalten von mindestens 150px -
     auf einem 360px-Telefon lief das Raster ueber den Rand. */
  .youtube-history-ai-slot[data-youtube-ai-slot="title"] { grid-template-columns: 1fr; }

  /* Etwas dichtere Kacheln und Formularkaesten auf sehr schmalen Telefonen. */
  .tool-page-stats article { padding: 14px 15px; }
  .youtube-publisher-manual-fields,
  .youtube-publisher-extras .workspace-optional-fields-grid { padding: 12px; }
}

/* === Thumbnail-Composer auf Telefonen ====================================
   28.08.2026: In der Fussleiste ueberlagerte der Konfigurations-Trigger den
   Start-Knopf. 02.09.2026: Die Parameter-Chips gibt es nur auf dem Desktop -
   auf dem Telefon blieben sie zunaechst als frei umbrechende Reihen unter
   der Box und sahen zerrissen aus ("bitte wie zuvor", Betreiberwunsch vom
   selben Tag). Deshalb: kompakte gepinnte Leiste wie zuvor, nur Zahnrad und
   Start-Knopf; alle Werte stellt das Zahnrad-Panel ein. Die Box selbst
   waechst mit dem Text (passeHoeheAn im Composer-Skript). */
@media (max-width: 560px) {
  .tk-composer .tk-param-chips { display: none; }
  .tk-composer .tk-konfig-halter { flex: 0 0 auto; }
  .tk-composer .tk-leiste-rechts { min-width: 0; flex: 1 1 auto; }
  .tk-composer .tk-leiste-rechts .workspace-run.tk-start { min-width: 0; max-width: 100%; }
  .tk-composer .tk-start-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .social-poster-production-modal .thumbnail-production-body { padding: 12px 8px 18px; }
  .social-poster-production-modal .thumbnail-production-body #workspace-body { padding: 12px 0 18px !important; }
  .sp-composer .tk-eingabe { z-index: 2; }
  .sp-composer .tk-eingabe-aktionen {
    position: absolute;
    z-index: 3;
  }
  .sp-composer .sp-anhang { flex: 0 0 auto; }
  .sp-composer .sp-anhang-feld .video-file-picker {
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
  }
  .sp-composer .sp-anhang-feld .video-file-picker i { font-size: 13px; }
  .sp-composer .tk-konfig-trigger {
    justify-content: center;
    width: 32px;
    min-height: 30px;
    padding: 0;
  }
  .sp-composer .tk-konfig-trigger .mdi-chevron-down,
  .sp-composer .tk-konfig-trigger .mdi-chevron-up { display: none; }
  .sp-composer .tk-leiste-rechts .workspace-run.tk-start {
    min-height: 30px;
    height: 30px;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    font-size: 10px;
  }
  .sp-composer .tk-start-credit { padding: 0 7px; }
  .sp-composer .tk-start-credit > b { font-size: 10px; }
  .social-poster-production-modal .thumbnail-production-dialog > header p { font-size: 10px; }
}

/* Ein Panel statt zweier Ansichten (13.09.2026). Die feste Hoehe von 320px
   und der Platz unten stammen vom Thumbnail-Maker: dort verhindern sie den
   Layoutsprung beim Umschalten zwischen Grundwerten und Feinschliff. Der
   Poster hat diese Umschaltung nicht mehr, also waechst sein Panel mit dem
   Inhalt - sonst bliebe unten eine leere Flaeche stehen. */
.sp-composer .sp-settings { height:auto; min-height:0; padding-bottom:14px; overflow:visible; }

/* Keyword-Recherche: Auf dem Telefon ist der Briefingblock ein Abschnitt,
   keine zweite Karte im Produktionsfenster. Die Haarlinie trennt ihn klar
   vom Schritt-Titel; Auswahlkarten und Eingaben behalten ihre eigenen
   Rahmen. */
@media (max-width:720px) {
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-group-grid,
  .generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid {
    padding:14px 0 0 !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* Das Skript-Briefing folgt auf Tablet und Telefon derselben Abschnittslogik:
   Der Schritt-Kopf und seine Felder werden von einer Linie verbunden, statt
   dass eine zweite grosse Karte im Produktionsfenster entsteht. */
@media (max-width:1024px) {
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-form,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-form {
    width:calc(100% + 24px) !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-bottom:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid {
    width:100% !important;
    padding:14px 0 0 !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-form > .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-form > .workspace-group[data-current] {
    padding:0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-wizard-progress,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group > legend,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-wizard-progress,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group > legend {
    padding-left:24px !important;
    padding-right:24px !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions {
    box-sizing:border-box !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between;
    gap:16px;
    margin:16px 30px 0 !important;
    padding:0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions .workspace-note,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions .workspace-note {
    order:0;
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding-left:24px !important;
    box-sizing:border-box !important;
    text-align:left;
  }

  /* Der Startknopf schliesst die Leiste rechts ab - wie der Weiter-Knopf auf
     den Schritten davor. Ohne eigene Reihenfolge waere er hinter dem Zurueck
     nach links gerutscht, sobald der Recherchehinweis den Assistententext
     ersetzt. */
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions .wizard-primary,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions .workspace-run,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions .wizard-primary,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions .workspace-run {
    order:1;
    flex:none;
    margin:0;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions .workspace-run-note,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions .workspace-run-note {
    order:0;
    padding-left:24px;
  }

}

/* Auf Mobil und Tablet gehört der Bildlauf zur gesamten Produktionsansicht.
   Lange Formulare erhalten dadurch keinen zweiten, engen Scrollbereich im
   Dialoginhalt; Kopf und Formular bewegen sich gemeinsam. */
@media (max-width:1024px) {
  .generic-tool-modal {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:safe center;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    -webkit-overflow-scrolling:touch;
  }
  .generic-tool-modal-dialog {
    width:min(1180px,calc(100vw - 32px));
    flex:0 0 auto;
    min-height:0;
    height:auto;
    max-height:none;
    margin:clamp(16px,3vw,44px) auto;
    overflow:hidden;
  }
  .generic-tool-modal-content {
    min-height:0;
    height:auto;
    overflow:visible;
  }
}

/* Video-Erstellung und Transkription hatten noch einen eigenen Bildlauf im
   Dialogkörper. Sie folgen auf kleineren Geräten derselben Navigation wie die
   übrigen Produktionsfenster. */
@media (max-width:1024px) {
  .transcription-production-modal {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:safe center;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    -webkit-overflow-scrolling:touch;
  }
  .transcription-production-dialog {
    width:min(1180px,calc(100vw - 32px));
    flex:0 0 auto;
    min-height:0;
    height:auto;
    max-height:none;
    margin:clamp(16px,3vw,44px) auto;
    overflow:hidden;
  }
  .transcription-production-body {
    min-height:0;
    height:auto;
    overflow:visible;
  }
}

/* Auf dem Telefon folgt der Social-Post-Komponist derselben Chatstruktur wie
   der Video-Composer: Werte direkt über der klaren Hauptaktion, statt nur ein
   einzelnes Zahnrad neben dem Bildknopf zu zeigen. */
@media (max-width:560px) {
  .sp-composer .tk-box .tk-thema-feld textarea {
    min-height:260px;
    padding-bottom:118px;
  }
  .sp-composer .tk-eingabe-aktionen {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    bottom:12px;
  }
  .sp-composer .tk-konfig-halter {
    display:flex;
    flex:1 1 auto;
    min-width:0;
    gap:4px;
  }
  .sp-composer .tk-param-chips {
    display:flex !important;
    flex:0 1 auto;
    min-width:0;
    gap:4px;
    overflow:hidden;
  }
  .sp-composer .tk-param-chip {
    min-height:30px;
    padding:4px 7px;
    font-size:9px;
  }
  .sp-composer [data-sp-modell] .tk-param-chip span {
    overflow:hidden;
    max-width:78px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Der Behaelter war schmaler als der Chip und schnitt ihn hart ab ("Nano Ba"),
     bevor die Kuerzung mit "..." greifen konnte. Der Chip schrumpft jetzt mit,
     die volle Bezeichnung steht in der Liste beim Antippen
     (CFAI-MOB-20260921-015). */
  .sp-composer [data-sp-modell] { flex:1 1 auto; }
  .sp-composer [data-sp-modell] .tk-param-chip { min-width:0; max-width:100%; }
  .sp-composer [data-sp-modell] .tk-param-chip span { min-width:0; flex:1 1 auto; }
  .sp-composer .sp-formats { flex:0 0 auto; }
  .sp-composer .tk-konfig-trigger { flex:0 0 30px; width:30px; }
  .sp-composer .tk-leiste-rechts {
    grid-column:1 / -1;
    width:100%;
    margin:0;
  }
  .sp-composer .tk-leiste-rechts .workspace-run.tk-start {
    width:100%;
    min-height:34px;
    height:34px;
    justify-content:center;
  }
}

/* ---------------------------------------------------------------------------
   Werkzeugseiten auf dem Telefon.

   Gemeldet am 13.09.2026: "Thumbnail Überschrift viel kleiner und sie soll
   nicht mit scrollen. Bitte die verschiedenen Boxen durch Trennlinien
   ersetzen. Die Boxen und deren Abstand nehmen zu viel Platz weg."

   Gemessen bei 390 px: die Überschrift war 25 px gross, brach auf zwei Zeilen
   um und machte die Kopfzeile 95 px hoch. Der Hinweiskasten kostete 107 px
   plus 20 px Abstand, allein für Rahmen, Ecken und Polster.

   Eine Trennlinie leistet dasselbe wie ein Rahmen und braucht einen Pixel.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Die Kopfzeile bleibt oben stehen - sie ist bereits sticky, aber sie war
     so hoch, dass vom Werkzeug kaum etwas uebrig blieb. */
  /* Mindesthoehe bleibt: in der Galerie sitzt der Knopf "Neue Produktion"
     absolut in der Kopfzeile und traegt nichts zur Hoehe bei. Mit
     min-height:0 klappte sie auf 18 px zusammen und der Knopf lag ueber den
     Bildern (beim Nachmessen aufgefallen, 13.09.2026). */
  body.factory-page-active #factory-workspace .workspace-header {
    min-height: 56px;
    padding: 9px 14px;
    background: #070910;
  }
  body.factory-page-active #factory-workspace .workspace-header h2 {
    margin-top: 1px;
    font-size: 17px;
    line-height: 1.2;
  }
  body.factory-page-active #factory-workspace .workspace-header .workspace-kicker,
  body.factory-page-active #factory-workspace .workspace-header #workspace-kicker { font-size: 9px; }

  /* Weniger Rand um den Inhalt. */
  body.factory-page-active #workspace-body { padding: 12px 14px 28px !important; }

  /* Aus Kaesten werden Abschnitte mit Trennlinie. */
  body.factory-page-active #workspace-body .workspace-intro-card {
    margin-bottom: 12px;
    padding: 0 0 11px;
    border: 0;
    border-bottom: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.factory-page-active #workspace-body .workspace-intro-card .tool-icon { width: 30px; height: 30px; font-size: 16px; }
  body.factory-page-active #workspace-body .workspace-intro-card strong { font-size: 13px; }
  body.factory-page-active #workspace-body .workspace-intro-card p { font-size: 11px; line-height: 1.45; }
}

/* === Kein Kasten im Kasten auf dem Telefon (14.09.2026) ==================
   Gemeldet mit Bildern von vier Werkzeugen: "ein Rahmen endet mitten im
   Formular, die restlichen Felder stehen ausserhalb", "Bitte alles in die
   eine Box rein das sieht scheisse aus."

   Die Ursache steht in ai-contentfactory-modal-v3.css:
     .workspace-form > .workspace-group[data-current] { overflow-y: auto }
   in einem Flex-Bereich mit overflow:hidden. Die aktuelle Schrittgruppe ist
   ein eigener Scroll-Container - so bleibt die Fussleiste mit "Weiter"
   angeheftet. Der einzige sichtbare Rahmen sass aber am Raster INNERHALB
   dieses Scroll-Fensters. Sein Kasten reicht deshalb nur so weit wie das
   Fenster, waehrend der Inhalt darunter weiterlaeuft.

   Nachgemessen bei 390 x 800 im YouTube-Publisher:
     Scroll-Fenster  211 px hoch
     Kasten darin    602 px hoch
   Auf der Werkzeugseite faellt das nicht auf: dort heben
   ai-contentfactory-alignment.css (display:block !important auf
   #workspace-body) und eine Regel weiter oben in dieser Datei
   (overflow:visible auf die aktuelle Gruppe) beides wieder auf - beide an
   body.factory-page-active gebunden. Genau deshalb war der Fehler mit
   Messungen auf der Werkzeugseite nicht zu sehen; dieselbe Seite ohne diese
   Klasse zeigt ihn sofort.

   Auf dem Telefon traegt deshalb kein Raster mehr einen eigenen Kasten. Was
   Kopf und Felder trennt, ist eine Linie; der eine Rahmen ist das Panel
   selbst. Der Scroll-Container bleibt unangetastet - er haelt die Fussleiste
   an ihrem Platz.

   Die Regeln stehen in DIESER Datei und nicht in modal-v3.css: modal-v3 laedt
   als fuenftes Stylesheet, pages.css als 23. Nachgemessen blieben Ecken und
   Flaeche in modal-v3 wirkungslos.

   Der Zuschnitt haengt an #workspace-body bzw. .generic-tool-modal. Die
   Produktionsfenster von Transkription und Dubbing haengen direkt am <body>
   und wurden am 14.09.2026 nachgereicht - dort gilt dasselbe, gemeldet mit
   Bild aus der Transkription. Das Shorts-Fenster bleibt aussen vor: es hat
   seinen eigenen Handy-Zuschnitt in ai-contentfactory-shorts-ui.css, der
   denselben Kasten schon aufloest. */
@media (max-width: 760px) {
  #workspace-body .workspace-group-grid,
  #workspace-body .workspace-group[data-open] .workspace-group-grid,
  .generic-tool-modal .workspace-group-grid,
  .generic-tool-modal .workspace-group[data-open] .workspace-group-grid,
  .transcription-production-body .workspace-group-grid,
  .transcription-production-body .workspace-group[data-open] .workspace-group-grid,
  .dubbing-production-body .workspace-group-grid,
  .dubbing-production-body .workspace-group[data-open] .workspace-group-grid {
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
  }
}

/* === Ein Kasten um das ganze Briefing (14.09.2026) =======================
   Vier Anlaeufe haben den Rahmen, der mitten im Formular endet, nicht
   getroffen. Beim Kunden zeichnet ihn ein Element, das es in der hiesigen
   Feldkonfiguration nicht gibt - nachgewiesen ausgeschlossen wurden:
   veraltetes CSS (index.html geht mit no-store raus, kein Service Worker),
   das Raster selbst (Ecken 0, Flaeche transparent, nachgemessen), eine
   spaetere Datei (polish.css verliert gegen die ID-Regel) und die Breite
   (geprueft bei 390 und 460 px, Werkzeugseite und Panel).

   Deshalb wird das Ziel jetzt nicht mehr ueber das schuldige Element
   erreicht, sondern ueber die Struktur: den einen Rahmen traegt das
   Formular, und alles darin gibt seinen eigenen ab - bis zu drei Ebenen
   tief, Eingabefelder, Knoepfe und Beschriftungen ausgenommen. Damit ist
   es gleichgueltig, welches Element den Kasten gezeichnet hat.

   !important ist hier noetig und kein Versehen: die Kastenregeln kommen aus
   polish.css (laedt als 28. und damit nach dieser Datei) und aus
   werkzeugspezifischen Regeln in control-center.css, die mit ihrer hoeheren
   Spezifitaet gewinnen wuerden.

   Der Scroll-Container der aktuellen Schrittgruppe bleibt unangetastet - er
   haelt die Fussleiste an ihrem Platz. Der Rahmen sitzt am Formular und
   damit AUSSERHALB davon, kann also nicht mehr mittendrin enden. */
@media (max-width: 760px) {
  #workspace-body .workspace-form,
  .generic-tool-modal .workspace-form,
  .transcription-production-body .workspace-form,
  .dubbing-production-body .workspace-form {
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #262a35;
    border-radius: 14px;
    background: #0c0e14;
  }

  #workspace-body .workspace-form > *:not(input):not(textarea):not(select):not(button):not(label),
  #workspace-body .workspace-form > * > *:not(input):not(textarea):not(select):not(button):not(label),
  #workspace-body .workspace-form > * > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .generic-tool-modal .workspace-form > *:not(input):not(textarea):not(select):not(button):not(label),
  .generic-tool-modal .workspace-form > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .generic-tool-modal .workspace-form > * > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .transcription-production-body .workspace-form > *:not(input):not(textarea):not(select):not(button):not(label),
  .transcription-production-body .workspace-form > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .transcription-production-body .workspace-form > * > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .dubbing-production-body .workspace-form > *:not(input):not(textarea):not(select):not(button):not(label),
  .dubbing-production-body .workspace-form > * > *:not(input):not(textarea):not(select):not(button):not(label),
  .dubbing-production-body .workspace-form > * > * > *:not(input):not(textarea):not(select):not(button):not(label) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Was die Abschnitte trennt, ist eine Linie. */
  #workspace-body .workspace-form .workspace-group-grid,
  .generic-tool-modal .workspace-form .workspace-group-grid,
  .transcription-production-body .workspace-form .workspace-group-grid,
  .dubbing-production-body .workspace-form .workspace-group-grid,
  #workspace-body .workspace-form .workspace-optional-fields,
  .generic-tool-modal .workspace-form .workspace-optional-fields,
  .transcription-production-body .workspace-form .workspace-optional-fields,
  .dubbing-production-body .workspace-form .workspace-optional-fields {
    border-top: 1px solid #262a35 !important;
  }
}

/* Die Video-Übersetzung nutzt auf dem Telefon denselben klaren Aufbau wie
   Transkription und Skript: kein zweiter Kasten innerhalb des Dialogs. Der
   Abstand unter dem Dialog macht seinen unteren Außenrand nach dem Scrollen
   sichtbar, statt ihn am Viewportrand enden zu lassen. */
@media (max-width: 760px) {
  .dubbing-production-body .workspace-form {
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid #262a35 !important;
    border-bottom: 1px solid #262a35 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dubbing-production-modal { padding-bottom: 16px !important; }
  .dubbing-production-dialog { margin: 8px auto 24px !important; }
}

/* Die Produktionsformulare werden ohne den urspruenglichen
   .workspace-body-Container eingehängt. Dort behielt das Formular sein
   dreizeiliges Grid mit einer begrenzten Mittelzeile: Der Rahmen endete nach
   den ersten Feldern, waehrend der Rest der Schrittgruppe sichtbar darunter
   herauslief. Das betrifft das allgemeine Skript-Fenster ebenso wie die
   separate Transkription. Auf Telefonen soll jede Seite eine
   zusammenhaengende, mitwachsende Flaeche bleiben. */
@media (max-width: 760px) {
  .generic-tool-modal .workspace-form,
  .transcription-production-body .workspace-form {
    display: block !important;
    min-height: auto !important;
    grid-template-rows: none !important;
  }

  .generic-tool-modal .workspace-form > .workspace-group[data-current],
  .transcription-production-body .workspace-form > .workspace-group[data-current] {
    align-self: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
}

/* Tablet-Produktionen verwenden dieselbe klare Hierarchie wie Mobil: Der
   Formularrahmen fasst das gesamte Briefing, die einzelnen Bereiche werden
   nur durch Linien getrennt. Ohne diese Ergänzung behalten einige Dialoge
   zwischen 761 und 1024 px wieder ihre frühere Innenkarte. */
@media (min-width: 761px) and (max-width: 1024px) {
  #workspace-body .workspace-form,
  .generic-tool-modal .workspace-form,
  .transcription-production-body .workspace-form,
  .dubbing-production-body .workspace-form {
    box-sizing:border-box !important;
    display:block !important;
    min-height:auto !important;
    padding:18px !important;
    border:1px solid #262a35 !important;
    border-radius:14px !important;
    background:#0c0e14 !important;
  }

  #workspace-body .workspace-form > .workspace-group[data-current],
  .generic-tool-modal .workspace-form > .workspace-group[data-current],
  .transcription-production-body .workspace-form > .workspace-group[data-current],
  .dubbing-production-body .workspace-form > .workspace-group[data-current] {
    align-self:auto !important;
    min-height:auto !important;
    overflow:visible !important;
  }

  #workspace-body .workspace-form .workspace-group-grid,
  .generic-tool-modal .workspace-form .workspace-group-grid,
  .transcription-production-body .workspace-form .workspace-group-grid,
  .dubbing-production-body .workspace-form .workspace-group-grid,
  #workspace-body .workspace-form .workspace-optional-fields,
  .generic-tool-modal .workspace-form .workspace-optional-fields,
  .transcription-production-body .workspace-form .workspace-optional-fields,
  .dubbing-production-body .workspace-form .workspace-optional-fields {
    padding:18px 0 0 !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* Die Abschlusszeile des Skript-Briefings folgt exakt dem Feldraster. Diese
   Regel steht bewusst am Dateiende: allgemeine Mobilregeln dürfen weder den
   Credits-Hinweis an den Kartenrand ziehen noch den Weiter-Button weiter
   außen enden lassen. */
@media (max-width: 1024px) {
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions {
    box-sizing:border-box !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:16px 30px 0 !important;
    padding:0 !important;
  }

  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions .workspace-note,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions .workspace-note {
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Die allgemeine Formularregel zieht Wizard-Aktionen mit negativen Rändern
   bis an den Kartenrand. Jede Zeile mit dem Wizard-Hinweis folgt stattdessen
   dem 30px-Feldraster – unabhängig davon, ob sie im normalen Workspace oder
   im generischen Produktionsdialog hängt. */
@media (max-width: 1024px) {
  .workspace-actions:has([data-wizard-hint]) {
    box-sizing:border-box !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:16px 30px 0 !important;
    padding:0 !important;
  }

  .workspace-actions:has([data-wizard-hint]) [data-wizard-hint] {
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }
}

/* Keyword-Recherche: Der Schritt selbst ist keine zweite Karte. Die
   Themen- und Keyword-Karten bleiben bewusst als auswählbare Elemente
   gerahmt; der umschließende Briefing-Kasten wird durch eine Trennlinie
   zwischen Schrittüberschrift und Inhalt ersetzt. */
@media (max-width: 1024px) {
  #workspace-body[data-tool="youtube-keyword-research"] .workspace-form > .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-form > .workspace-group[data-current] {
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #workspace-body[data-tool="youtube-keyword-research"] .workspace-form > .workspace-group[data-current] > .workspace-group-grid,
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-form > .workspace-group[data-current] > .workspace-group-grid {
    padding:18px 0 0 !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}

/* Tablet und Telefon: Standard-Produktionsformulare bestehen aus einem
   sichtbaren Schritt und Trennlinien. Der allgemeine Formularrahmen war eine
   zweite Karte, die bei langen Inhalten vor Beschreibung oder Aktionsleiste
   endete. Auswahlkarten und Eingabefelder bleiben absichtlich ausgenommen. */
@media (max-width: 1024px) {
  #workspace-body .workspace-form,
  .generic-tool-modal .workspace-form,
  .transcription-production-body .workspace-form,
  .dubbing-production-body .workspace-form {
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #workspace-body .workspace-form > .workspace-group[data-current],
  .generic-tool-modal .workspace-form > .workspace-group[data-current],
  .transcription-production-body .workspace-form > .workspace-group[data-current],
  .dubbing-production-body .workspace-form > .workspace-group[data-current] {
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #workspace-body .workspace-form .workspace-group-grid,
  .generic-tool-modal .workspace-form .workspace-group-grid,
  .transcription-production-body .workspace-form .workspace-group-grid,
  .dubbing-production-body .workspace-form .workspace-group-grid,
  #workspace-body .workspace-form .workspace-optional-fields,
  .generic-tool-modal .workspace-form .workspace-optional-fields,
  .transcription-production-body .workspace-form .workspace-optional-fields,
  .dubbing-production-body .workspace-form .workspace-optional-fields {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:18px 0 0 !important;
    overflow:visible !important;
    border:0 !important;
    border-top:1px solid #262a35 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #workspace-body .workspace-actions,
  .generic-tool-modal .workspace-actions,
  .transcription-production-body .workspace-actions,
  .dubbing-production-body .workspace-actions {
    box-sizing:border-box !important;
    position:static !important;
    width:100% !important;
    margin:16px 0 0 !important;
    padding:16px 0 0 !important;
    border-top:1px solid #262a35 !important;
  }

  /* Nicht der Schritt, sondern der umgebende Seiten- bzw. Dialogkoerper
     scrollt. Andernfalls endet der sichtbare Abschnitt vor langen Feldern
     oder der Aktionsleiste. */
  .workspace-body:has(> .workspace-form:not([hidden])),
  .generic-tool-modal .workspace-body,
  .generic-tool-modal-content > #workspace-body,
  .transcription-production-body,
  .dubbing-production-body {
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .factory-workspace.open .workspace-panel,
  .generic-tool-modal,
  .transcription-production-modal,
  .dubbing-production-modal {
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Einheitlicher Produktionsdialog auf Tablet und Telefon. Die Inhaltsfläche
   liegt innerhalb des äußeren Rahmens; TTS setzte sie zuvor auf 0 und ließ
   Briefing, Schrittmarke und Felder an der Dialogkante kleben. */
@media (max-width:1024px) {
  .shorts-production-dialog > header h2,
  .transcription-production-dialog > header h2,
  .dubbing-production-dialog > header h2,
  .thumbnail-production-dialog > header h2,
  .video-production-dialog > header h2,
  /* Nur der Fenstertitel. Frueher ".generic-tool-modal-head strong" - das traf
     auch DOCX/TXT in der Kopfzeile und schob sie auf dem Handy unter das
     Schliessen-Kreuz (CFAI-MOB-20260921-017). */
  .generic-tool-modal-head > div > strong {
    font-size:20px !important;
    line-height:1.2 !important;
  }

  .shorts-production-dialog > header small,
  .transcription-production-dialog > header small,
  .dubbing-production-dialog > header small,
  .thumbnail-production-dialog > header small,
  .video-production-dialog > header small,
  .generic-tool-modal-head span {
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .shorts-production-body .workspace-group > legend,
  .transcription-production-body .workspace-group > legend,
  .dubbing-production-body .workspace-group > legend,
  .thumbnail-production-body .workspace-group > legend,
  .video-production-dialog .workspace-group > legend,
  .generic-tool-modal-content .workspace-group > legend {
    align-items:center !important;
    gap:10px !important;
    margin-bottom:12px !important;
    padding:0 !important;
  }

  .shorts-production-body .workspace-group > legend b,
  .transcription-production-body .workspace-group > legend b,
  .dubbing-production-body .workspace-group > legend b,
  .thumbnail-production-body .workspace-group > legend b,
  .video-production-dialog .workspace-group > legend b,
  .generic-tool-modal-content .workspace-group > legend b {
    font-size:15px !important;
    line-height:1.25 !important;
  }

  .shorts-production-body .workspace-group > legend small,
  .transcription-production-body .workspace-group > legend small,
  .dubbing-production-body .workspace-group > legend small,
  .thumbnail-production-body .workspace-group > legend small,
  .video-production-dialog .workspace-group > legend small,
  .generic-tool-modal-content .workspace-group > legend small {
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.4 !important;
  }

  [data-shorts-production-modal] fieldset.workspace-group > legend {
    align-items:center !important;
    gap:10px !important;
    margin-bottom:12px !important;
    padding:0 !important;
  }

  [data-shorts-production-modal] fieldset.workspace-group > legend b {
    font-size:15px !important;
    line-height:1.25 !important;
  }

  [data-shorts-production-modal] fieldset.workspace-group > legend small {
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.4 !important;
  }

  [data-shorts-production-modal] .wizard-step-number {
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
    border-radius:9px !important;
    font-size:10px !important;
  }

  .generic-tool-modal .generic-tool-modal-content:has(.workspace-form) {
    padding:18px !important;
    overflow:visible !important;
  }

  .shorts-production-body .wizard-step-number,
  .transcription-production-body .wizard-step-number,
  .dubbing-production-body .wizard-step-number,
  .thumbnail-production-body .wizard-step-number,
  .video-production-dialog .wizard-step-number,
  .generic-tool-modal-content .wizard-step-number {
    display:grid !important;
    place-items:center !important;
    justify-content:center !important;
    align-items:center !important;
    min-width:0;
    padding:0 !important;
    line-height:1 !important;
    text-align:center !important;
    text-indent:0 !important;
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
    font-size:10px !important;
  }

  .shorts-production-close,
  .transcription-production-close,
  .dubbing-production-close,
  .thumbnail-production-close,
  .video-production-close,
  .generic-tool-modal [data-generic-tool-modal-close] {
    display:grid !important;
    place-items:center !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 !important;
    line-height:1 !important;
    text-align:center !important;
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    border-radius:10px !important;
  }

  .shorts-production-close > .mdi,
  .transcription-production-close > .mdi,
  .dubbing-production-close > .mdi,
  .thumbnail-production-close > .mdi,
  .video-production-close > .mdi,
  .generic-tool-modal [data-generic-tool-modal-close] > .mdi {
    display:block;
    width:1em;
    height:1em;
    line-height:1;
  }
}

@media (max-width:720px) {
  .generic-tool-modal .generic-tool-modal-dialog,
  .transcription-production-dialog,
  .dubbing-production-dialog {
    width:calc(100vw - 16px) !important;
    margin:8px auto !important;
  }

  .generic-tool-modal .generic-tool-modal-content:has(.workspace-form) {
    padding:14px !important;
  }
}

/* Die Hauptaktion schließt auf Tablet in jedem Produktionsdialog rechts ab.
   Einzelne Werkzeuge hatten eigene Grid- bzw. Zentrierungsregeln und ließen
   den Button dadurch wechselnd links, mittig oder rechts erscheinen. */
@media (min-width:721px) and (max-width:1024px) {
  #workspace-body .workspace-actions,
  .generic-tool-modal .workspace-actions,
  .transcription-production-body .workspace-actions,
  .dubbing-production-body .workspace-actions,
  .thumbnail-production-body .workspace-actions,
  .video-production-dialog .workspace-actions,
  [data-shorts-production-modal] .shorts-actions,
  [data-shorts-production-modal] .shorts-actions-zeile {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
  }

  #workspace-body .workspace-actions .workspace-note,
  .generic-tool-modal .workspace-actions .workspace-note,
  .transcription-production-body .workspace-actions .workspace-note,
  .dubbing-production-body .workspace-actions .workspace-note,
  .thumbnail-production-body .workspace-actions .workspace-note,
  .video-production-dialog .workspace-actions .workspace-note {
    margin-right:auto !important;
  }

  #workspace-body .workspace-actions .workspace-run,
  #workspace-body .workspace-actions .wizard-primary,
  .generic-tool-modal .workspace-actions .workspace-run,
  .generic-tool-modal .workspace-actions .wizard-primary,
  .transcription-production-body .workspace-actions .workspace-run,
  .transcription-production-body .workspace-actions .wizard-primary,
  .dubbing-production-body .workspace-actions .workspace-run,
  .dubbing-production-body .workspace-actions .wizard-primary,
  .thumbnail-production-body .workspace-actions .workspace-run,
  .thumbnail-production-body .workspace-actions .wizard-primary,
  .video-production-dialog .workspace-actions .workspace-run,
  .video-production-dialog .workspace-actions .wizard-primary,
  [data-shorts-production-modal] .shorts-actions .workspace-run,
  [data-shorts-production-modal] .shorts-actions .cc-button.primary,
  [data-shorts-production-modal] .shorts-actions-zeile .workspace-run {
    margin-left:auto !important;
    flex:0 0 auto !important;
    justify-self:auto !important;
  }
}

/* Hinweis im Freigabefenster des Social Posters (17.09.2026): Qualitaets-
   pruefung oder blockiertes Motiv. Gleiche Farbe wie der Hinweis beim Thumbnail. */
.sp-review-hinweis { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(251,191,36,.35); border-radius: 10px; background: rgba(69,48,13,.4); color: #fde68a; font-size: 12.5px; line-height: 1.45; }
.sp-review-hinweis i { flex: none; margin-top: 1px; font-size: 16px; }
.sp-review-hinweis p { margin: 0; }

/* Stand der Veroeffentlichung je Netzwerk auf der Verlaufskachel (17.09.2026). */
.sp-veroeffentlichungen { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.sp-veroeffentlichung { display: inline-flex; align-items: center; gap: 4px; color: #aeb6c6; font-size: 11.5px; line-height: 1.3; }
.sp-veroeffentlichung.is-posted { color: #8de1bd; }
.sp-veroeffentlichung.is-draft, .sp-veroeffentlichung.is-laeuft { color: #c7cedb; }
.sp-veroeffentlichung.is-unbestaetigt { color: #fde68a; }
.sp-veroeffentlichung.is-failed { color: #fda4af; }
.sp-veroeffentlichung-grund { flex-basis: 100%; color: #fda4af; font-size: 11.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-transform: none; }

/* Fehlgeschlagener Lauf der Textwerkzeuge (CFAI-20260921-033) - gleiche
   Anlage wie die Live-Karte (.tool-history-live), in Rot. */
.tool-history-fehler { display: grid; align-content: center; justify-items: center; gap: 12px; padding: clamp(20px, 3vw, 36px) 12px; text-align: center; }
.tool-history-fehler-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(255, 73, 102, .52); border-radius: 20px; background: rgba(255, 48, 79, .14); color: #ff536d; font-size: 27px; }
.tool-history-fehler-copy { display: grid; justify-items: center; gap: 5px; max-width: 320px; }
.tool-history-fehler-copy small { color: #ff647c; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.tool-history-fehler-copy b { color: #f8f9fb; font: 700 17px/1.2 'Space Grotesk', sans-serif; }
.tool-history-fehler-copy em { color: #9aa2b1; font: normal 12px/1.55 'DM Sans', sans-serif; }
.tool-history-fehler-aktion { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(248, 113, 113, .45); border-radius: 12px; background: rgba(248, 113, 113, .16); color: #fff; font: 700 13px/1 'DM Sans', sans-serif; cursor: pointer; }
.tool-history-fehler-aktion:hover, .tool-history-fehler-aktion:focus-visible { border-color: #ff4968; background: rgba(255, 48, 79, .28); outline: none; }

/* Einheitliche Verlaufsueberschrift in allen Werkzeugen (Nutzermeldung
   22.09.2026: Ueberschrift und Anzahl sahen in jedem Werkzeug anders aus und
   standen auf verschiedener Hoehe). Vorbild ist Video/Uebersetzung/Text to
   Speech: Ueberschrift direkt am Anfang des Arbeitsbereichs, 650 22px Space
   Grotesk, Anzahl als Pille daneben. Angeglichen werden Thumbnail und Social
   Poster (30/28px Aussenabstand), die Textwerkzeuge (Dachzeile, 26px, keine
   Anzahl) und Shorts (26px Abstand, DM Sans 19.5px). */
/* !important und [data-tool]: control-center.css setzt beim Thumbnail-Verlauf
   "margin: 30px 0 0 !important". */
body.factory-page-active #workspace-body[data-tool] > .tool-history.thumbnail-history,
body.factory-page-active #workspace-body[data-tool] .cc-shell > .shorts-history { margin-top: 0 !important; }
body.factory-page-active #workspace-body:is([data-tool="youtube-video-script-generator"],[data-tool="creator-content-ideas-generator"],[data-tool="youtube-keyword-research"],[data-tool="creator-content-plan"],[data-tool="media-transcription-shared"]) > .tool-history > .tool-history-head .section-kicker { display: none; }
body.factory-page-active #workspace-body:is([data-tool="youtube-video-script-generator"],[data-tool="creator-content-ideas-generator"],[data-tool="youtube-keyword-research"],[data-tool="creator-content-plan"],[data-tool="media-transcription-shared"]) > .tool-history > .tool-history-head h3,
body.factory-page-active #workspace-body .shorts-history > .cc-section-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f5f6f8;
  font: 650 22px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: normal;
}
/* [data-tool] und .tool-history: die aeltere Social-Poster-Regel
   (#workspace-body[data-tool=...] .social-poster-history .thumbnail-history-count)
   war sonst staerker - Kontrolle 048 fand dort noch 27x24 px in Inter. */
body.factory-page-active #workspace-body[data-tool] .tool-history .tool-history-count,
body.factory-page-active #workspace-body[data-tool] .tool-history .thumbnail-history-count,
body.factory-page-active #workspace-body[data-tool] .shorts-history .shorts-history-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid #303542;
  border-radius: 99px;
  background: #171b24;
  color: #c8ceda;
  font: 800 11px/1 'Space Grotesk', sans-serif;
  letter-spacing: normal;
}