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

/* Changelog
 *
 * 11.09.2026 - Rubriken im Creator-Profil
 *   Neu   .profile-settings/.profile-nav/.profile-panes/.profile-pane:
 *         Liste links, eine Rubrik rechts - wie die Studio-Einstellungen.
 *
 * 11.09.2026 - Stimmprobe im Creator-Profil
 *   Neu   .creator-voice-*: Player, Einwilligung und Knoepfe der
 *         Stimmprobe fuer das Voicecloning.
 *
 * 24.08.2026 - Creator-Profil
 *   Neu   Logofeld: das Bild selbst waehlt die Datei, ein Kreuz in seiner
 *         Ecke loest die Zuordnung (.creator-logo-slot/-preview/-drop).
 *   Fix   Rueckmeldung nach dem Speichern ist gruen statt rot und traegt
 *         Symbol, Ueberschrift und Erklaerung; leer ist sie unsichtbar.
 *   Clean Cleaning-Kopf ergaenzt - die Datei hatte noch keinen.
 */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 35, 71, .25);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 35, 71, .11), rgba(255, 35, 71, .02));
}

@media (max-width: 1000px) {
  .creator-connections { gap: 0; border-top: 1px solid #2a2e39; }
  .profile-panes .creator-youtube-card,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card {
    min-height: 0;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #2a2e39;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

.profile-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 35, 71, .16);
  color: #ff4966;
  font-size: 26px;
}

.profile-hero div {
  display: grid;
  gap: 5px;
}

.profile-hero strong {
  font: 600 17px 'Space Grotesk';
}

.profile-hero p {
  margin: 0;
  color: #8e94a3;
  font-size: 12px;
  line-height: 1.5;
}

.creator-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  padding-bottom: 88px;
}

.creator-youtube-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid #30333e;
  border-radius: 14px;
  background: #111219;
}

.youtube-channel-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: #ff2347;
  color: #fff;
  font-size: 25px;
}

