/* Letzte Cleaning Prüfung: 23.09.2026
   Letztes Cleaning: 09.09.2026 */
.workspace-panel {
  width: min(780px, 100%);
  background: #0d0e14;
}

.workspace-header {
  padding: 24px 34px;
  background: rgba(13, 14, 20, 0.96);
}

.workspace-body {
  padding: 28px 34px 60px;
}

.workspace-intro-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  margin-bottom: 24px;
  border: 1px solid #292c36;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 35, 71, 0.08), rgba(255, 35, 71, 0.015));
}

.workspace-intro-card .tool-icon {
  flex: 0 0 auto;
}

.workspace-intro-card .workspace-intro {
  margin: 2px 0 0;
}

.workspace-form {
  gap: 12px;
}

.workspace-group {
  margin: 0;
  padding: 0;
  border: 1px solid #292c36;
  border-radius: 13px;
  background: #111219;
  overflow: hidden;
}

.workspace-group legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  color: #f2f3f6;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.workspace-group legend span {
  display: flex;
  align-items: center;
  gap: 11px;
}

.workspace-group legend b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: rgba(255, 35, 71, 0.12);
  color: #ff4966;
  font-size: 10px;
}

.workspace-group legend > i {
  color: #7e8493;
  font-size: 20px;
  transition: transform .2s ease;
}

.workspace-group-grid {
  clear: both;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 5px 18px 20px;
  border-top: 1px solid transparent;
}

.workspace-group[data-open] .workspace-group-grid {
  display: grid;
  border-top-color: #242631;
  padding-top: 20px;
}

.workspace-group[data-open] legend > i {
  transform: rotate(180deg);
}

.workspace-field:has(textarea),
.workspace-field:has(.workspace-check) {
  grid-column: 1 / -1;
}

.workspace-field textarea {
  min-height: 96px;
  max-height: 220px;
}

.workspace-field label {
  letter-spacing: .01em;
}

.workspace-field small {
  color: #737988;
}

.workspace-field:has(.workspace-choice-grid) {
  grid-column: 1 / -1;
}

.workspace-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.workspace-choice-grid label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.workspace-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.workspace-choice-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #343744;
  border-radius: 10px;
  background: #171922;
  color: #b9bfcc;
  font-size: 12px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.workspace-choice-grid label:hover span {
  border-color: #626879;
  color: #f2f3f6;
  transform: translateY(-1px);
}

.workspace-choice-grid input:checked + span {
  border-color: rgba(255, 48, 79, .9);
  background: rgba(255, 48, 79, .14);
  color: #fff5f6;
  box-shadow: inset 0 0 0 1px rgba(255, 48, 79, .12);
}

.workspace-choice-grid input:focus-visible + span {
  outline: 2px solid #ff4966;
  outline-offset: 2px;
}

.workspace-actions {
  position: sticky;
  bottom: -1px;
  z-index: 3;
  justify-content: space-between;
  margin: 14px -34px -60px;
  padding: 18px 34px;
  border-top: 1px solid #2a2c36;
  background: rgba(13, 14, 20, 0.96);
  backdrop-filter: blur(14px);
}

.workspace-actions > div {
  display: grid;
  gap: 3px;
}

.workspace-actions > div strong {
  font-size: 13px;
}

.workspace-run {
  white-space: nowrap;
  min-width: 160px;
}

/* Erklaert den Aufschlag am Startknopf, etwa die automatische Recherche
   des Skriptgenerators. Steht bewusst neben dem Knopf und nicht darin -
   der Knopf traegt nur Beschriftung und Zahl. */
.workspace-run-note {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .75;
}

/* In der Aktionsleiste nimmt der Hinweis den Platz des Assistententexts ein:
   mittig, direkt neben dem Knopf, dessen Preis er erklaert. Als vierter
   Rasterplatz fiel er vorher in die erste Spalte, brach dort auf zwei Zeilen
   um und schob die Leiste unter das Ende der Dialogbox (15.09.2026).
   Solange der Startknopf noch verborgen ist, gehoert die Mitte weiterhin dem
   Assistententext - der Preis ist dort noch keine Auskunft, die zaehlt. */
