Buero-Szene fuellt den sichtbaren Bereich statt Full-Screen zu erwarten

Die Szene war auf volle Fensterbreite ausgelegt und lief im normalen
Fenstermodus unten aus dem Bild (bei 1440x700 z.B. um 232px).

- body als Flex-Spalte ueber die Viewport-Hoehe. Bewusst height statt
  min-height: nur eine definite Hoehe laesst die prozentualen
  max-height-Angaben der Szene aufloesen.
- #office-scene nimmt die Resthoehe (flex: 1, min-height: 0) und
  zentriert das SVG.
- Das SVG richtet sich an der jeweils knapperen Achse aus - zwei
  Media-Queries auf 16/9 schalten zwischen hoehen- und breitenbegrenzt
  um, max-width/max-height sind das Sicherheitsnetz fuer den
  Grenzbereich (die Header-Hoehe geht in das Verhaeltnis der
  Szenenflaeche ein, in die Media-Query aber nicht).
- Bei knappem Platz weicht der erklaerende Fliesstext im Header.

Gemessen in Chromium ueber 1920x1080 bis 500x900: kein Overflow,
Seitenverhaeltnis durchgehend exakt 16:9.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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);
 }