From 3c1e0775c90ed649180cdc3bca843a208533d73b Mon Sep 17 00:00:00 2001 From: qcigano Date: Tue, 4 Aug 2026 16:47:31 +0200 Subject: [PATCH] Zugangsseite: Kopfbereich in eigener "speziellen" Kiste + echter Zentrierungs-Bug behoben MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gemeldeter Bug: Bei kleineren Fensterhöhen (z.B. Laptop mit wenig Höhe, manche Handy-Größen) hat "overflow: hidden" auf zusammen mit der vertikal zentrierten Flexbox den oberen Teil des Inhalts (Badge/Überschrift) und/oder die unteren Fenster einfach abgeschnitten, OHNE dass man dorthin scrollen konnte — der Inhalt war schlicht nicht mehr erreichbar. Behoben: - "align-items: safe center" statt nur "center" — zentriert normal, springt aber auf Start-Ausrichtung um, sobald der Inhalt höher als der sichtbare Bereich ist. - overflow-y: auto statt hidden — falls "safe center" von einem Browser nicht unterstützt wird, kann trotzdem ganz normal zu den restlichen Fenstern heruntergescrollt werden. - Logo-Wasserzeichen von position:absolute auf position:fixed umgestellt, damit es IMMER exakt in der Mitte des sichtbaren Fensters bleibt, unabhängig von der tatsächlichen Seitenhöhe. Zusätzlich auf ausdrücklichen Wunsch: der Kopfbereich (Badge + Überschrift + Text) sitzt jetzt in einer eigenen "speziellen" Kiste im selben Stil wie die beiden Personen-Fenster darunter (wandernder Verlaufsrand aus allen drei Markenfarben + Glanz-Sweep) statt als loser Text über den Kisten zu schweben — liest sich jetzt sichtbar als gemeinsames "Dach" über beiden Fenstern. Per Browsertest über mehrere Fenstergrößen (inkl. absichtlich sehr niedriger Höhe) verifiziert: Inhalt vollständig erreichbar/scrollbar, Login-Funktion beider Fenster weiterhin unverändert. --- public/gate.html | 53 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/public/gate.html b/public/gate.html index 638fbc9..8bf3449 100644 --- a/public/gate.html +++ b/public/gate.html @@ -40,10 +40,17 @@ min-height: 100vh; display: flex; align-items: center; + /* "safe center": zentriert normal, springt aber auf Start-Ausrichtung um, sobald der Inhalt + höher als der sichtbare Bereich ist — verhindert, dass bei kleineren Fenstern/Handys der + obere Teil (Badge/Überschrift) abgeschnitten wird, ohne dass man hochscrollen könnte (genau + das war der gemeldete Bug: 04.08.2026, zweite Runde). Browser ohne "safe center"-Unterstützung + nutzen einfach die Zeile darüber weiter — kein Fallback-Bruch. */ + align-items: safe center; justify-content: center; - padding: 1.5rem; + padding: 2.5rem 1.5rem; position: relative; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; background: var(--c-black); background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%), radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%); @@ -55,9 +62,13 @@ dreht das schwarze Logo auf weißem Grund um (weiß -> schwarz, schwarz -> weiß), danach macht mix-blend-mode:screen den (jetzt schwarzen) ehemals-weißen Kreis komplett unsichtbar und lässt nur die (jetzt weißen) Linien leicht aufleuchten — kein Bildbearbeitungsprogramm nötig, - rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt. */ + rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt. + position:fixed (04.08.2026 geändert, war vorher absolute): bleibt IMMER exakt in der Mitte + des sichtbaren Fensters, unabhängig davon, wie hoch der Inhalt gerade ist bzw. ob gescrollt + wird — vorher konnte das Logo bei einem hohen Inhalt (z.B. schmales Handy-Fenster) neben der + Bildschirmmitte statt in ihr landen, weil "top:50%" sich auf die GESAMTE Seitenhöhe bezog. */ .gate-logo-bg { - position: absolute; + position: fixed; top: 50%; left: 50%; width: min(1400px, 200vw); @@ -91,7 +102,39 @@ width: 100%; text-align: center; } - .gate-header { margin-bottom: 1.6rem; } + /* Kopf-Kiste (04.08.2026, auf ausdrücklichen Wunsch "auch in speziellen Kisten"): dieselbe + "besondere" Formsprache wie die beiden Personen-Fenster darunter (wandernder Verlaufsrand + + Glanz-Sweep) — nur mit allen drei Markenfarben zugleich im Rand, statt der Einzelfarbe je + Person, damit sie sich sichtbar als "Dach" über beiden Fenstern liest. */ + .gate-header { + position: relative; + overflow: hidden; + margin-bottom: 1.3rem; + padding: 1.7rem 2rem; + border-radius: var(--radius-l); + border: 1.5px solid transparent; + background: + linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, + linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-gold), var(--c-accent)) border-box; + background-size: 100% 100%, 300% 100%; + animation: gate-border-shift 9s ease-in-out infinite; + box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); + } + .gate-header::after { + content: ""; + position: absolute; + top: 0; + left: -60%; + width: 35%; + height: 100%; + background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent); + transform: skewX(-18deg); + animation: gate-shine 6s ease-in-out infinite; + pointer-events: none; + border-radius: inherit; + } + .gate-header > * { position: relative; z-index: 1; } + @media (prefers-reduced-motion: reduce) { .gate-header, .gate-header::after { animation: none; } } .gate-eyebrow { display: inline-block; font-size: 0.78rem;