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;