Compare commits

..
2 Commits
Author SHA1 Message Date
DogFatherGitandClaude Opus 5 e5d55137d4 Zwei Server-Reparaturen zurueckgeholt, die es nur auf dem Server gab
Beim Abgleich der beiden Staende (Rechner vs. Netcup-Server) gefunden --
beide Aenderungen liefen bereits live, waren aber nirgends gespeichert und
haetten beim naechsten Deploy vom Rechner aus verloren gehen koennen:

1. gate.html: autofocus im Dogi-Feld entfernt (21.08.2026, Rueckmeldung von
   Diene -- der Cursor sprang nach dem Laden zurueck nach oben, die eigene
   Kachel scrollte dabei aus dem Bild).
2. verwaltung.html: "Oeffnen"-Knoepfe wurden auf dem Handy vom
   overflow:hidden der Karte abgeschnitten (22.08.2026); jetzt
   overflow:visible plus etwas mehr Unterabstand.

Inhalt unveraendert vom Server uebernommen, nur hier nachgetragen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 15:24:35 +02:00
DogFatherGitandClaude Opus 5 3f9997456a Handy: Sprachfenster (DE) klappte halb aus dem Bild auf
Nutzer-Report per Foto: beim Tippen auf "DE" im Handy-Menue erschien das
Sprachfenster halb links ausserhalb des Bildschirms, man konnte keine
Sprache mehr lesen oder treffen.

Ursache: Die Handy-Regel, die alle Aufklapp-Fenster auf statische Position
und volle Breite umstellt, hat den Sprachschalter nicht erreicht -- seine
Desktop-Regel (.sprach-schalter .nav-dropdown, 0-2-0) ist spezifischer,
und eine @media-Abfrage erhoeht die Spezifitaet nicht. Dadurch lief die
Desktop-Animation "sprach-dropdown-in" weiter, die per fill-mode:both
dauerhaft transform: translateX(-50%) setzt. Auf dem Desktop korrekt
(schmales Fenster mittig unter dem Knopf), im Handy-Menue aber toedlich:
das Fenster ist dort bildschirmbreit und wurde um seine halbe Breite nach
links geschoben (gemessen live: x = -148px bei 390px Viewport).

Fix: dieselben Handy-Regeln erneut mit ausreichender Spezifitaet fuer den
Sprachschalter, samt Kommentar zur Begruendung.

