/* Aufbau statt Spinner. Farben, Typografie und Übergänge aus dem Sharpflix-M3-System. */
.translate-prep {
  --prep-cycle: calc(var(--md-sys-motion-duration-extra-long4, 1000ms) * 6);
  display: grid;
  grid-template-columns: minmax(200px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: 24px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  container-type: inline-size;
}
.translate-prep, .translate-prep * { box-sizing: border-box; }
.translate-prep:not(.translate-prep--compact) { display: flex; flex-wrap: wrap; }
.translate-prep:not(.translate-prep--compact) > .translate-prep__visual { flex: 1 1 220px; }
.translate-prep:not(.translate-prep--compact) > .translate-prep__content { flex: 1 1 320px; }
.translate-prep__visual { min-width: 0; overflow: hidden; }
.translate-prep__scene { display: block; width: 100%; height: auto; max-height: 224px; overflow: visible; }
.translate-prep__ground { fill: var(--md-sys-color-surface-container); }
.translate-prep__guide { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; opacity: .45; }
.translate-prep__route { stroke: var(--md-sys-color-outline); stroke-width: 2; stroke-linejoin: round; }
.translate-prep__signal { stroke: var(--md-sys-color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 95; opacity: 0; }
.translate-prep[data-allocated="true"] .translate-prep__signal { opacity: 1; animation: translate-prep-signal var(--prep-cycle) linear infinite; }
.translate-prep__foot { fill: var(--md-sys-color-surface-container-highest); }
.translate-prep__side { fill: var(--md-sys-color-outline-variant); }
.translate-prep__base { fill: var(--md-sys-color-surface-container-highest); }
.translate-prep__edge { fill: var(--md-sys-color-secondary-container); }
.translate-prep__top { fill: var(--md-sys-color-surface-container-highest); stroke: var(--md-sys-color-outline); stroke-width: 1; stroke-linejoin: round; }
.translate-prep__mark { stroke: var(--md-sys-color-on-surface-variant); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.translate-prep__seam { stroke: var(--md-sys-color-outline); stroke-width: 2; stroke-linecap: round; }
.translate-prep__top, .translate-prep__mark, .translate-prep__seam { transition: fill var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), stroke var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); }
.translate-prep__build { transform: translateY(-12px); opacity: .55; transition: transform var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized-decelerate), opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard); }
.translate-prep__module[data-state="working"] .translate-prep__build { animation: translate-prep-build var(--prep-cycle) var(--md-sys-motion-easing-emphasized) infinite; }
.translate-prep__module[data-module="stt"] .translate-prep__build { animation-delay: calc(var(--md-sys-motion-duration-long4) * -1); }
.translate-prep__module[data-module="translation"] .translate-prep__build { animation-delay: calc(var(--md-sys-motion-duration-long4) * -2); }
.translate-prep__module[data-state="working"] .translate-prep__top { fill: var(--md-sys-color-secondary-container); stroke: var(--md-sys-color-secondary); }
.translate-prep__module[data-state="working"] .translate-prep__mark { stroke: var(--md-sys-color-on-secondary-container); }
.translate-prep__module[data-state="done"] .translate-prep__build { transform: translateY(0); opacity: 1; }
.translate-prep__module[data-state="done"] .translate-prep__top { fill: var(--md-sys-color-primary-container); stroke: var(--md-sys-color-primary); }
.translate-prep__module[data-state="done"] .translate-prep__mark { stroke: var(--md-sys-color-on-primary-container); }
.translate-prep__module[data-state="done"] .translate-prep__seam { stroke: var(--md-sys-color-primary); }
.translate-prep__content { min-width: 0; }
.translate-prep__title { margin: 0; font: var(--md-sys-typescale-title-large); text-wrap: balance; }
.translate-prep__description { margin: 8px 0 0; min-height: 80px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.translate-prep__steps { display: grid; gap: 12px; list-style: none; padding: 0; margin: 24px 0 16px; }
.translate-prep__step { display: flex; align-items: center; gap: 12px; min-width: 0; }
.translate-prep__step > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; flex: 1; }
.translate-prep__step-marker { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-medium); }
.translate-prep__step-name { font: var(--md-sys-typescale-label-large); }
.translate-prep__step-detail { margin-left: auto; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
.translate-prep__check { display: none; font-size: 18px; }
.translate-prep__step[data-state="working"] .translate-prep__step-marker { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.translate-prep__step[data-state="done"] .translate-prep__step-marker { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.translate-prep__step[data-state="done"] .translate-prep__number { display: none; }
.translate-prep__step[data-state="done"] .translate-prep__check { display: block; }
.translate-prep__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 44px; }
.translate-prep__elapsed { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.translate-prep .translate-prep__pause { color: var(--md-sys-color-on-surface-variant); min-height: 44px; height: auto; padding: 8px 12px; margin-right: -12px; font: var(--md-sys-typescale-label-medium); }
.translate-prep__pause:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.translate-prep__pause[aria-disabled="true"] { visibility: hidden; pointer-events: none; }
.translate-prep__pause[aria-disabled="true"]:focus { visibility: visible; opacity: .38; }
.translate-prep__notice { margin: 8px 0 0; min-height: 40px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.translate-prep[data-notice="offline"] .translate-prep__notice { color: var(--md-sys-color-on-surface); font-weight: 500; }
.translate-prep__security { flex: 1 0 100%; grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.translate-prep__security-icon { flex: 0 0 20px; margin-top: 2px; font-size: 20px; color: var(--md-sys-color-on-surface-variant); }
.translate-prep__security-content { min-width: 0; flex: 1; }
.translate-prep__security-title { margin: 0; font: var(--md-sys-typescale-title-small); }
.translate-prep__security-text { margin: 4px 0 0; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.translate-prep__more { margin-top: 8px; }
.translate-prep__more-summary { width: fit-content; max-width: 100%; padding: 12px 0; min-height: 44px; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-label-medium); cursor: pointer; border-radius: var(--md-sys-shape-corner-extra-small); }
.translate-prep__more-summary:hover { color: var(--md-sys-color-primary); }
.translate-prep__more-summary:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.translate-prep__more-body { display: grid; gap: 16px; margin: 4px 0 8px; max-width: 64ch; }
.translate-prep__more-body dt { margin: 0 0 4px; font: var(--md-sys-typescale-label-medium); }
.translate-prep__more-body dd { margin: 0; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.translate-prep__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.translate-prep[data-status="offline"] .translate-prep__build,
.translate-prep[data-status="offline"] .translate-prep__signal,
.translate-prep[data-paused="true"] .translate-prep__build,
.translate-prep[data-paused="true"] .translate-prep__signal { animation-play-state: paused; }
.translate-prep[data-status="ready"] .translate-prep__signal { animation: none; stroke-dasharray: none; opacity: 1; transition: opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard); }
.translate-prep[data-status="ready"] .translate-prep__build { animation: none; }
@keyframes translate-prep-build {
  0%, 10%, 100% { transform: translateY(-18px); opacity: .55; }
  28%, 72% { transform: translateY(0); opacity: 1; }
  88% { transform: translateY(-18px); opacity: .55; }
}
@keyframes translate-prep-signal { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }

/* Kompakt bleibt bei Statuswechseln gleich hoch und passt auch in die Regieseitenleiste. */
.translate-prep--compact { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
.translate-prep--compact .translate-prep__visual { height: 136px; }
.translate-prep--compact .translate-prep__scene { height: 136px; width: 100%; }
.translate-prep--compact .translate-prep__title { font: var(--md-sys-typescale-title-medium); }
.translate-prep--compact .translate-prep__description { min-height: 100px; }
.translate-prep--compact .translate-prep__steps { margin: 16px 0 8px; gap: 8px; }
.translate-prep--compact .translate-prep__notice { min-height: 48px; }
.translate-prep--compact .translate-prep__security { margin-top: 8px; padding-top: 16px; }
@media (max-width: 767px) {
  .translate-prep { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .translate-prep__visual { max-width: 400px; width: 100%; justify-self: center; }
  .translate-prep__scene { max-height: 180px; }
  .translate-prep--compact { gap: 8px; padding: 16px; }
}
@container (max-width: 420px) {
  .translate-prep__step > div { display: block; }
  .translate-prep__step-detail { display: block; margin-top: 2px; }
  .translate-prep__steps { gap: 12px; }
  .translate-prep__footer { align-items: center; }
  .translate-prep__pause-label { display: none; }
  .translate-prep .translate-prep__pause { width: 44px; padding: 10px; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .translate-prep[data-status] *, .translate-prep[data-status] *::before, .translate-prep[data-status] *::after { transition: none; }
  .translate-prep[data-status] .translate-prep__module[data-state] .translate-prep__build,
  .translate-prep[data-status] .translate-prep__signal { animation: none; }
  .translate-prep[data-status] .translate-prep__build { transform: translateY(0); }
  .translate-prep[data-status] .translate-prep__signal { stroke-dasharray: none; }
  .translate-prep__pause { visibility: hidden; pointer-events: none; }
}