/* Eine Zeile statt drei Balken (js/designer/einzeile.js): Kopfleiste, Show-Kopf und Speichern teilen sich auf den Show-Seiten
   48 px Höhe. body.einzeile gilt nur im Studio und in den Effekt-Spuren ab 1240 px Breite. */

/* ---------------------------------------------------------------- die Leiste selbst */
body.einzeile .app-top { min-height: 48px; height: 48px; padding: 0 calc(var(--el-save, 0px) + 22px) 0 14px; gap: 8px; flex-wrap: nowrap; }
body.einzeile .app-top .brand-name { display: none; }
body.einzeile .kl-tabs { padding: 2px; border-radius: 9px; }
body.einzeile .kl-tab { height: 30px; padding: 0 8px; border-radius: 7px; }
body.einzeile .kl-tab .kl-tl { display: none; }
body.einzeile .proj-btn { flex: 0 1 180px; min-width: 0; min-height: 36px; padding: 2px 10px 2px 8px; gap: 7px; overflow: hidden; }
body.einzeile .proj-btn > span { min-width: 0; overflow: hidden; }
body.einzeile .proj-btn small { display: none; }
body.einzeile .proj-btn b { font-size: 13.5px; }
body.einzeile .venue-wahl { flex: 0 1 150px; min-height: 36px; }

/* Links Logo, Reiter, Projekt; der freie Platz (.spacer) trägt den Show-Kopf; rechts Merken, Status, Live, Hilfe, Konto */
body.einzeile .app-top > .spacer { display: block !important; order: 1; min-width: 0; }
body.einzeile .bf-leiste { order: 2; flex: 0 1 150px; margin: 0; padding: 0; }
body.einzeile .bf-leiste.nur-merken { flex: 0 0 auto; }
body.einzeile #status-pill, body.einzeile #live-btn, body.einzeile .app-top .hf-launch, body.einzeile .kl-me { order: 3; }
body.einzeile .bf-tile { min-height: 34px; width: 34px; padding: 0; justify-content: center; font-size: 13px; }   /* Sprung-Knöpfe als Symbol, Name im Tooltip */
body.einzeile .bf-tile .n, body.einzeile .bf-tile .go, body.einzeile .bf-tile.bf-merken span { display: none; }
body.einzeile #status-pill { min-height: 36px; width: 36px; padding: 0; justify-content: center; font-size: 0; }
body.einzeile #live-btn { min-height: 36px; padding: 0 12px 0 10px; font-size: 13.5px; }
body.einzeile .app-top .hf-launch { min-height: 36px; padding: 0 8px; }
body.einzeile .app-top .hf-launch .hf-lbl { display: none; }
body.einzeile .kl-me { height: 36px; padding: 0 4px; gap: 0; }
body.einzeile .kl-me.kl-gear { width: 36px; padding: 0; }
body.einzeile .kl-me .kl-nm, body.einzeile .kl-me .kl-caret { display: none; }
body.einzeile .kl-me .kl-av { width: 28px; height: 28px; font-size: 13px; }

/* NEW-Schilder brauchen in der einen Zeile zu viel Platz; neue Funktionen stehen weiter am Hilfe-Knopf */
body.einzeile .app-top [data-ss-new]::before, body.einzeile #st-head [data-ss-new]::before,
body.einzeile #st-save [data-ss-new]::before, body.einzeile .pro-head [data-ss-new]::before { display: none; }

/* ---------------------------------------------------------------- Show-Kopf im freien Platz */
body.einzeile #st-head, body.einzeile .pro-head {
  position: fixed; z-index: 30; top: var(--el-t, 0px); left: var(--el-l, 0px); width: var(--el-b, 0px); height: 48px;
  padding: 0; border: 0; background: none; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
