/* =====================================================================
   responsive.css – passt MI-Learning Computernetze an die
   Bildschirmgröße an (Desktop und Tablet).

   Prinzip: Das Grundgerüst aus browser.css (1050 x 699 px) bleibt
   unverändert. responsive.js vergrößert bzw. verkleinert es als Ganzes,
   so dass es den Bildschirm möglichst gut ausfüllt.
   Alle Positionen, Übungen und Drag & Drop bleiben dadurch intakt.

   Wird nach browser.css eingebunden.
   ===================================================================== */

/* Während der Berechnung (responsive.js) nur die blaue Fläche zeigen,
   damit der Rahmen nicht unskaliert aufblitzt */
html.rs-pending,
html.rs-pending body {
    background-color: var(--primary-blue, #172564);
    margin: 0;
}

html.rs-pending #wrapper {
    visibility: hidden;
}

/* Fläche rund um den Rahmen in der Farbe des Rahmens,
   damit auf großen Bildschirmen keine weißen Streifen entstehen.
   (Wer den weißen Hintergrund behalten möchte: diese Regel löschen.) */
html.rs-scale,
html.rs-scale body {
    background-color: var(--primary-blue, #172564);
}

/* kein Standard-Außenrand am Body, sonst rutscht der Rahmen nach unten */
html.rs-scale body {
    margin: 0;
    overflow-x: hidden;   /* keine seitlichen Scrollbalken durch den skalierten Rahmen */
}

/* Hülle um #wrapper (von responsive.js eingefügt).
   Sie hat die Größe des skalierten Rahmens und zentriert ihn. */
.rs-frame {
    display: flow-root;   /* Außenabstände bleiben innerhalb der Hülle */
    margin: 0 auto;
    /* seitlich abschneiden (verhindert Querscrollen durch unsichtbare
       Kästen wie die Fußzeile), senkrecht bleiben Überstände sichtbar,
       z. B. aufklappbare Tabellen wie im Original */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}

html.rs-scale #wrapper {
    margin: 0;
    transform-origin: 0 0;
}