.workspace-actions > .workspace-run-note {
  display: none;
}

@media (min-width: 761px) {
  .workspace-actions:has(> .workspace-run:not([hidden])) > .workspace-run-note {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    text-align: right;
  }

  .workspace-actions:has(> .workspace-run:not([hidden])) > .workspace-note {
    display: none;
  }
}

/* Auf dem Telefon bleibt fuer den Hinweis neben den Knoepfen nur eine Spalte
   von wenigen Zeichen. Die Leiste wird dort deshalb zu einer einfachen
   Flex-Zeile: Zurueck und Startknopf nebeneinander, der Hinweis als eigene
   Zeile darunter. Im Raster blieb sein Platz eine schmale Restspalte, in die
   der Text buchstabenweise umbrach. */
@media (max-width: 760px) {
  .workspace-actions:has(> .workspace-run:not([hidden])) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .workspace-actions:has(> .workspace-run:not([hidden])) > .wizard-secondary {
    flex: 0 0 auto;
  }

  .workspace-actions:has(> .workspace-run:not([hidden])) > .workspace-run {
    flex: 1 1 auto;
    min-width: 0;
  }

  .workspace-actions:has(> .workspace-run:not([hidden])) > .workspace-run-note {
    display: block;
    flex: 1 0 100%;
    width: auto;
    margin: 0;
    text-align: left;
  }
}

.factory-processing,
.processing-finished {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
}

.processing-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 10px auto 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ff3656, #d80730);
  color: #fff;
  font-size: 40px;
  box-shadow: 0 0 55px rgba(255, 35, 71, 0.3);
}

.processing-orb span {
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(255, 65, 92, 0.35);
  border-radius: 35px;
  animation: factory-pulse 1.8s ease-out infinite;
}

.processing-heading h3,
.processing-finished h3 {
  margin: 8px 0;
  font: 600 30px 'Space Grotesk';
}

.processing-heading p,
.processing-finished > p {
  min-height: 24px;
  margin: 0;
  color: #9ba1af;
}

.processing-progress {
  height: 6px;
  margin: 28px 0 12px;
  overflow: hidden;
  border-radius: 10px;
  background: #242631;
}

.processing-progress span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d80730, #ff4562);
  box-shadow: 0 0 18px rgba(255, 35, 71, 0.7);
  transition: width .6s ease;
}

.processing-meta {
  display: flex;
  justify-content: space-between;
  color: #737988;
  font-size: 11px;
}

.processing-meta b,
#processing-status {
  color: #bec2cc;
}

.processing-steps {
  display: grid;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.processing-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #242731;
  border-radius: 11px;
  background: #111219;
  opacity: .52;
  transition: .25s ease;
}

.processing-steps li.active {
  opacity: 1;
  border-color: rgba(255, 35, 71, 0.52);
  background: linear-gradient(90deg, rgba(255, 35, 71, 0.12), #111219 65%);
  transform: translateX(4px);
}

.processing-steps li.done {
  opacity: .8;
}

.step-state {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #1d1f28;
  color: #696f7e;
}

.processing-steps li.active .step-state {
  color: #ff4966;
  background: rgba(255, 35, 71, 0.13);
}

.processing-steps li.done .step-state {
  color: #fff;
  background: #ff2347;
}

.processing-steps li div {
  display: grid;
  gap: 3px;
}

.processing-steps strong {
  font-size: 13px;
}

.processing-steps small {
  color: #777d8c;
  font-size: 11px;
}

.processing-footnote {
  margin: 0;
  color: #707685;
  font-size: 11px;
}

.processing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}

.processing-cancel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #343844;
  border-radius: 9px;
  background: #15171f;
  color: #aeb3c0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.processing-cancel:hover:not(:disabled) {
  border-color: #8f253a;
  color: #ff526d;
  background: #211118;
}

.processing-cancel:disabled {
  cursor: wait;
  opacity: .65;
}

.processing-cancel[hidden] {
  display: none;
}

.finished-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 18px auto 24px;
  border-radius: 50%;
  background: #ff2347;
  color: #fff;
  font-size: 38px;
  box-shadow: 0 0 45px rgba(255, 35, 71, .28);
}

