Drei Handy-Nachbesserungen: Trio-Bild hinter dem Text, auffälliger Menü-Knopf, abgeschnittener Öffnen-Knopf

Nutzer-Report mit drei Bildern vom Handy:

1. HERO-BILD SASS NICHT MEHR HINTER DEM TEXT (index.html)
   .hero-artwork hat "inset:0" -- füllt also die GESAMTE Höhe von
   .hero-cinematic, und diese Sektion umschließt nicht nur die Überschrift,
   sondern auch die 3 Welt-Kacheln darunter. Auf dem Handy wird die Sektion
   durch den 4-zeilig umbrechenden Titel + Kacheln riesig (~1570px bei
   390px Breite) -- das Trio-Bild (16:9, contain-skaliert an die Breite)
   wurde dadurch nur ~220px hoch und mittig in dieser riesigen Fläche
   zentriert, landete also als schmaler Streifen zwischen den Buttons und
   den Welt-Kacheln statt hinter der Überschrift.
   Fix: eigenes festes Seitenverhältnis (4:3) für die Bildbox auf dem
   Handy, von OBEN verankert statt zentriert, background-size auf "cover"
   -- Verlauf eigens für die neue, kürzere Box abgestimmt (die
   Desktop-Version wäre zu abrupt gewesen). Über 6 Breiten (320-768px)
   mit Playwright gegengeprüft.

2. MENÜ-KNOPF ZU UNAUFFÄLLIG (main.js + main.css, alle Seiten)
   "da soll auch menü stehen und die 3 striche" + "die kiste soll auch
   leicht eine andere farbe haben so dass sie auffällt, eine leicht blau
   tönung". Sichtbares "Menü" neben den drei Strichen ergänzt (neuer i18n-
   Schlüssel nav_toggle_label, alle 5 Sprachen) + dezente Babyblau-Tönung
   (8% Deckkraft, passend zur Markenfarbe --accent). Dabei einen
   unabhängigen, zweiten Bug gefunden und mitbehoben: durch die neue
   Knopfbreite/-höhe wurde ein Rechenfehler im geschlossenen Mobilmenü
   sichtbar -- "translateY(-110%)" reicht nur, wenn das Panel mindestens
   10x so hoch ist wie der Kopfbereich; war das nicht der Fall, ragte die
   Unterkante (der Sprachschalter) ein paar Pixel sichtbar ins Bild.
   Robusterer Ersatz: -100% + fester 200px-Puffer, unabhängig von Panel-
   und Kopfbereichshöhe. Über 3 Breiten gegengeprüft (Panel unsichtbar UND
   öffnet weiterhin normal).

3. "ÖFFNEN"-KNOPF AUF DER ZUGANGSSEITE ABGESCHNITTEN (gate.html)
   .gate-card trägt "flex: 1 1 220px" für die Desktop-Reihe (220px als
   BREITE gedacht). Sobald @media max-width:480px auf flex-direction:column
   umschaltet, gilt dieselbe Zahl als HÖHE -- die Karte wurde auf genau
   220px Höhe gequetscht. overflow:hidden setzt zusätzlich das normale
   Mindestmaß (min-height:auto) auf 0 herunter, wodurch nichts das
   Zusammenquetschen verhinderte -- der "Öffnen"-Knopf wurde unten
   abgeschnitten. Fix: flex:none in genau diesem Media-Block, Breite bleibt
   weiterhin über width:100%/max-width geregelt. An 4 Breiten x 3 Kacheln
   (Dogi/VanVan/Diene) gegengeprüft: Karten jetzt 258px statt 220px hoch,
   Knopf komplett sichtbar.

Vollständiger Regressionslauf: alle 34 Seiten bei 390px (kein Überlauf,
Menü-Knopf überall erreichbar und beschriftet), Desktop bei 1920px
unverändert (Hamburger weiterhin nur unter der bestehenden 1650px-
Schwelle sichtbar).

Cache-Busting-Version auf 20260821t erhöht.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

assets/css/main.css

