From 1f769c9de7f5e3f81cc7ea48db57dc7e3792a47f Mon Sep 17 00:00:00 2001 From: Dogfather Date: Thu, 27 Aug 2026 18:15:08 +0200 Subject: [PATCH] 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 | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) 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) {