body.einzeile #st-head > .btn, body.einzeile .pro-head > .btn { min-height: 36px; padding: 0 10px; font-size: 13.5px; flex: none; }
body.einzeile #st-head > .btn:first-child, body.einzeile #pro-back { padding: 0 10px 0 6px; }
body.einzeile .st-name, body.einzeile .pro-head .dz-name { flex: 1 1 170px; min-width: 100px; height: 36px; padding: 0 8px; font-size: 15px; font-weight: 700; }
body.einzeile .st-head .kind-chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; flex: 0 100 auto; min-width: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.einzeile .st-head .kind-chip .ic { width: 16px; height: 16px; flex: none; }
body.einzeile .st-share span { display: none; }                               /* Website: „Vorschau teilen“ nur als Symbol, Text im Tooltip */
body.einzeile .bf-lay, body.einzeile .bf-edit-btn { display: none; }          /* liegen jetzt im Konto-Menü unter „Einstellungen“ */

/* Stufe im Song: Einfach · Genau · Alles */
body.einzeile #st-head .ss-lvl { flex: none; flex-direction: row; gap: 2px; margin: 0; padding: 2px; border-radius: 10px; }
body.einzeile #st-head .ss-lvl button { min-height: 30px; padding: 0 8px; border-radius: 8px; }

/* ---------------------------------------------------------------- Speichern: immer oben rechts */
body.einzeile #st-save, body.einzeile #btn-save { position: fixed; z-index: 30; top: calc(var(--el-t, 0px) + 6px); right: 12px; height: 36px; }
body.einzeile #st-save { padding: 0; border: 0; background: none; }
body.einzeile .st-save-row { height: 36px; align-items: center; gap: 8px; }
body.einzeile #st-save .pro-btn { min-height: 36px; padding: 0 11px; font-size: 13.5px; flex: none; }
body.einzeile #st-save .st-save-btn, body.einzeile #btn-save { min-height: 36px; padding: 0 13px; font-size: 14px; border-radius: 10px; flex: none; }
body.einzeile #st-save .st-save-btn .ic { width: 18px; height: 18px; }
body.einzeile .st-save-btn .sb { display: block; }
body.einzeile .st-save-btn .sb small { display: none; }
body.einzeile .st-save-btn .hide-xs, body.einzeile #btn-save .hide-xs { display: none; }
body.einzeile .st-save-btn .show-xs, body.einzeile #btn-save .show-xs { display: inline; }
.st-stand { display: none; }
body.einzeile .st-stand:not([hidden]) { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--accent); }
@media (max-width: 1499px) {
  body.einzeile #st-head > .btn:first-child { font-size: 0; gap: 0; padding: 0 8px; }
  body.einzeile .proj-btn { flex: none; width: 36px; padding: 0; justify-content: center; }
  body.einzeile .proj-btn > span { display: none; }
  body.einzeile #live-btn { padding: 0 11px; gap: 0; }
  body.einzeile #live-btn span { display: none; }
}
@media (max-width: 1359px) {
  body.einzeile .pro-btn .hide-xs { display: none; }
  body.einzeile .pro-btn .show-xs { display: inline; }
}
@media (min-width: 1700px) {                    /* viel Platz: Sprung-Knöpfe wieder mit Namen */
  body.einzeile .bf-leiste { flex-basis: 420px; }
  body.einzeile .bf-tile:not(.bf-merken) { width: auto; max-width: 150px; padding: 0 9px 0 8px; }
  body.einzeile .bf-tile:not(.bf-merken) .n { display: block; }
}

/* ---------------------------------------------------------------- Inhalt rückt nach oben */
body.einzeile .studio { grid-template-rows: minmax(0, 1fr); }
body.einzeile #view-studio:has(> .bf-kacheln:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); }
body.einzeile .pro { grid-template-rows: minmax(0, 1fr); }

/* Konto-Menü: Layout und Bedienfeld gibt es dort nur, wenn sie aus der Show-Zeile verschwunden sind */
.kl-mi[data-id^="bf-"] { display: none; }
body.einzeile .kl-mi[data-id^="bf-"]:not([hidden]) { display: flex; }