Handy: Navigation war komplett unerreichbar — behoben, plus Tippflächen überall

Nutzer-Report 21.08.2026 mit Screenshot: "auf dem handy kann ich oben nicht aussehen in welche seite ich will welche kategorie welche sprache garnichts". Drei echte, per Playwright reproduzierte Fehler: 1. MENÜ-KNOPF AUSSERHALB DES BILDSCHIRMS (Hauptproblem) .brand stand auf flex-shrink:0, war bei 390px aber 352px breit. Mit Abstand + Knopf brauchte die Leiste 423px bei 367px Platz -- der Menü-Knopf landete bei x=396px, also komplett außerhalb. Damit war auf dem Handy die GESAMTE Navigation unerreichbar (keine Seiten, keine Kategorien, kein Sprachwechsel). Fix: Knopf per margin-left:auto immer an die rechte Kante; Marke darf unter 620px schrumpfen (inkl. min-width:0, sonst greift flex-shrink nicht); unter 400px entfällt die reine Deko-Unterzeile. 2. MENÜ IM QUERFORMAT NICHT ZU ÖFFNEN Das zugeklappte Panel wird um -110% SEINER EIGENEN Höhe verschoben. Quer (568x320) ist es nur 258px hoch, die Unterkante lag dadurch bei y=36px -- also unsichtbar genau über dem Menü-Knopf (y=11..55) und hat jede Berührung abgefangen. Fix: pointer-events:none im geschlossenen Zustand. 3. MENÜPUNKTE AUF KURZEN BILDSCHIRMEN ZUSAMMENGEQUETSCHT .nav-links ist ein Flex-Container fester Höhe; passte der Inhalt nicht, schrumpfte Flexbox die Einträge (iPhone SE: 59px -> 29px, Knöpfe 21px). Fix: flex-shrink:0 auf die Kinder, der Bereich scrollt stattdessen (overflow-y:auto war bereits gesetzt). Zusätzlich: Fußzeilen- und Impressum/AGB-Links auf Handys als echte Tippziele (44px statt 17-20px) -- 18 dicht stehende Links, mit dem Finger vorher kaum zu treffen. Menü-Trennlinien begradigt (folgten dem Desktop-Pillenradius und sahen aus wie Schüsseln). Ergebnis: alle 31 Seiten ohne Überlauf, Menü auf 320-768px, hoch UND quer nutzbar, kleinster Menüpunkt 46px. Verbleibende kleine Ziele sind reine Fließtext-Links im Satz (dürfen laut Standard klein bleiben). Desktop per Regressionstest unverändert geprüft. Cache-Busting-Version auf 20260821p erhöht. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-21 18:13:03 +02:00
parent 5a5912636d
commit d0613f86c1
36 changed files with 393 additions and 244 deletions
@@ -1459,7 +1459,11 @@ header.site-header {
   NACH der Schwelle reicht 94vw automatisch weiter aus (nur ganz nah an
   der Schwelle war die Lücke kritisch). */
@media (max-width: 1650px) {
-  .nav-toggle { display: block; }
+  /* margin-left:auto (21.08.2026): schiebt den Menü-Knopf IMMER an die
+     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-links {
    position: fixed;
    inset: 62px 0 0 0;
@@ -1471,10 +1475,56 @@ header.site-header {
    transform: translateY(-110%);
    transition: transform .25s ease;
    overflow-y: auto;
+    /* Bugfix 21.08.2026 (Handy im QUERFORMAT): das zugeklappte Panel wird um
+       -110% SEINER EIGENEN HÖHE verschoben. Auf einem niedrigen Bildschirm
+       (quer, z.B. 568x320) ist das Panel nur 258px hoch, -110% sind also nur
+       -284px -- die Unterkante landet bei y=36px und lag damit GENAU über dem
+       Menü-Knopf (y=11..55). Unsichtbar, aber es hat jede Berührung
+       abgefangen: das Menü ließ sich im Querformat überhaupt nicht öffnen.
+       pointer-events:none im geschlossenen Zustand löst das unabhängig von
+       Bildschirmhöhe und Panelgröße -- was zu ist, kann nichts mehr
+       blockieren. */
+    pointer-events: none;
  }
+  .nav-links.open { pointer-events: auto; }
  .nav-links.open { transform: translateY(0); }
-  .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
-  .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
+  /* Bugfix 21.08.2026: .nav-links ist ein Flex-Container mit FESTER Höhe
+     (inset: 62px 0 0 0). Passen die Einträge zusammen nicht hinein, schrumpft
+     Flexbox sie standardmäßig (flex-shrink: 1) -- auf einem kurzen Bildschirm
+     (iPhone SE, 568px) wurden aus 59px hohen Menüzeilen dadurch 29px, und aus
+     den Knöpfen "DogiCrew"/"Bewerben" sogar nur 21px. Damit lagen sie unter
+     jeder vernünftigen Tippgröße (Empfehlung Apple/Google: ~44px).
+     flex-shrink:0 lässt sie ihre volle Höhe behalten -- der Bereich hat
+     bereits overflow-y:auto, scrollt also stattdessen. */
+  .nav-links > * { flex-shrink: 0; }
+  /* Trennlinien statt "Schüsseln" (Bugfix 21.08.2026): .nav-group > button
+     und .nav-flat tragen vom Desktop border-radius:999px (Pillen-Look). Mit
+     border-bottom zusammen bog sich die Linie an den Enden nach oben und sah
+     im aufgeklappten Handy-Menü aus wie eine Schale unter jedem Eintrag.
+
+     Lösung: border-bottom raus, Trennlinie stattdessen als ::after -- ein
+     absolut positionierter 1px-Streifen ist immer schnurgerade, egal welchen
+     Radius das Element hat. Dadurch bleibt gleichzeitig ein sanfter Radius
+     für die Farbfüllung des aktiven/offenen Eintrags möglich (ein harter
+     rechteckiger Block sah neben den runden Formen der Seite fremd aus).
+     ::after ist bei beiden frei -- der ▾-Pfeil steht im Textinhalt, der
+     Farbschein nutzt ::before. */
+  .nav-group > button,
+  .nav-flat {
+    border-radius: 10px;
+    border-bottom: none;
+  }
+  .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem .7rem; }
+  .nav-flat { display: block; padding: .9rem .7rem; }
+  .nav-group > button::after,
+  .nav-flat::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0; bottom: 0;
+    height: 1px;
+    background: var(--border);
+    pointer-events: none;
+  }
  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
  .nav-dropdown::before { display: none; }
  .nav-group.open .nav-dropdown { display: flex; }
