/* Aufteilung des Studios in der Präsentation: Board, Inspektor, Transport in einem festen Rahmen. Die App selbst baut
   das in ihrer Schale; hier steht es als Fläche auf der Seite. */
.hf-studio { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; block-size: clamp(640px, 80vh, 880px); border-radius: var(--r3); overflow: hidden;
             box-shadow: var(--hifi-kante-ruhig, 0 0 0 1px var(--rand)), var(--hifi-schatten-ruhig, var(--schatten)); }
.hf-studio-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background-color: var(--leiste); background-image: var(--hifi-erhaben, none);
                    box-shadow: 0 1px 0 var(--rand); }
.hf-studio-leiste .knopf { block-size: 40px; }
.st-werkbank { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.st-board-rahmen { position: relative; min-height: 0; overflow: hidden; background-color: var(--mulde);
  background-image: radial-gradient(color-mix(in srgb, var(--text-3) 38%, transparent) 1px, transparent 1.3px); background-size: 22px 22px; }
.st-inspektor { min-height: 0; overflow-y: auto; padding: 14px 16px 20px; background-color: var(--leiste); box-shadow: -1px 0 0 var(--rand); }
.st-unten { background-color: var(--leiste); box-shadow: 0 -1px 0 var(--rand); }
@media (max-width: 1100px) { .st-werkbank { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 860px) {
  .hf-studio { block-size: auto; }
  .st-werkbank { grid-template-columns: minmax(0, 1fr); }
  /* schmal: die Knoten als Liste in voller Größe, ohne Kabel und Verkleinerung (Schrift bleibt lesbar) */
  .st-board-rahmen { overflow: visible; }
  .st-board-rahmen .hf-board { position: static; inline-size: auto; block-size: auto; transform: none; display: grid; gap: 22px; padding: 16px 12px;
              grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .st-board-rahmen .hf-board .ak-geraet { position: relative; left: auto; top: auto; inline-size: auto; }
  .st-board-rahmen :is(.hf-kabel, .hf-zoom, .hf-port) { display: none; }
  .st-inspektor { overflow: visible; box-shadow: 0 -1px 0 var(--rand); }
}