/* Das Klassen-Ribbon bleibt auch in Gruppeneinteilung und Zufallsauswahl sichtbar. */

/*
 * Gruppeneinteilung und Zufallsauswahl folgen derselben zentrierten
 * Maximalbreite wie Ribbon und Klassenspiegel. Auf breiten Monitoren wächst
 * der eigentliche Arbeitsbereich damit nicht über die gemeinsame 1460-px-Achse.
 */
.group-workbench-page .subwindow-shell,
.random-workbench-page .subwindow-shell {
  width: min(var(--classflow-ribbon-max-width), 100%);
  max-width: var(--classflow-ribbon-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 720px) {
  .random-workbench-page .page-shell {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .random-workbench-page .tool-ribbon {
    flex: 0 0 auto;
  }

  .random-workbench-page .subwindow-shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 900px) and (min-height: 600px) {
  .group-workbench-page .page-shell,
  .random-workbench-page .page-shell {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .group-workbench-page .tool-ribbon,
  .random-workbench-page .tool-ribbon {
    flex: 0 0 auto;
  }

  .group-workbench-page .subwindow-shell,
  .random-workbench-page .subwindow-shell {
    width: min(var(--classflow-ribbon-max-width), calc(100% - 16px));
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 1800px) and (min-height: 600px) {
  .group-workbench-page .subwindow-shell,
  .random-workbench-page .subwindow-shell {
    width: var(--classflow-ribbon-max-width);
  }
}

@media (max-width: 899px), (max-height: 599px) {
  .group-workbench-page .tool-ribbon,
  .random-workbench-page .tool-ribbon {
    margin-bottom: 8px;
  }
}