/* Letzte Cleaning Prüfung: 23.09.2026 */
/* Letztes Cleaning: - */
/* Keep every Control Center workspace on one shared left content edge. */
body.factory-page-active #workspace-body {
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 34px clamp(42px, 5vw, 92px) 76px !important;
}

body.factory-page-active #workspace-body > .cc-shell,
body.factory-page-active #workspace-body > .cc-shell:has(*) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left;
}

body.factory-page-active #workspace-body .cc-competitor-search {
  width: min(780px, 100%) !important;
  max-width: 780px !important;
  margin: 0 0 26px !important;
}

body.factory-page-active #workspace-body .cc-card,
body.factory-page-active #workspace-body .cc-metric,
body.factory-page-active #workspace-body .cc-form-grid,
body.factory-page-active #workspace-body .cc-list,
body.factory-page-active #workspace-body .best-time-intro,
body.factory-page-active #workspace-body .best-time-quality,
body.factory-page-active #workspace-body .best-time-section,
body.factory-page-active #workspace-body .trend-intro,
body.factory-page-active #workspace-body .trend-form,
body.factory-page-active #workspace-body .trend-summary,
body.factory-page-active #workspace-body .trend-results,
body.factory-page-active #workspace-body .community-hero,
body.factory-page-active #workspace-body .community-control,
body.factory-page-active #workspace-body .community-inbox {
  margin-left: 0;
  margin-right: 0;
}

/* Competitor cards must never widen the page because of long video titles. */
body.factory-page-active #workspace-body .cc-list,
body.factory-page-active #workspace-body .cc-card,
body.factory-page-active #workspace-body .cc-competitor,
body.factory-page-active #workspace-body .cc-outliers {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

body.factory-page-active #workspace-body .cc-outliers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.factory-page-active #workspace-body .cc-outliers a {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.factory-page-active #workspace-body .cc-outliers strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Competitors are a compact card grid, not one oversized full-width row each. */
body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
  align-self: start;
  height: max-content;
  min-height: 0;
  padding: 12px;
}

body.factory-page-active #workspace-body .cc-competitor-head {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
}

body.factory-page-active #workspace-body .cc-competitor-head img,
body.factory-page-active #workspace-body .cc-competitor-head > i {
  width: 36px;
  height: 36px;
}

body.factory-page-active #workspace-body .cc-competitor-head strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.factory-page-active #workspace-body .cc-competitor-head small {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.factory-page-active #workspace-body .cc-competitor-head .cc-button {
  min-width: 32px;
  padding: 7px;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers a {
  display: block;
  min-height: 0;
  padding: 8px;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers strong {
  font-size: 10px;
  line-height: 1.3;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers small {
  margin-top: 4px;
  font-size: 8px;
}

/* Scrollbalken der Contentfactory -------------------------------------------
   Diese Gestaltung hing frueher an body.factory-page-active. Die Klasse setzt
   erst das geoeffnete Werkzeugfenster, und closeWorkspace() nimmt sie wieder
   weg - auf der Startansicht und nach jedem Schliessen zeichnete der Browser
   deshalb seinen hellen Standardbalken auf den dunklen Grund. Genau der Balken
   passte nicht zur Seite.

   Die Bedingung ist raus. Diese Datei wird ausschliesslich von
   pages/content-factory/index.html geladen (geprueft), die Regel darf hier
   also unbedingt gelten.

   Der Stern deckt auch Behaelter mit ab, die keine eigene Regel haben - das
   war der zweite Teil des Problems. Wer eine eigene Farbe braucht, setzt sie
   ueber seinen Klassennamen: jeder Klassenselektor schlaegt den Stern. Die
   duenne Seitenleiste (.factory-sidebar-tool-list, 4 px) und das bewusst
   ausgeblendete Kaufpanel behalten ihre Fassung so von allein. */
html,
body,
* {
  scrollbar-color: #3b4050 #0b0c12;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0b0c12;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #0b0c12;
  border-radius: 999px;
  background: #3b4050;
}

::-webkit-scrollbar-thumb:hover {
  background: #565d70;
}

::-webkit-scrollbar-corner {
  background: #0b0c12;
}

/* Einzige Ausnahme: das Skript-Dokument ist eine helle Papierflaeche mit
   dunkler Schrift. Ein dunkler Balken mit fast schwarzer Spur waere dort der
   gleiche Fehler, nur andersherum. */
.script-document-content::-webkit-scrollbar-track {
  background: transparent;
}

.script-document-content::-webkit-scrollbar-thumb {
  border-color: transparent;
  background: #bdc1ca;
  background-clip: padding-box;
}

.script-document-content::-webkit-scrollbar-thumb:hover {
  background: #a4a9b4;
  background-clip: padding-box;
}

@media (max-width: 700px) {
  body.factory-page-active #workspace-body {
    padding: 24px 20px 52px !important;
  }

  body.factory-page-active #workspace-body .cc-outliers {
    grid-template-columns: 1fr;
  }

  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) {
    grid-template-columns: 1fr;
  }
}