Geprueft mit Playwright (echter Browser): 390x844, 360x640, Querformat
844x390 und Tablet 768x1024 -> Fenster jeweils vollstaendig im Bild, alle
5 Sprachen sichtbar; Desktop 1920 unveraendert schmal und zentriert;
Sprachwechsel (English) funktioniert weiterhin.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 11:27:22 +02:00
3 changed files with 46 additions and 3 deletions
+21
View File
@@ -1555,6 +1555,27 @@ header.site-header {
.nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; } .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
.nav-dropdown::before { display: none; } .nav-dropdown::before { display: none; }
.nav-group.open .nav-dropdown { display: flex; } .nav-group.open .nav-dropdown { display: flex; }
/* Bugfix 22.08.2026 (Nutzer-Report per Foto: "wenn ich auf DE klicke geht
das Fenster halb schräg auf, man sieht nichts"). Ursache: die Zeile
darüber (.nav-dropdown, Spezifität 0-1-0) hebt für das Handy-Menü
position/transform/animation auf — sie verliert aber gegen die
Desktop-Regel .sprach-schalter .nav-dropdown (0-2-0, Zeile ~427), denn
eine @media-Abfrage erhöht die Spezifität NICHT. Beim Sprachschalter
blieb dadurch die Aufklapp-Animation "sprach-dropdown-in" aktiv, und
die setzt (fill-mode: both) dauerhaft transform: translateX(-50%) —
die im Handy-Menü volle-Breite-Box wurde also um ihre halbe Breite
nach links aus dem Bild geschoben. Deshalb hier dieselben Regeln noch
einmal mit passender Spezifität (Blattname mitgenannt, damit sie in
jedem Fall gewinnt). */
.nav-links .sprach-schalter .nav-dropdown {
position: static;
transform: none;
animation: none;
width: 100%;
min-width: 0;
margin-top: 0;
box-shadow: none;
}
.nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; } .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
/* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles"). /* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles").
+10 -1
View File
@@ -331,7 +331,16 @@
<form id="gate-form-dogi" class="gate-card gate-card--dogi" novalidate> <form id="gate-form-dogi" class="gate-card gate-card--dogi" novalidate>
<span class="gate-card-icon gate-card-icon--dogi" aria-hidden="true"></span> <span class="gate-card-icon gate-card-icon--dogi" aria-hidden="true"></span>
<h2 class="gate-card-name">Dogi</h2> <h2 class="gate-card-name">Dogi</h2>
<input type="text" id="gate-code-dogi" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus /> <!-- autofocus hier bewusst ENTFERNT (21.08.2026, Rückmeldung von Diene:
wenn ich bei mir Zugangscode eingebe, springt er danach zu dir hoch,
mein Name ist dann nicht mehr sichtbar). Auf dem Handy tippt man
unten in die eigene Kachel, während die Seite noch lädt — sobald sie
fertig ist, zieht autofocus den Cursor zurück in DIESES Feld ganz
oben, das Handy scrollt mit und die eigene Kachel ist weg. Bei drei
gleichberechtigten Kacheln ist ein vorausgewähltes Feld ohnehin
falsch: für zwei von drei Personen öffnet sich die Tastatur an der
falschen Stelle. -->
<input type="text" id="gate-code-dogi" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" />
<button type="submit" class="btn-holo gate-card-btn"> <button type="submit" class="btn-holo gate-card-btn">
<span class="btn-holo-text">💙 Öffnen</span> <span class="btn-holo-text">💙 Öffnen</span>
</button> </button>
+15 -2
View File
@@ -217,9 +217,22 @@
display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; align-items: stretch; display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; align-items: stretch;
} }
.vw-gate-card { .vw-gate-card {
position: relative; isolation: isolate; overflow: hidden; /* 22.08.2026 Bugfix (Meldung: "auf dem Handy sehe ich die Öffnen-Buttons gar nicht", Foto
zeigte nur einen millimeterschmalen Farbstreifen am unteren Kartenrand statt des ganzen
Knopfs): overflow:hidden war hier nie nötig — der Verlaufs-Rand-Trick (padding-box/
border-box-Hintergrund) respektiert border-radius von sich aus, ganz ohne Clipping, anders
als bei .vw-shine-card/.vw-noise, wo overflow:hidden ein ::after-Rausch-Pseudoelement
einfängt (das diese Karte gar nicht hat). overflow:hidden hat stattdessen auf manchen
Handys/Schriftgrößen-Einstellungen den Öffnen-Knopf mit-abgeschnitten, sobald der
tatsächliche Karteninhalt (z.B. bei vergrößerter System-Schrift) minimal höher wurde, als
die Karte beim ersten Layout-Durchlauf angenommen hatte. overflow:visible behebt das ohne
jeden optischen Nachteil (der Verlaufs-Rand bleibt exakt gleich, weil border-radius die
Hintergrund-Ebenen unabhängig von overflow immer schon rundet) und etwas mehr
Unterabstand als zusätzliches Sicherheitspolster, falls der Knopf durch größere
Systemschrift zweizeilig wird. */
position: relative; isolation: isolate; overflow: visible;
flex: 1 1 280px; max-width: 340px; flex: 1 1 280px; max-width: 340px;
padding: 1.7rem 1.5rem 1.6rem; padding: 1.7rem 1.5rem 1.9rem;
border-radius: 20px; border: 1.5px solid transparent; border-radius: 20px; border: 1.5px solid transparent;
background: background:
linear-gradient(rgba(16,18,22,.95), rgba(9,10,13,.97)) padding-box, linear-gradient(rgba(16,18,22,.95), rgba(9,10,13,.97)) padding-box,