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

   Prinzip: Das Grundgerüst aus browser.css (#wapper, 1050 x 695 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 grüne Fläche zeigen,
   damit der Rahmen nicht unskaliert aufblitzt */
html.rs-pending,
html.rs-pending body {
    background-color: #3f4f44;
    margin: 0;
}

html.rs-pending #wapper {
    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: #3f4f44;
}

/* 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 #wapper (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 */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}

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