.youtube-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.youtube-channel-avatar.disconnected { background: rgba(255,35,71,.13); color: #ff4966; }
.youtube-channel-copy { display: grid; min-width: 0; gap: 3px; }
.youtube-channel-copy small { color: #ff4966; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.youtube-channel-copy strong { color: #f6f7f9; font-size: 14px; }
.youtube-channel-copy span { color: #7f8593; font-size: 11px; line-height: 1.4; }
.youtube-channel-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.youtube-connect,
.youtube-secondary,
.youtube-danger { min-height: 38px; padding: 0 14px; border: 1px solid #343743; border-radius: 9px; background: #1a1c24; color: #f6f7f9; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.youtube-connect { margin-left: auto; border-color: #ff2347; background: #ff2347; color: #fff; }
.youtube-danger { color: #ff7087; }
.youtube-connect:disabled,.youtube-secondary:disabled,.youtube-danger:disabled { opacity: .55; cursor: wait; }

.profile-field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.profile-field-wide {
  grid-column: 1 / -1;
}

.profile-field label {
  color: #e1e3e8;
  font-size: 12px;
  font-weight: 800;
}

.profile-field input,
.profile-field textarea,
.profile-field select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #30333e;
  border-radius: 10px;
  outline: 0;
  background: #181a22;
  color: #f6f7f9;
  font: inherit;
}

.profile-field textarea {
  min-height: 105px;
  resize: vertical;
}

.profile-field input:focus,
.profile-field textarea:focus,
.profile-field select:focus {
  border-color: #ff2347;
  box-shadow: 0 0 0 3px rgba(255, 35, 71, .1);
}

.profile-field small {
  color: #737988;
  font-size: 11px;
  line-height: 1.4;
}

.profile-feedback {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
}

.profile-feedback.success,
.profile-feedback.error {
  display: flex;
  animation: profile-feedback-in .22s ease;
}

.profile-feedback.success {
  border-color: rgba(78, 219, 153, .3);
  background: rgba(78, 219, 153, .08);
  color: #4edb99;
}

.profile-feedback.error {
  border-color: rgba(255, 113, 136, .32);
  background: rgba(255, 48, 79, .08);
  color: #ff8a9c;
}

.profile-feedback i { flex: none; font-size: 20px; }
.profile-feedback b { display: block; color: #f2f4f8; font-size: 12.5px; }
.profile-feedback small { display: block; margin-top: 2px; color: #99a1b0; font-size: 11px; }

@keyframes profile-feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.profile-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 17px 30px;
  border-top: 1px solid #292b35;
  background: rgba(13, 14, 20, .97);
  backdrop-filter: blur(14px);
}

.profile-actions .workspace-run {
  width: auto;
  min-width: 175px;
}

.workspace-profile-note {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  margin: -8px 0 18px;
  border: 1px solid #2c2f39;
  border-radius: 11px;
  background: #111219;
  color: #dfe1e6;
  text-align: left;
  cursor: pointer;
}

.workspace-profile-note > i {
  color: #ff4966;
  font-size: 22px;
}

.workspace-profile-note span {
  display: grid;
  gap: 2px;
}

.workspace-profile-note small {
  color: #737988;
  font-size: 10px;
}

.workspace-profile-note strong {
  font-size: 12px;
}

.workspace-profile-note em {
  margin-left: auto;
  color: #ff6179;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.workspace-profile-note:hover {
  border-color: rgba(255, 35, 71, .42);
  background: rgba(255, 35, 71, .055);
}

.profile-mobile-back { display: none; }

@media (max-width: 700px) {
  .creator-youtube-card { align-items: flex-start; flex-wrap: wrap; }
  .youtube-channel-actions,.youtube-connect { width: 100%; margin-left: 0; }
  .creator-profile-form {
    grid-template-columns: 1fr;
  }

  .profile-field,
  .profile-field-wide {
    grid-column: 1;
  }

  .profile-actions {
    padding: 13px 18px;
  }
}

/* Profile is a settings form, so keep its page footprint dense and scannable. */
body.factory-page-active .workspace-panel:has(.creator-profile-form) .workspace-header{min-height:68px;padding:14px clamp(24px,3vw,48px)}
body.factory-page-active .workspace-panel:has(.creator-profile-form) .workspace-header h2{font-size:22px;margin-top:3px}
body.factory-page-active #workspace-body:has(> .profile-hero){width:min(1180px,100%);padding:22px clamp(24px,3vw,48px) 42px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero{gap:12px;padding:12px 15px;margin-bottom:14px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero-icon{flex-basis:40px;width:40px;height:40px;font-size:22px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero strong{font-size:15px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero p{font-size:11px}
body.factory-page-active #workspace-body:has(> .profile-hero) .creator-youtube-card{min-height:64px;margin-bottom:14px;padding:10px 14px}
body.factory-page-active #workspace-body:has(> .profile-hero) .youtube-channel-avatar{flex-basis:40px;width:40px;height:40px;font-size:21px}
body.factory-page-active #workspace-body:has(> .profile-hero) .youtube-channel-copy span{font-size:10px}
body.factory-page-active #workspace-body:has(> .profile-hero) .creator-profile-form{gap:12px 16px;padding-bottom:48px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field{gap:5px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field input,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field select{min-height:40px;padding:9px 11px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea{min-height:78px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field input.is-profile-example-animating::placeholder,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea.is-profile-example-animating::placeholder{color:var(--text-muted,#8d93a8);opacity:.72}
@media (min-width:701px){
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field-wide{grid-column:auto}
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea{min-height:72px}
}

/* Dense creator profile grid: keep the common market/language fields on one row. */
@media (min-width:1000px){
  body.factory-page-active #workspace-body:has(> .profile-hero) .creator-profile-form{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 12px}
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field-wide{grid-column:span 2}
}
@media (min-width:701px) and (max-width:999px){
  body.factory-page-active #workspace-body:has(> .profile-hero) .creator-profile-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field-wide{grid-column:span 2}
}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field label{font-size:10px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field small{font-size:9px;line-height:1.25}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field input,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field select{font-size:13px;padding:7px 9px;min-height:34px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea{min-height:60px}
@media (max-width:700px){
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field-wide{grid-column:1}
}

/* Keep the profile itself narrow and centered inside the full-width workspace. */
body.factory-page-active #workspace-body:has(#creator-profile-form){
  width:min(1120px,calc(100% - 32px)) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:14px 0 32px !important;
}
body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-profile-form{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;padding-bottom:36px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field-wide{grid-column:span 2}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-hero{margin-bottom:10px;padding:10px 13px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card{margin:0;padding:8px 12px;min-height:56px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field{gap:4px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field input,
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field textarea,
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field select{font-size:12px;min-height:32px;padding:6px 8px;border-radius:8px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field textarea{min-height:54px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field label{font-size:9px}
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field small{font-size:8px}
@media (max-width:999px){
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-profile-form{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  body.factory-page-active #workspace-body:has(#creator-profile-form){width:calc(100% - 32px) !important}
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-profile-form{grid-template-columns:1fr}
  body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-field-wide{grid-column:1}
}

/* Align the compact form with the workspace content edge instead of floating it centrally. */
@media (min-width:701px){
  body.factory-page-active #workspace-body:has(#creator-profile-form){
    width:min(1120px,calc(100% - 72px)) !important;
    margin-left:36px !important;
    margin-right:auto !important;
  }
}

/* Open the creator profile as a focused modal instead of a full-page takeover. */
body.profile-modal-open .factory-workspace.open{
  position:fixed!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px clamp(12px,4vw,64px)!important;background:transparent!important;
}
body.profile-modal-open .factory-workspace.open .workspace-backdrop{
  display:block!important;position:absolute!important;inset:0!important;background:rgba(2,3,6,.76)!important;backdrop-filter:blur(14px)!important;
}
body.profile-modal-open .factory-workspace.open .workspace-panel{
  position:relative!important;inset:auto!important;width:min(1040px,100%)!important;height:auto!important;max-height:calc(100vh - 48px)!important;margin:0 auto!important;overflow-y:auto!important;overflow-x:hidden!important;border:0!important;outline:0!important;border-radius:20px!important;background:linear-gradient(145deg,#10131c 0%,#0b0d13 58%,#090b10 100%)!important;box-shadow:0 30px 110px rgba(0,0,0,.72)!important;animation:profile-modal-in .22s ease both!important;
}
body.profile-modal-open .factory-workspace.open .workspace-close{display:none!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form){width:min(980px,calc(100% - 44px))!important;max-width:none!important;margin:0 auto!important;padding:12px 0 18px!important}
/* Profile modal: keep the form balanced instead of inheriting the dense four-column studio grid. */
body.profile-modal-open .factory-workspace.open .workspace-panel:has(#creator-profile-form){width:min(1040px,100%)!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .creator-profile-form{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px 16px!important;
  padding-bottom:16px!important;
}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field-wide{grid-column:span 1!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field:has([name="CALL_TO_ACTION"]){grid-column:1 / -1!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field textarea{min-height:62px!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field label{font-size:10px!important}
body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field small{font-size:9px!important}
body.profile-modal-open .factory-workspace.open .workspace-header{padding:18px 28px!important;min-height:70px!important}
body.profile-modal-open .factory-workspace.open .workspace-header h2{font-size:22px!important}
@media(max-width:700px){
  body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .creator-profile-form{grid-template-columns:1fr!important}
  body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field-wide,
  body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form) .profile-field:has([name="CALL_TO_ACTION"]){grid-column:1!important}
}
@keyframes profile-modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:700px){body.profile-modal-open .factory-workspace.open{padding:8px!important}body.profile-modal-open .factory-workspace.open .workspace-panel{max-height:calc(100vh - 16px)!important;border-radius:14px!important}body.profile-modal-open .factory-workspace.open #workspace-body:has(#creator-profile-form){width:calc(100% - 28px)!important}}
/* Transcription results already provide their download actions; a second production CTA is unnecessary. */
.transcription-finished .result-secondary-actions{display:none!important}
.transcription-finished .transcription-source-player.is-video{grid-template-columns:minmax(180px,.42fr) minmax(0,1.58fr)!important;gap:16px!important;padding:14px 16px!important}
.transcription-finished .transcription-source-player video{max-height:320px!important;border-radius:10px!important}
.transcription-finished .transcription-overview{margin:12px 0!important;padding:14px 16px!important}
.transcription-finished .transcription-overview p{font-size:12px!important;line-height:1.55!important}

/* Logo des Creators: einmal hinterlegt, im Bildeditor nur noch angehakt. */
.creator-logo-box { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.creator-logo-slot { position: relative; display: inline-block; flex: none; }
.creator-logo-preview {
  display: grid;
  place-items: center;
  width: 128px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px dashed #3a3f4d;
  border-radius: 10px;
  background: #12151d;
  color: #59616f;
  font-size: 26px;
  cursor: pointer;
  transition: border-color .16s ease;
}
.creator-logo-preview:hover,
.creator-logo-preview:focus-visible { border-color: #ff304f; }
.creator-logo-preview > * { grid-area: 1 / 1; }
.creator-logo-preview img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.creator-logo-preview img:not([hidden]) ~ i { display: none; }
.creator-logo-overlay {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(6, 8, 13, .62);
  color: #fff;
  font-size: 21px;
}
.creator-logo-preview:hover .creator-logo-overlay,
.creator-logo-preview:focus-visible .creator-logo-overlay { display: grid; }
.creator-logo-drop {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #3a3f4d;
  border-radius: 50%;
  background: #1b1f28;
  color: #c6ccd8;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.creator-logo-drop:hover { border-color: #ff304f; background: #241520; color: #ff5470; }
.creator-logo-drop[hidden] { display: none; }
.creator-logo-box small { max-width: 260px; color: #8e95a4; font-size: 11px; line-height: 1.45; }

/* Stimmprobe fuer das Voicecloning: einmal hinterlegt, in Text to Speech der Standard. */
.creator-voice-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px dashed #3a3f4d; border-radius: 10px; background: #12151d; }
.creator-voice-box audio { width: 100%; max-width: 420px; height: 36px; }
.creator-voice-box audio[hidden], .creator-voice-meta[hidden], .creator-voice-actions [hidden] { display: none; }
.creator-voice-meta { color: #c6ccd8; font-size: 12px; }
.creator-voice-consent { display: flex; align-items: center; gap: 8px; color: #c6ccd8; font-size: 13px; cursor: pointer; }
.creator-voice-consent input { width: 16px; height: 16px; margin: 0; accent-color: #ff304f; }
.creator-voice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-voice-box small { color: #8e95a4; font-size: 11px; line-height: 1.45; }

/* Rubriken wie in den Studio-Einstellungen: Liste links, eine Rubrik rechts.
   Das Formular bleibt eines; versteckte Rubriken fahren beim Speichern mit. */
.profile-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid #30333e; border-radius: 14px; background: #111219; overflow: hidden; }
.profile-nav { display: grid; align-content: start; gap: 2px; padding: 10px; border-right: 1px solid #262a35; background: #0e1016; }
.profile-nav button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: #aab1c0; font: 600 13px/1.25 'DM Sans', Arial, sans-serif; text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.profile-nav button i { flex: none; width: 18px; font-size: 17px; color: #6f7788; text-align: center; }
.profile-nav button:hover { background: #171a23; color: #fff; }
.profile-nav button.active { background: #1e222c; color: #fff; }
.profile-nav button.active i { color: #ff304f; }
/* Feste Mindesthoehe: die Box soll beim Rubrikwechsel nicht springen. Die
   Knopfleiste sitzt unten, egal wie viele Felder die Rubrik hat. */
.profile-panes { display: flex; flex-direction: column; min-width: 0; min-height: 440px; padding: 16px 18px 14px; }
.profile-panes .creator-profile-form { display: flex; flex-direction: column; flex: 1 1 auto; }
.profile-panes .profile-actions { margin-top: auto; }
.profile-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.profile-pane[hidden], .creator-profile-form[hidden] { display: none; }
.creator-connections { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 10px; min-width: 0; }
.creator-connections:has(details[open]) { grid-auto-rows: auto; }
.creator-social-connections, .creator-social-list { display: contents; }
.creator-social-card { min-width: 0; overflow-wrap: anywhere; }
.creator-social-card .youtube-channel-copy { flex: 1; }
.creator-social-card details, .creator-social-card li, .creator-social-connections p { color: #7f8593; font-size: 11px; line-height: 1.4; }
.creator-social-card summary { cursor: pointer; }
.creator-social-card ul { padding-left: 18px; }
.creator-social-card button:disabled { cursor: not-allowed; }
.creator-social-connections [data-social-feedback]:empty { display: none; }
.profile-panes .creator-youtube-card, .profile-panes .profile-security { grid-column: 1 / -1; margin: 0; }
.profile-panes .profile-field-wide { grid-column: 1 / -1; }
/* Die aelteren, sehr spezifischen Regeln machen das Formular selbst zum
   Feldraster - hier ist das Raster die Rubrik, das Formular nur der Rahmen. */
body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-profile-form { display: flex; flex-direction: column; flex: 1 1 auto; padding-bottom: 0; }
body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-profile-form[hidden] { display: none; }
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-pane .profile-field-wide { grid-column: 1 / -1; }
body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-actions { margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid #262a35; }
@media (max-width: 760px) {
  .profile-settings { grid-template-columns: 1fr; }
  .profile-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid #262a35; scrollbar-width: thin; }
  .profile-nav button { width: auto; white-space: nowrap; }
  .profile-pane { grid-template-columns: 1fr; }
  .profile-panes { min-height: 0; }
  .profile-panes .profile-field-wide { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   Creator-Profil auf dem Telefon.
   Gemeldet am 13.09.2026: "sieht auf der Mobilansicht scheisse aus".
   Gemessen bei 390 px waren es drei Dinge:

   1. Von acht Rubriken waren zweieinhalb zu sehen. Die Leiste ist 1070 px
      breit und lief stumm nach rechts hinaus - ohne Hinweis, dass da noch
      etwas kommt, und ohne den aktiven Reiter in den Blick zu holen.
   2. Von 390 px Bildschirm kamen nur 308 px bei der Karte an: Panel,
      Rubrikflaeche und Karte haben ihren Rand jeweils doppelt gezaehlt.
   3. Die Karten waren 174 px hoch, weil das Rundbild allein in der ersten
      Zeile stand (flex-wrap) und Text und Knoepfe darunter rutschten.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Mehr Breite fuer den Inhalt: die Raender werden einmal gezaehlt, nicht dreimal. */
  body.factory-page-active #workspace-body:has(> .profile-hero),
  body.factory-page-active #workspace-body:has(#creator-profile-form) {
    width: calc(100% - 20px) !important;
    padding: 12px 0 24px !important;
  }
  .profile-panes { padding: 12px 11px 11px; }

  /* Der Hero sagt dasselbe in kleiner. */
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-hero { gap: 10px; margin-bottom: 10px; padding: 10px 12px; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 17px; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero strong { font-size: 13px; line-height: 1.3; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero p { font-size: 10px; line-height: 1.45; }

  /* Die Verbindungskarten bleiben mobil in einer kompakten Zeile. */
  .profile-panes .creator-youtube-card,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar copy actions";
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .creator-youtube-card .youtube-channel-avatar { grid-area: avatar; flex-basis: 34px; width: 34px; height: 34px; font-size: 18px; }
  .creator-youtube-card .youtube-channel-copy { grid-area: copy; gap: 2px; }
  .creator-youtube-card .youtube-channel-copy small { font-size: 8px; letter-spacing: .1em; }
  .creator-youtube-card .youtube-channel-copy strong { font-size: 12px; }
  .creator-youtube-card .youtube-channel-copy span { display: -webkit-box; overflow: hidden; font-size: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .creator-youtube-card .youtube-channel-actions {
    grid-area: actions;
    display: flex;
    gap: 5px;
    width: auto;
    margin-left: 0;
  }
  .creator-youtube-card .youtube-channel-actions > * { width: auto; min-height: 32px; padding: 0 8px; font-size: 10px; }
  .creator-youtube-card .youtube-connect { grid-area: actions; min-height: 32px; margin-left: 0; padding: 0 9px; font-size: 10px; }
  .creator-social-card .youtube-channel-copy details { margin-top: 4px; font-size: 10px; }

  /* Der Pfeil des Auswahlfelds stand sonst auf dem letzten Wort. */
  .profile-pane .profile-field select { padding-right: 30px; }

  /* Stimmprobe: die beiden Knoepfe waren unterschiedlich breit und sahen
     ausgefranst aus. Nebeneinander, gleich breit - und allein ueber die
     ganze Zeile, solange noch keine Aufnahme da ist. */
  .creator-voice-box { padding: 11px 12px; }
  .creator-voice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .creator-voice-actions > button { width: 100%; min-height: 40px; justify-content: center; }
  .creator-voice-actions > button[hidden] { display: none; }
  .creator-voice-actions > button:only-of-type,
  .creator-voice-actions > button:has(~ button[hidden]) { grid-column: 1 / -1; }

  /* Abbrechen und Speichern teilen sich die Zeile. */
  .profile-panes .profile-actions,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 9px;
  }
  .profile-actions > * { width: 100%; min-height: 44px; }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .creator-connections { gap: 8px; }
  .profile-panes .creator-youtube-card,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card { min-height: 56px; padding: 8px 10px; gap: 10px; }
  .creator-youtube-card .youtube-channel-avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 19px; }
  .creator-youtube-card .youtube-channel-copy { gap: 2px; }
  .creator-youtube-card .youtube-channel-copy small { font-size: 8px; }
  .creator-youtube-card .youtube-channel-copy strong { font-size: 12px; }
  .creator-youtube-card .youtube-channel-copy span { display: -webkit-box; overflow: hidden; font-size: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .creator-youtube-card .youtube-channel-actions > *, .creator-youtube-card .youtube-connect { min-height: 32px; padding: 0 10px; font-size: 10px; }
}

/* Bereichswahl auf schmalen Bildschirmen: eine Liste, die hineinfuehrt.

   Drei Fassungen davor waren falsch. Seitlich scrollende Reiter versteckten,
   dass es weitergeht ("Man sieht gar nicht, dass man da scrollen kann");
   umbrechende Reiter wurden vier Reihen hoch ("mit dem hohen Leiste gefaellt
   mir das nicht"); ein Auswahlfeld sah aus wie ein weiteres Formularfeld.

   Jetzt das, was Einstellungen auf dem Telefon ueberall machen - YouTube
   Studio, Instagram, das Geraet selbst: eine Liste mit Pfeil, antippen fuehrt
   in den Bereich, oben fuehrt eine Zeile zurueck. Nichts ist versteckt,
   nichts baut sich auf, und man weiss immer, wo man ist.

   Ab 761 px uebernehmen wieder die Reiter; dort haben diese Regeln keine
   Wirkung. */
.profile-drill { display: none; }
.profile-back { display: none; }

@media (max-width: 760px) {
  /* Alles nach oben. Das Fenster stand senkrecht mittig, und bei einer kurzen
     Rubrik wie "Konto" blieb oben und unten eine grosse leere Flaeche
     ("Bitte alles oben anordnen", 13.09.2026). */
  body.profile-modal-open .factory-workspace.open { align-items: flex-start !important; padding: 8px !important; }
  body.profile-modal-open .factory-workspace.open .workspace-panel { margin-top: 0 !important; }

  .profile-nav { display: none; }
  .profile-settings { border-radius: 12px; }

  /* Die Liste der Bereiche. Sichtbar, solange keiner geoeffnet ist. */
  .profile-drill { display: none; }
  .profile-settings.ist-liste .profile-drill { display: grid; padding: 6px; }
  /* In der Liste bleiben die Rubriken zu - aber die Zeile mit "Speichern"
     bleibt erreichbar. Sie gehoert zum Formular, das alle Rubriken gemeinsam
     speichert; waere sie mit ausgeblendet, koennte jemand in einer Rubrik
     etwas eintragen, zurueckgehen und haette keinen Weg mehr zum Speichern. */
  .profile-settings.ist-liste .profile-pane { display: none; }
  .profile-settings.ist-liste .profile-back { display: none; }
  .profile-settings.ist-liste .profile-panes { padding-top: 0; border-top: 1px solid #22262f; }
  .profile-drill button {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid #22262f;
    border-radius: 0;
    background: transparent;
    color: #e7eaf1;
    font: 600 13.5px/1.25 'DM Sans', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .profile-drill button:last-child { border-bottom: 0; }
  .profile-drill button:active { background: #171a23; }
  .profile-drill button > i:first-child { color: #ff5570; font-size: 17px; }
  .profile-drill button > i:last-child { color: #5d6474; font-size: 15px; }

  /* Die acht Bereiche sollen ohne Scrollen auf den Bildschirm passen
     ("Hier sollte nicht gescrollt werden müssen", 13.09.2026). Der Platz
     kommt aus Kopfzeile und Hinweis: der Hinweis erklaert etwas, das man
     einmal liest - er bleibt als eine Zeile stehen, sein Fliesstext geht. */
  body.profile-modal-open .factory-workspace.open .workspace-header { min-height: 0 !important; padding: 10px 14px !important; }
  body.profile-modal-open .factory-workspace.open .profile-mobile-back { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; margin-right: 8px; padding: 0; border: 1px solid #303744; border-radius: 9px; background: #151923; color: #f1f3f7; font-size: 19px; }
  body.profile-modal-open .factory-workspace.open .profile-mobile-back:active { background: #252b38; }
  body.profile-modal-open .factory-workspace.open .workspace-header h2 { font-size: 18px !important; margin-top: 1px !important; }
  body.profile-modal-open .factory-workspace.open .workspace-kicker,
  body.profile-modal-open .factory-workspace.open #workspace-kicker { font-size: 9px !important; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero,
  body.profile-modal-open .factory-workspace.open .profile-hero { gap: 9px; margin-bottom: 8px; padding: 8px 10px; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero p,
  body.profile-modal-open .factory-workspace.open .profile-hero p { display: none; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 14px; }
  body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero strong { font-size: 12.5px; }
  .profile-drill button.active > span { color: #fff; }

  /* Die Zeile zurueck zur Liste - sie traegt den Namen des offenen Bereichs. */
  .profile-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% + 22px);
    min-height: 44px;
    margin: -12px -11px 10px;
    padding: 0 10px;
    border: 0;
    border-bottom: 1px solid #22262f;
    border-radius: 0;
    background: transparent;
    color: #e7eaf1;
    font: 700 14px/1.2 'DM Sans', Arial, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .profile-back i { color: #ff5570; font-size: 20px; }
  .profile-back:active { background: #171a23; }
}

/* Kleine Handys: Der Knopf "Mit Google verbinden" liess dem Text daneben nur
   eine schmale Spalte - "YouTube-Konto verbinden" brach in drei Zeilen, die
   Erklaerung wurde abgeschnitten (CFAI-MOB-20260921-019). Unter 480px steht
   der Knopf deshalb unter dem Text. Dazu die Knopfleiste des Profils (022). */
@media (max-width: 480px) {
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "avatar copy" "actions actions";
    row-gap: 10px;
  }
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card .youtube-connect,
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card .youtube-channel-actions {
    justify-self: start;
  }
  body.factory-page-active #workspace-body:has(#creator-profile-form) .creator-youtube-card .youtube-channel-copy span {
    -webkit-line-clamp: 2;
  }
  /* "Profil speichern" (.workspace-run) bringt aus einer allgemeinen Regel
     175px Mindestbreite mit, seine Spalte ist hier schmaler - der Knopf lag
     ueber "Abbrechen" (CFAI-MOB-20260921-022). */
  body.factory-page-active #workspace-body:has(#creator-profile-form) .profile-actions > .workspace-run {
    min-width: 0;
  }
}