/* Final competitor layout: channel identity left, top videos right. */
body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) {
  grid-template-columns: 1fr;
}

body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

body.factory-page-active #workspace-body .cc-competitor-head {
  min-width: 0;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
  min-width: 0;
  margin-top: 0;
}

@media (max-width: 800px) {
  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
    grid-template-columns: 1fr;
  }
}

/* Keep the desktop-style competitor cards usable in zoomed or narrow workspaces. */
@media (min-width: 521px) {
  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
    display: grid !important;
    grid-template-columns: minmax(175px, 220px) minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.factory-page-active #workspace-body .cc-competitor-head {
    width: 100%;
  }

  body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 520px) {
  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
    grid-template-columns: 1fr !important;
  }

  body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
    grid-template-columns: 1fr !important;
  }
}

/* The workspace is desktop-first; do not let an embedded/zoomed viewport collapse it. */
body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 460px) {
  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
    grid-template-columns: 1fr !important;
  }

  body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
    grid-template-columns: 1fr !important;
  }
}

/* Kopfzeile: keine zweite Marke neben dem Credit-Stand -----------------------
   .factory-mobile-brand ist fuer schmale Ansichten gedacht, in denen die
   Seitenleiste ausgeblendet ist (unter 700px). Darueber zeigt die Seitenleiste
   die Marke bereits - das Wortzeichen stand dann ein zweites Mal direkt neben
   dem Credit-Stand und ist jedes Mal um rund 140px nach links gesprungen,
   sobald das Guthaben nachgeladen war. Ab 701px bleibt es deshalb weg. */
@media (min-width: 701px) {
  .factory-topbar .factory-mobile-brand {
    display: none !important;
  }
}

/* Der Credit-Stand wird erst nach dem Laden eingehaengt. Ohne feste Mindest-
   breite waechst er beim Erscheinen von 0 auf seine Endbreite und schiebt
   dabei alles links davon weg. Die Breite reicht fuer fuenfstellige Guthaben. */
.factory-topbar .factory-top-actions > #factory-credit-float {
  min-width: 132px !important;
  justify-content: flex-start !important;
}

/* === Mobile Nachbesserung, 28.08.2026 ====================================
   Der "desktop-first"-Block weiter oben (220px minmax(0,1fr) !important)
   steht NACH dem 520px-Block und schlaegt ihn bei gleicher Spezifitaet.
   Zwischen 461px und 520px blieb die Wettbewerber-Karte deshalb
   zweispaltig und lief ueber den Rand. Dieser Block steht bewusst als
   letzter und stellt die Einspaltigkeit unterhalb von 520px wieder her. */
@media (max-width: 520px) {
  body.factory-page-active #workspace-body .cc-list:has(> .cc-competitor) > .cc-competitor {
    grid-template-columns: 1fr !important;
  }

  body.factory-page-active #workspace-body .cc-competitor .cc-outliers {
    grid-template-columns: 1fr !important;
  }
}

/* === Topbar-Wortmarke auf Telefonen, 28.08.2026 ==========================
   Logo (34px) + Wortmarke (132px, !important weiter oben) + Credit-Stand
   (min-width 132px) passen zusammen nicht in 375px: die Wortmarke wurde vom
   Credit-Stand abgeschnitten dargestellt. Unter 560px traegt das Logo die
   Marke allein; der volle Schriftzug steht im aufklappbaren Menue. */
@media (max-width: 560px) {
  .factory-topbar .factory-mobile-brand-wordmark { display: none !important; }
}