@@ -1497,6 +1547,74 @@ header.site-header {
  }
 }

+/* =====================================================================
+   HANDY-KOPFLEISTE — Bugfix 21.08.2026 (Nutzer-Report per Screenshot:
+   "auf dem handy kann ich oben nicht aussehen in welche seite ich will
+   welche kategorie welche sprache garnichts").
+
+   Ursache (per Playwright bei 390px nachgemessen): .brand ist 352px breit
+   und steht auf `flex-shrink: 0` (Regel ganz oben) -- durfte also nicht
+   schrumpfen. Zusammen mit gap (2rem) und dem Menü-Knopf (39px) brauchte
+   die Leiste 423px, verfügbar waren aber nur 367px. Der Menü-Knopf landete
+   dadurch bei x=396px, also KOMPLETT außerhalb des 390px breiten Bildes.
+   Auf dem Handy war damit die gesamte Navigation unerreichbar: keine
+   Seiten, keine Kategorien, kein Sprachwechsel.
+
+   Fix in drei Teilen:
+   1. Menü-Knopf per margin-left:auto immer an die rechte Kante (oben im
+      1650px-Block) -- unabhängig von der Breite der Marke.
+   2. Die Marke darf hier ausnahmsweise schrumpfen. min-width:0 ist dabei
+      zwingend: ohne das schrumpft ein Flex-Element trotz flex-shrink NICHT
+      unter seine Inhaltsbreite (Standard ist min-width:auto).
+   3. Schriftgrößen etwas herunter + langer Text bricht sauber ab, statt
+      die Leiste zu sprengen.
+   ===================================================================== */
+@media (max-width: 620px) {
+  .nav-bar {
+    gap: .75rem;
+    padding: .7rem 0;
+  }
+  .brand {
+    flex-shrink: 1;   /* hebt das globale flex-shrink:0 hier gezielt auf */
+    min-width: 0;     /* ohne das greift flex-shrink nicht (min-width:auto) */
+    gap: .5rem;
+    font-size: 1.05rem;
+    line-height: 1.15;
+  }
+  /* Der Textblock neben dem Logo -- darf schmaler werden, Zeilen dürfen
+     umbrechen statt die Leiste breiter zu machen. */
+  .brand > span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .brand-logo { width: 34px; height: 34px; }
+  .brand small {
+    font-size: .56rem;
+    letter-spacing: .06em;
+  }
+  /* Menü-Knopf: etwas größere Tippfläche als die reine Schriftgröße
+     hergibt (Finger statt Mauszeiger), aber schmales Padding, damit er
+     auf sehr engen Geräten nicht selbst zum Platzproblem wird. */
+  .nav-toggle {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+    line-height: 1;
+    padding: .45rem .6rem;
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* Sehr schmale Geräte (z.B. iPhone SE, 320-360px): dort ist selbst die
+   verkleinerte Unterzeile ("STREAMER · COMMUNITY · HASIDOG · MANAGER")
+   noch zu lang und drückt die Leiste unnötig in die Höhe. Sie ist reine
+   Deko -- der Markenname darüber sagt bereits alles -- deshalb hier weg,
+   damit Name und Menü-Knopf sicher nebeneinander passen. */
+@media (max-width: 400px) {
+  .brand small { display: none; }
+  .brand { font-size: 1rem; }
+}
+
 /* ---------- Buttons ----------
   Gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste (wandernde,
   weichgezeichnete Farbwolken + durchlaufender Lichtschimmer) — aber NICHT
@@ -2258,11 +2376,42 @@ footer.site-footer {
 .footer-grid ul { display: grid; gap: .5rem; }
 .footer-grid a { color: var(--text-muted); font-size: .9rem; }
 .footer-grid a:hover { color: var(--accent); }
+/* Fußzeilen-Links auf Handys als richtige Tippziele (21.08.2026, Teil des
+   "alles muss auf dem Handy perfekt erreichbar sein"-Auftrags). Am Rechner
+   sind 20px hohe Textlinks mit der Maus problemlos zu treffen, mit dem
+   Finger nicht -- hier sind es 18 Links dicht untereinander, entsprechend
+   leicht erwischt man den falschen. inline-block + Innenabstand vergrößert
+   die Trefferfläche auf ~44px, ohne dass sich die Optik nennenswert ändert
+   (der Text bleibt gleich groß, nur die unsichtbare Fläche wächst). */
+@media (max-width: 760px) {
+  .footer-grid ul { gap: .15rem; }
+  .footer-grid a {
+    display: inline-block;
+    padding: .62rem 0;
+    min-height: 44px;
+    box-sizing: border-box;
+  }
+}
 .footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  font-size: .8rem; color: var(--text-muted);
 }
+/* Impressum/AGB auf Handys ebenfalls als echte Tippziele (21.08.2026).
+   Diese beiden sind rechtlich vorgeschrieben und müssen leicht erreichbar
+   sein -- mit 17px Höhe waren sie mit dem Finger kaum zu treffen. */
+@media (max-width: 760px) {
+  .footer-bottom { align-items: center; }
+  .footer-bottom a {
+    display: inline-block;
+    padding: .6rem 0;
+    min-height: 44px;
+    /* min-width für kurze Beschriftungen wie "AGB" -- sonst ist das Ziel
+       zwar hoch genug, aber nur ~24px breit. */
+    min-width: 44px;
+    box-sizing: border-box;
+  }
+}

 /* ---------- Foto-Collage (Polaroid-Scrapbook, z.B. Dogfather & Casper) ---------- */
 .collage-wrap {