@@ -1436,13 +1436,28 @@ header.site-header {
 
 .nav-toggle {
   display: none;
-  background: none;
-  border: 1px solid var(--border);
+  /* Leichte blaue Tönung (21.08.2026, Nutzer-Wunsch: "die kiste soll auch
+     leicht eine andere farbe haben so dass sie auffällt. eine leicht blau
+     tönung.") -- bewusst sehr dezent (8% Deckkraft), damit es zur übrigen
+     augenschonenden Optik der Seite passt und nicht wie ein grelles Warn-
+     Element wirkt, aber deutlich genug, um die Kiste vom sonst rein
+     schwarzen Kopfbereich abzuheben. */
+  background: rgba(143, 217, 234, .1);
+  border: 1px solid rgba(143, 217, 234, .35);
   border-radius: 8px;
   color: var(--text);
   padding: .5rem .7rem;
   cursor: pointer;
+  align-items: center;
+  gap: .4rem;
 }
+.nav-toggle:hover, .nav-toggle:focus-visible {
+  background: rgba(143, 217, 234, .18);
+  border-color: rgba(143, 217, 234, .55);
+}
+/* Sichtbares "Menü" NEBEN den drei Strichen (21.08.2026, Nutzer-Report per
+   Bild: "da soll auch menü stehen und die 3 striche"). */
+.nav-toggle-label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
 
 /* Bugfix 20.08.2026 (Nutzer-Report per Screenshot: "DogiCrew"-Knopf/Badge
    rechts abgeschnitten): die Schwelle war schon zweimal angehoben (880 ->
@@ -1463,7 +1478,7 @@ header.site-header {
      rechte Kante, egal wie breit die Marke daneben ist. Ohne das stand er
      direkt hinter der Marke und wurde auf schmalen Bildschirmen rechts aus
      dem Bild geschoben (siehe Bugfix-Block bei @media max-width:620px). */
-  .nav-toggle { display: block; margin-left: auto; }
+  .nav-toggle { display: flex; margin-left: auto; }
   .nav-links {
     position: fixed;
     inset: 62px 0 0 0;
@@ -1472,7 +1487,19 @@ header.site-header {
     align-items: stretch;
     padding: 1.2rem 6vw;
     gap: .3rem;
-    transform: translateY(-110%);
+    /* Bugfix 21.08.2026 (beim Testen des "Menü"-Knopf-Umbaus entdeckt, per
+       Playwright reproduziert): -110% verschiebt das Panel um 110% SEINER
+       EIGENEN Höhe -- das reicht nur dann sicher aus, wenn das Panel
+       mindestens 10x so hoch ist wie der "inset:62px"-Versatz oben
+       (Rechnung: Panel-Unterkante landet bei 62px - 10%-der-Panelhöhe).
+       Ist das Menü kürzer (z.B. weniger Punkte, oder der Kopfbereich wurde
+       etwas höher wie gerade eben durch den neuen "Menü"-Text), ragte die
+       UNTERKANTE des eigentlich geschlossenen Panels ein paar Pixel ins
+       Bild -- sichtbar wurde ausgerechnet der Sprachschalter (das farbige
+       "DE"-Pillenelement steht ganz unten in der Liste). Robuster Ersatz:
+       zusätzlich zu -100% (= exakt die eigene Höhe) ein FESTER Puffer, der
+       unabhängig von Panel- und Kopfbereichshöhe immer ausreicht. */
+    transform: translateY(calc(-100% - 200px));
     transition: transform .25s ease;
     overflow-y: auto;
     /* Bugfix 21.08.2026 (Handy im QUERFORMAT): das zugeklappte Panel wird um
@@ -2787,6 +2814,53 @@ footer.site-footer {
 .hero-cinematic .hero-grid h3 { font-size: 1.45rem; }
 .hero-cinematic .hero-grid p { font-size: 1.05rem; }
 
+/* Bugfix 21.08.2026 (Nutzer-Report per Bild: "der hintergrund da nicht genau,
+   der soll genau hinter dem text sein so dass es schön aussieht und man das
+   bild auch sieht hinter dem text").
+
+   Ursache: .hero-artwork hat "inset:0" -- es füllt also die GESAMTE Höhe von
+   .hero-cinematic, und diese Sektion umschließt nicht nur die Überschrift,
+   sondern auch die 3 Welt-Kacheln darunter. Auf Desktop ist das unauffällig
+   (Sektion ist nicht viel höher als das Bild), aber auf dem Handy wird die
+   Sektion durch den 4-zeilig umbrechenden Titel + Kacheln SEHR hoch (~1570px
+   bei 390px Breite) -- das Bild (16:9, per background-size:contain an die
+   Breite angepasst) wird dadurch nur rund 220px hoch und mittig in dieser
+   riesigen Fläche zentriert. Ergebnis: das Bild landete als schmaler Streifen
+   irgendwo zwischen den Buttons und den Welt-Kacheln -- nicht hinter der
+   Überschrift, für die es eigentlich gedacht ist.
+
+   Fix: .hero-artwork bekommt auf dem Handy sein eigenes, festes Seiten-
+   verhältnis (4:3, per Bildschirmtests etwas höher als 16:9 gewählt --
+   zeigt mehr vom Bild und lässt den Verlauf sanfter ausklingen) und wird
+   von OBEN verankert statt über die volle (riesige) Höhe zentriert. Damit
+   sitzt es exakt dort, wo die Überschrift beginnt. background-size wechselt
+   auf "cover" (statt "contain") -- bei diesem moderateren Seitenverhältnis
+   bleibt der Ausschnitt erkennbar (nicht wie bei "cover" auf die volle
+   Sektionshöhe stark eingezoomt), füllt aber die Box randlos.
+   Verlauf (::after) eigens für die jetzt kürzere Box abgestimmt: die
+   Desktop-Version fasst den Übergang über die ganze (dort kürzere) Sektion
+   zusammen -- 1:1 auf die neue, kleinere Handy-Box übertragen, wäre der
+   Übergang zu abrupt (an mehreren Bildschirmbreiten mit Playwright
+   gegengeprüft) gewesen. Bewusst nur bis 760px (bestehende Schwelle dieser
+   Seite für "Handy-Layout" u.a. bei .hero-grid) -- ab da reicht wieder die
+   normale Desktop-Logik. */
+@media (max-width: 760px) {
+  .hero-artwork {
+    top: 0; left: 0; right: 0; bottom: auto;
+    aspect-ratio: 4 / 3;
+    height: auto;
+  }
+  .hero-artwork::before {
+    background-size: cover, cover;
+    background-position: center 25%, center;
+  }
+  .hero-artwork::after {
+    background:
+      radial-gradient(ellipse 130% 90% at 50% 35%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 65%, rgba(0, 0, 0, .8) 100%),
+      linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .7) 78%, var(--bg) 100%);
+  }
+}
+
 /* ==========================================================================
    CHARAKTER-SHOWCASE — die zwei Artworks groß, scharf und komplett sichtbar
    ========================================================================== */