.processing-finished.failed .finished-icon {
  background: #2a2c35;
  color: #ff4966;
}

.finished-preview,
.finished-summary {
  margin-top: 24px;
  padding: 18px;
  max-height: 390px;
  overflow: auto;
  border: 1px solid #2d303a;
  border-radius: 12px;
  background: #111219;
  text-align: left;
}

.finished-preview pre {
  margin: 0;
  color: #d8dbe2;
  font: 12px/1.6 'DM Sans';
  white-space: pre-wrap;
}

.finished-copy {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid #3a3d48;
  border-radius: 9px;
  background: #191b23;
  color: #fff;
  cursor: pointer;
}

.finished-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@keyframes factory-pulse {
  0% { transform: scale(.9); opacity: .8; }
  80%, 100% { transform: scale(1.18); opacity: 0; }
}

@media (max-width: 700px) {
  .workspace-header,
  .workspace-body { padding-left: 20px; padding-right: 20px; }
  .workspace-group-grid { grid-template-columns: 1fr; }
  .workspace-field { grid-column: 1; }
  .workspace-actions { margin-left: -20px; margin-right: -20px; padding: 14px 20px; }
  .workspace-actions > div { display: none; }
  .workspace-run { width: 100%; }
}
.youtube-video-source { grid-column: 1 / -1; }
.reference-image-source { grid-column: 1 / -1; }
.youtube-script-source-mode { grid-column: 1 / -1; }
.youtube-script-source-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.youtube-script-source-choice label { display: block; min-width: 0; }
.youtube-script-source-choice span { display: grid; gap: 5px; min-height: 64px; padding: 12px 14px; text-align: left; }
.youtube-script-source-choice span small { color: #858b9b; font-size: 10px; font-weight: 500; line-height: 1.4; }
.youtube-script-source-field[hidden] { display: none !important; }
.youtube-style-mode { grid-column: 1 / -1; }
.youtube-style-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.youtube-style-choice label { display: block; min-width: 0; }
.youtube-style-choice span { display: grid; gap: 5px; min-height: 64px; padding: 12px 14px; text-align: left; }
.youtube-style-choice span small { color: #858b9b; font-size: 10px; font-weight: 500; line-height: 1.4; }
.youtube-style-manual-field[hidden], .youtube-script-style-field[hidden] { display: none !important; }
.youtube-detail-level { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.youtube-detail-level > label, .youtube-detail-level > small { grid-column: 1 / -1; }
.youtube-detail-level > select { grid-column: 1; }
.script-detail-preview { display: grid; grid-column: 2; grid-row: 2; gap: 3px; width: 100%; margin: 0; padding: 8px 10px; border: 1px solid #303542; border-radius: 9px; background: #12151c; color: #aeb5c2; text-align: left; cursor: pointer; }
.script-detail-preview:hover { border-color: #ff304f; background: rgba(255,48,79,.07); }
.script-detail-preview b { color: #fff; font-size: 11px; }.script-detail-preview small { font-size: 10px; }
.script-example-modal { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 24px; background: rgba(2,4,8,.78); }.script-example-dialog { width: min(760px,100%); max-height: min(760px,90vh); overflow: auto; padding: 22px; border: 1px solid #454b59; border-radius: 14px; background: #11141b; color: #e8ebf1; }.script-example-dialog header { display:flex; justify-content:space-between; gap:16px; align-items:center; }.script-example-dialog pre { white-space:pre-wrap; font:13px/1.65 Inter,sans-serif; color:#d5dae4; }.script-example-close { border:1px solid #555d6e; border-radius:8px; background:transparent; color:#fff; padding:7px 10px; cursor:pointer; }
@media (max-width: 700px) { .youtube-detail-level { grid-template-columns: 1fr; }.youtube-detail-level > select, .script-detail-preview { grid-column: 1; }.script-detail-preview { grid-row: auto; } }
@media (max-width: 700px) { .youtube-script-source-choice { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .youtube-style-choice { grid-template-columns: 1fr; } }
.youtube-content-mode { grid-column: 1 / -1; }
.youtube-content-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.youtube-content-choice label { display: block; min-width: 0; }
.youtube-content-choice span { display: grid; gap: 5px; min-height: 64px; padding: 12px 14px; text-align: left; }
.youtube-content-choice span small { color: #858b9b; font-size: 10px; font-weight: 500; line-height: 1.4; }
.youtube-content-manual-field[hidden], .youtube-script-content-field[hidden] { display: none !important; }
@media (max-width: 700px) { .youtube-content-choice { grid-template-columns: 1fr; } }
.workspace-cta-control { display: flex; align-items: stretch; gap: 8px; }
.workspace-cta-control > [data-config-key="CALL_TO_ACTION"] { flex: 1 1 auto; min-width: 0; }
.workspace-cta-ai { display: inline-grid; place-items: center; flex: 0 0 42px; min-height: 42px; border: 1px solid #ff304f; border-radius: 10px; background: rgba(255, 48, 79, .12); color: #ff4966; cursor: pointer; }
.workspace-cta-ai:hover { background: #ff304f; color: #fff; box-shadow: 0 0 18px rgba(255, 48, 79, .28); }
.workspace-cta-ai:disabled { opacity: .7; cursor: wait; }
.reference-source-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.reference-source-tabs > label { cursor: pointer; }
.reference-source-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.reference-source-tabs span { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; min-height: 68px; padding: 11px 13px; border: 1px solid #343946; border-radius: 12px; background: #171a22; color: #eef0f4; transition: border-color .16s ease, background .16s ease; }
.reference-source-tabs input:checked + span { border-color: #ff304f; background: rgba(255, 48, 79, .08); box-shadow: 0 0 0 2px rgba(255, 48, 79, .08); }
.reference-source-tabs i { grid-row: 1 / 3; color: #ff4966; font-size: 23px; }
.reference-source-tabs b { font-size: 12px; }
.reference-source-tabs small { color: #858c9c; font-size: 10px; }
.reference-source-panel { margin-top: 12px; }
.reference-source-panel[hidden] { display: none !important; }
.reference-image-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.reference-image-preview-list:empty { display: none; }
.reference-image-preview-list article { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 28px; align-items: center; gap: 9px; min-width: 0; padding: 7px; border: 1px solid #303541; border-radius: 11px; background: #151820; }
.reference-image-preview-list img { width: 58px; height: 45px; border-radius: 7px; object-fit: cover; background: #0c0e13; }
.reference-image-preview-list span { min-width: 0; }
.reference-image-preview-list b,.reference-image-preview-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-image-preview-list b { color: #e7e9ee; font-size: 10px; }
.reference-image-preview-list small { margin-top: 3px; color: #747b8b; font-size: 9px; }
.reference-image-preview-list button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #383d49; border-radius: 8px; background: #1b1e27; color: #9299a8; cursor: pointer; }
.reference-image-preview-list button:hover { border-color: #ff304f; color: #ff4966; }
@media (max-width: 700px) { .reference-source-tabs,.reference-image-preview-list { grid-template-columns: 1fr; } }
.video-source-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.video-source-tabs > label { cursor: pointer; }
.video-source-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.video-source-tabs span { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; min-height: 70px; padding: 12px 14px; border: 1px solid #343946; border-radius: 12px; background: #171a22; color: #eef0f4; }
.video-source-tabs i { grid-row: 1 / 3; color: #8f96a5; font-size: 25px; }
.video-source-tabs b { font-size: 12px; }
.video-source-tabs small { color: #7e8594; font-size: 10px; }
.video-source-tabs input:checked + span { border-color: #ff304f; background: rgba(255, 48, 79, .09); box-shadow: 0 0 0 3px rgba(255, 48, 79, .08); }
.video-source-tabs input:checked + span i { color: #ff304f; }
.video-source-panel { margin-top: 12px; }
.video-file-picker { position: relative; display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 14px 16px; border: 1px dashed #454b59; border-radius: 12px; background: #11141b; cursor: pointer; }
.video-file-picker:hover { border-color: #ff304f; background: rgba(255, 48, 79, .04); }
/* clip-path klemmt auch die eigene Schaltflaeche des Dateifeldes weg. Ohne
   sie ragt sie ueber den 1-Pixel-Rahmen hinaus und bleibt anklickbar -
   ein Klick daneben oeffnete dann die Dateiauswahl (11.09.2026). */
.video-file-picker input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.video-file-picker > i { color: #ff304f; font-size: 28px; }
.video-file-picker > span { display: grid; gap: 3px; }
.video-file-picker b { color: #f1f2f5; font-size: 12px; }
.video-file-picker small { color: #858c9a; font-size: 10px; }
.video-source-panel > input[type="url"] { width: 100%; }
.video-source-panel > small { display: block; margin-top: 7px; color: #747b89; }

.workspace-optional-fields { grid-column: 1 / -1; margin-top: 4px; border: 1px solid #303541; border-radius: 12px; background: #11141b; overflow: hidden; }

/* Aufklappen wie ein Akkordeon: Der Kasten waechst nach unten, statt
   schlagartig aufzuspringen. <details> laesst sich nicht direkt animieren -
   ueber ::details-content und interpolate-size geht es doch, weil der Browser
   damit von 0 auf die tatsaechliche Hoehe rechnen darf. Browser ohne diese
   Unterstuetzung klappen weiterhin sofort auf; kaputt ist dort nichts. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .workspace-optional-fields::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: .4;
    transition: block-size .34s cubic-bezier(.22,.61,.36,1), opacity .28s ease,
                content-visibility .34s allow-discrete;
  }
  .workspace-optional-fields[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-optional-fields::details-content { transition: none; }
}
.workspace-optional-fields > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 16px; color: #eef0f4; cursor: pointer; list-style: none; }
.workspace-optional-fields > summary::-webkit-details-marker { display: none; }
.workspace-optional-fields > summary > span { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; }
.workspace-optional-fields > summary > span > i { grid-row: 1 / 3; color: #ff304f; font-size: 20px; }
.workspace-optional-fields > summary b { font-size: 12px; }
.workspace-optional-fields > summary small { color: #7e8594; font-size: 10px; line-height: 1.45; }
.workspace-optional-fields > summary > i { color: #8f96a5; transition: transform .34s cubic-bezier(.22,.61,.36,1); }
.workspace-optional-fields[open] > summary > i { transform: rotate(180deg); }
.workspace-optional-fields[open] > summary { border-bottom: 1px solid #2b303b; }
.workspace-optional-fields-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; }

/* Kontext und Hinweise gehoeren inhaltlich zusammen. In der Transkription
   stehen sie deshalb als zwei gleichwertige Arbeitsflaechen nebeneinander,
   statt den Dialog mit zwei langen Vollbreiten-Zeilen zu strecken. */
.workspace-form[data-tool-id="media-transcription-shared"] .workspace-optional-fields-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.workspace-form[data-tool-id="media-transcription-shared"] .workspace-optional-fields-grid > .workspace-field:has(textarea) {
  grid-column: auto;
}
.workspace-form[data-tool-id="media-transcription-shared"] .workspace-optional-fields-grid textarea {
  min-height: 132px;
  max-height: 280px;
}
@media (max-width: 700px) {
  .workspace-form[data-tool-id="media-transcription-shared"] .workspace-optional-fields-grid {
    grid-template-columns: 1fr;
  }
}

/* Der Thumbnail-Assistent steht auf einer Seite. Die optionalen Angaben
   stehen deshalb zweispaltig - so wie im Dialog der Video-Uebersetzung -,
   sonst wird aus "eine Seite" eine sehr lange Seite. Textfelder bleiben
   ueber beide Spalten (.workspace-field:has(textarea)). */
[data-tool-id="thumbnail-banner-maker"] .workspace-optional-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 16px; }
[data-tool-id="thumbnail-banner-maker"] .workspace-field textarea { min-height: 76px; }

/* Ein Textfeld muss hier nicht ueber beide Spalten laufen: das Video-Thema
   steht links und reicht ueber zwei Zeilen, Text und Stil stehen rechts
   daneben. Das spart die halbe Hoehe der Seite. */
[data-tool-id="thumbnail-banner-maker"] .workspace-group-grid,
[data-tool-id="thumbnail-banner-maker"] .workspace-optional-fields-grid { align-items: start; }
[data-tool-id="thumbnail-banner-maker"] .workspace-field:has(textarea) { grid-column: auto; }
/* Die Referenzauswahl lief ueber beide Spalten (.reference-image-source oben).
   Im Thumbnail-Assistenten teilt sie sich die Zeile mit den Bildwuenschen. */
[data-tool-id="thumbnail-banner-maker"] .reference-image-source { grid-column: auto; }
[data-tool-id="thumbnail-banner-maker"] .workspace-group-grid > .workspace-field:has(textarea) { grid-column: 1; grid-row: span 2; }
[data-tool-id="thumbnail-banner-maker"] .workspace-group-grid > .workspace-field:has(textarea) textarea { min-height: 132px; }
@media (max-width: 700px) {
  [data-tool-id="thumbnail-banner-maker"] .workspace-group-grid > .workspace-field:has(textarea) { grid-column: 1 / -1; grid-row: auto; }
  [data-tool-id="thumbnail-banner-maker"] .workspace-field:has(textarea) { grid-column: 1 / -1; }
  [data-tool-id="thumbnail-banner-maker"] .reference-image-source { grid-column: 1 / -1; }
}
[data-tool-id="thumbnail-banner-maker"] .workspace-group-grid { gap: 12px 16px; padding: 14px 16px 16px; }
@media (max-width: 700px) {
  [data-tool-id="thumbnail-banner-maker"] .workspace-optional-fields-grid { grid-template-columns: 1fr; }
}
.workspace-project-context { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:12px 18px; align-items:end; grid-column:1/-1; margin:0 0 18px; padding:14px 16px; border:1px solid rgba(255,48,79,.25); border-radius:12px; background:rgba(255,48,79,.045); }
.workspace-project-context label { display:grid; gap:7px; color:#f1f2f5; font-size:12px; font-weight:700; }
.workspace-project-context label small { color:#ff526a; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.workspace-project-context [data-project-context-copy] { min-height:18px; color:#98a0b0; font-size:11px; line-height:1.45; }

.workspace-run-credit { margin-left:7px; opacity:.86; font-size:10px; font-weight:700; }
.wizard-primary.has-credit { position:relative; min-width:225px; overflow:visible; }
.wizard-primary.has-credit .workspace-run-credit { margin-left:3px; padding:5px 8px; background:rgba(87,16,33,.42); opacity:1; }
.wizard-primary.has-credit:hover .workspace-run-credit-popover,.wizard-primary.has-credit:focus-visible .workspace-run-credit-popover { display:grid; gap:6px; }
.credit-charge-confirmation { display:flex; align-items:center; gap:10px; max-width:720px; margin:0 auto 15px; padding:12px 14px; border:1px solid rgba(48,215,144,.35); border-radius:10px; background:rgba(48,215,144,.07); }
.credit-charge-confirmation > i { color:#35d89a; font-size:22px; }
.credit-charge-confirmation span { display:grid; gap:2px; }
.credit-charge-confirmation strong { color:#effff7; font-size:12px; }
.credit-charge-confirmation small { color:#a4b5ad; font-size:10px; }

@media (max-width: 620px) {
  .video-source-tabs,.workspace-project-context { grid-template-columns: 1fr; }
}

/* --- Video auswählen: kompakt, mit Standbild -----------------------------
   Der Aufnehmer war ein gestrichelter Kasten über die volle Breite, in dem
   nach der Auswahl nur der Dateiname stand. Jetzt eine schlichte Zeile ohne
   Rahmen, daneben ein Standbild aus dem gewählten Video - so sieht man
   sofort, ob es die richtige Datei ist. */
.video-file-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.video-file-row.has-video { display: block; }
.video-file-row.has-video .video-file-picker,
.video-file-row.has-video + small { display: none; }
/* Der Aufnehmer ist so breit wie sein Inhalt, nicht wie das Feld. Ein langer
   Dateiname wird gekuerzt statt den Kasten aufzublaehen. */
.video-file-row .video-file-picker {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 430px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #12151c;
}
.video-file-row .video-file-picker > span { min-width: 0; }
.video-file-row .video-file-picker b,
.video-file-row .video-file-picker small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-file-row .video-file-picker:hover { background: #171b24; }
.video-file-row .video-file-picker > i { color: #ff4965; font-size: 21px; }
.video-file-row .video-file-picker b { font-size: 12.5px; }
.video-file-row .video-file-picker small { font-size: 10.5px; }

.video-file-preview { display: block; width: 340px; margin: 0; }
.video-file-preview-media { position: relative; display: block; width: 100%; }
.video-file-preview img,
.video-file-preview video {
  display: block;
  width: 340px;
  height: 191px;
  border-radius: 12px;
  background: #0c0e13;
  object-fit: cover;
}
.video-file-preview figcaption {
  max-width: 340px;
  padding-top: 9px;
  overflow: hidden;
  color: #e6e9ef;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-file-discard,
.video-frame-transfer {
  position: absolute;
  display: grid;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.video-file-discard {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10,11,15,.78);
  font-size: 18px;
}
.video-file-discard:hover { border-color: #ff4965; background: rgba(255,48,79,.9); transform: scale(1.08); }
.video-frame-transfer {
  right: 12px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  border-color: rgba(255,73,101,.68);
  border-radius: 16px 19px 14px 18px;
  background: linear-gradient(145deg,rgba(255,48,79,.92),rgba(163,20,58,.9));
  box-shadow: 0 8px 24px rgba(255,48,79,.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) rotate(-2deg);
}
.video-file-preview.ready .video-frame-transfer { opacity: 1; pointer-events: auto; transform: rotate(-2deg); }
.video-frame-transfer:hover { border-color: #fff; box-shadow: 0 11px 30px rgba(255,48,79,.42); transform: translateY(-2px) rotate(2deg) scale(1.05); }
.video-frame-transfer svg,
.youtube-frame-dialog header svg {
  width: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
/* Solange das Standbild gesucht wird, steht dort ein ruhiger Platzhalter -
   kein Springen, wenn das Bild ankommt. */
.video-file-preview.laedt img {
  background: repeating-linear-gradient(115deg, #14171f 0 10px, #191d26 10px 20px);
}

@media (max-width: 640px) {
  .video-file-row { grid-template-columns: minmax(0, 1fr); }
  .video-file-preview, .video-file-preview img, .video-file-preview video { width: 100%; }
  .video-file-preview img, .video-file-preview video { height: 170px; }
  .video-file-preview figcaption { max-width: 100%; }
}

/* Frame-Auswahl: ein lokales Videobild wird direkt zum Thumbnail. */
.youtube-frame-dialog {
  width: min(760px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #373c48;
  border-radius: 16px;
  background: #111319;
  color: #f4f5f8;
  box-shadow: 0 34px 90px rgba(0,0,0,.72);
}
.youtube-frame-dialog::backdrop { background: rgba(3,4,8,.8); backdrop-filter: blur(8px); }
.youtube-frame-dialog > section { display: grid; }
.youtube-frame-dialog header { display: flex; align-items: center; gap: 12px; padding: 17px 19px; border-bottom: 1px solid #2b2f38; }
.youtube-frame-dialog header > span { display: grid; width: 42px; height: 42px; border-radius: 14px 17px 13px 16px; background: linear-gradient(145deg,#ff304f,#a71541); color: #fff; place-items: center; transform: rotate(-2deg); }
.youtube-frame-dialog header > div { display: grid; flex: 1; gap: 2px; }
.youtube-frame-dialog header small { color: #ff5872; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.youtube-frame-dialog header h3 { margin: 0; font: 700 18px/1.2 'Space Grotesk',sans-serif; }
.youtube-frame-dialog header > button { display: grid; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #9da3af; place-items: center; cursor: pointer; }
.youtube-frame-dialog header > button:hover { background: #252932; color: #fff; }
.youtube-frame-stage { position: relative; margin: 18px 18px 0; overflow: hidden; border-radius: 12px; background: #08090c; aspect-ratio: 16/9; }
.youtube-frame-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.youtube-frame-stage > span { position: absolute; inset: 0; display: grid; color: #ff4965; font-size: 28px; place-items: center; }
.youtube-frame-stage > span[hidden] { display: none; }
.youtube-frame-timeline { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px 19px 8px; }
.youtube-frame-timeline input { width: 100%; accent-color: #ff304f; cursor: ew-resize; }
.youtube-frame-timeline output { min-width: 94px; color: #9ba2b0; font-size: 10.5px; text-align: right; }
.youtube-frame-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 19px 19px; }
.youtube-frame-dialog footer p { max-width: 390px; margin: 0; color: #8f96a4; font-size: 10.5px; }
.youtube-frame-dialog footer button { flex: none; }
@media (max-width: 560px) {
  .youtube-frame-dialog footer { align-items: stretch; flex-direction: column; }
  .youtube-frame-dialog footer button { justify-content: center; }
}

/* --- Datums- und Zeitfelder in dunkler Darstellung -----------------------
   Der Kalender, den der Browser zu <input type="datetime-local"> aufklappt,
   ist ein Systemelement - er lässt sich nicht gestalten, folgt aber
   color-scheme. Ohne diese Zeile erscheint er weiß mitten in der dunklen
   Oberfläche. Am 24.08.2026 im YouTube-Publisher gemeldet. */
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"] { color-scheme: dark; }

/* Das Kalendersymbol im Feld ist von Haus aus dunkelgrau und auf dunklem
   Grund kaum zu sehen. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.75);
  opacity: .75;
  transition: opacity .15s;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- Ideen-Generator: Thema und Anzahl nebeneinander, 26.08.2026 --------
   Das Formular ist ein Zweispaltenraster, aber jedes Feld mit einem
   Textbereich spannt beide Spalten (.workspace-field:has(textarea)). Beim
   Ideen-Generator sind vier der fünf Felder Textbereiche - das Ergebnis war
   eine einspaltige Liste, an deren Ende die kleinste Angabe stand.

   Themenfokus und Anzahl gehören zusammen: worüber, und wie viele. Sie stehen
   deshalb oben nebeneinander. Formate und Ziel der Ideen behalten die volle
   Breite - sie tragen eine Auswahlkette bzw. ganze Saetze, die umbrechen
   muessen.

   Beide Umgebungen: die Werkzeugseite (#workspace-body) UND das
   Produktionsfenster (.generic-tool-modal). Eine allein zu bedienen hiesse,
   die Hälfte der Aufrufe unverändert zu lassen. */
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TOPIC_FOCUS"],
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TOPIC_FOCUS"] {
  grid-column: 1;
}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="IDEA_COUNT"],
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="IDEA_COUNT"] {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

/* Neben der Anzahl blieb unter dem hohen Themenfeld eine leere Flaeche.
   Die Videolaenge (TARGET_PLATFORMS: Longform / Shorts) rueckt dort hinein -
   zwei Kaestchen, die in eine halbe Breite passen. Zeile 2 der zweiten
   Spalte, direkt unter der Anzahl. */
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TARGET_PLATFORMS"],
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TARGET_PLATFORMS"] {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
#workspace-body[data-tool="creator-content-ideas-generator"] [data-config-field="TOPIC_FOCUS"],
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] [data-config-field="TOPIC_FOCUS"] {
  grid-row: 1 / span 2;
}

/* Unter 700px hat das Raster nur noch eine Spalte. Die feste Spaltenangabe
   oben würde die Anzahl sonst in eine Spalte schicken, die es nicht gibt. */
@media (max-width: 700px) {
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="IDEA_COUNT"],
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="IDEA_COUNT"],
  #workspace-body[data-tool="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TARGET_PLATFORMS"],
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-group-grid > [data-config-field="TARGET_PLATFORMS"],
  #workspace-body[data-tool="creator-content-ideas-generator"] [data-config-field="TOPIC_FOCUS"],
  .generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] [data-config-field="TOPIC_FOCUS"] {
    grid-column: 1;
    grid-row: auto;
  }
}