diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index c450def0..05783d9a 100644
--- a/workspace/assets/css/gate.css
+++ b/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) {