Workspace-Anmeldung: kompaktere Tafel auf niedrigen Bildschirmen

Auf dem iPhone 13 (nur 664 px nutzbare Hoehe) verdeckte die Tafel das
Motiv fast vollstaendig -- sichtbar waren nur die Ohrenspitzen. Neue
Regel fuer max-height 760px: kleinere Abstaende und Schriftgroessen,
und die Bildflaeche wird flacher.

Der zweite Teil ist der eigentliche Kniff: Bei flacherer Bildflaeche
skaliert der Ausschnitt nach BREITE statt nach Hoehe, dadurch zeigt er
den oberen Teil mit den Gesichtern statt seitlich zu beschneiden.

Geprueft auf iPhone 13, iPhone SE und Pixel 5.

workspace/assets/css/gate.css

@@ -324,6 +324,28 @@ body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filt
   .rolle__zusatz { display: none; }
 }
 
+/* Niedrige Bildschirme (iPhone 13 hat nur 664 px nutzbare Höhe): Die Tafel
+   würde fast alles verdecken. Sie wird kompakter, und die Bildfläche wird
+   flacher - dadurch skaliert der Ausschnitt nach BREITE statt nach Höhe und
+   zeigt genau den oberen Teil mit den Gesichtern. */
+@media (max-width: 899px) and (max-height: 760px) {
+  .buehne { height: 46svh; }
+
+  .tafel { padding: 16px 18px 14px; }
+  .titel { font-size: 1.42rem; margin-bottom: 4px; }
+  .unterzeile { margin-bottom: 16px; font-size: .88rem; }
+  .marke { font-size: .68rem; margin-bottom: 3px; }
+
+  .feldschild { margin-bottom: 7px; font-size: .74rem; }
+  .rollen { margin-bottom: 14px; }
+  .rolle { padding: 8px 13px; margin-bottom: 6px; }
+  .rolle__name { font-size: .9rem; }
+
+  #code { padding: 11px 44px 11px 14px; }
+  .knopf { margin-top: 12px; padding: 11px 18px; }
+  .fuss { margin-top: 14px; padding-top: 10px; font-size: .73rem; }
+}
+
 /* ---------- Weniger Bewegung ----------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {