diff --git a/html/css/office.css b/html/css/office.css
index 87e52e9..7f079ea 100644
--- a/html/css/office.css
+++ b/html/css/office.css
@@ -24,15 +24,32 @@
   box-sizing: border-box;
 }
 
+/* Die Szene soll immer vollstaendig sichtbar sein - auch im normalen Fenstermodus,
+   ohne Scrollen. Dazu spannt der body eine Flex-Spalte ueber die Viewport-Hoehe auf:
+   Header nimmt seine natuerliche Hoehe, #office-scene bekommt den Rest, und das SVG
+   skaliert sich per aspect-ratio in diesen Rest hinein (siehe unten). */
+html {
+  height: 100%;
+}
+
 body {
   margin: 0;
   font-family: "Segoe UI", Verdana, Arial, sans-serif;
   background: #dbe7f3;
   color: var(--color-text);
+  /* height (nicht min-height): Nur eine definite Hoehe laesst die prozentualen
+     max-height-Angaben weiter unten aufloesen. dvh rechnet mobile Browserleisten
+     mit, vh ist der Fallback fuer aeltere Engines. */
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 header.office-header {
-  padding: 16px 24px;
+  flex: 0 0 auto;
+  padding: 12px 24px;
   display: flex;
   align-items: baseline;
   gap: 16px;
@@ -50,20 +67,65 @@ header.office-header p {
 }
 
 #office-scene {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-  padding: 0 16px 32px;
+  flex: 1 1 auto;
+  /* min-height: 0 hebt die Flex-Default-Mindesthoehe (min-content) auf - sonst kann
+     das Kind den Container nicht unterschreiten und die Szene laeuft aus dem Bild. */
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px 16px;
 }
 
+/* Das SVG soll sich an der jeweils knapperen Achse ausrichten. Welche das ist, haengt
+   vom Seitenverhaeltnis des Fensters ab - daher die beiden Media-Queries unten. Die
+   max-*-Grenzen sind das Sicherheitsnetz fuer den Grenzbereich (die Header-Hoehe geht
+   in das Verhaeltnis der Szenenflaeche ein, in die Media-Query aber nicht): Dort wird
+   die Elementbox notfalls leicht gestaucht - der Szeneninhalt bleibt dank
+   preserveAspectRatio unverzerrt und vollstaendig sichtbar. */
 .office-svg {
-  width: 100%;
-  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 1920 / 1080;
   display: block;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
 }
 
+/* Fenster breiter als 16:9 -> die Hoehe ist der Engpass. */
+@media (min-aspect-ratio: 16 / 9) {
+  .office-svg {
+    height: 100%;
+    width: auto;
+  }
+}
+
+/* Fenster schmaler als 16:9 -> die Breite ist der Engpass. */
+@media (max-aspect-ratio: 16 / 9) {
+  .office-svg {
+    width: 100%;
+    height: auto;
+  }
+}
+
+/* Bei knappem Platz weicht zuerst der erklaerende Fliesstext - er kostet in flachen
+   oder schmalen Fenstern mehrere Zeilen Hoehe, die der Szene fehlen. */
+@media (max-height: 640px), (max-width: 760px) {
+  header.office-header p {
+    display: none;
+  }
+}
+
+@media (max-height: 640px) {
+  header.office-header {
+    padding: 8px 16px;
+  }
+
+  header.office-header h1 {
+    font-size: 1.1rem;
+  }
+}
+
 .floor {
   fill: var(--color-floor);
 }