From 7f1525b381e64c8d2f7fa01f4f2f4f9432fb8224 Mon Sep 17 00:00:00 2001 From: Andrej Stevanovski Date: Thu, 24 Sep 2026 22:09:33 +0200 Subject: [PATCH] =?UTF-8?q?Handy-Ansicht=20=C3=BCberarbeitet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Header einzeilig und sticky, aktiver Punkt als Akzentkante statt Pille - Hero: Headline zuerst, Foto danach als gerahmtes Bild - Headline so groß wie die Spalte erlaubt (45px statt 34px bei 375), Kontur dünner - Abstände und Bilder gestrafft: Startseite 4936 -> 4260px Co-Authored-By: Claude Opus 5.5 --- DESIGN.md | 16 +++++++++ assets/site.css | 82 ++++++++++++++++++++++++++++++++--------------- datenschutz.html | 2 +- hilfe-verein.html | 2 +- impressum.html | 2 +- index.html | 2 +- shop.html | 2 +- 7 files changed, 77 insertions(+), 31 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 660e618..b802755 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -272,6 +272,22 @@ versehentlich live geht, plus ein `.prose__warn`-Kasten oben auf jeder Seite. ## Mobil und Touch +**Überarbeitung 2026-09-24** (Kundenrückmeldung: Einstieg schwach, Header klobig, zu lang, +Headline zu klein). Referenz unverändert das Handoff-DS, geändert sind nur Verhältnisse: + +- **Header** wieder einzeilig und sticky: Zeichen links (Name bleibt für Screenreader im + Link), vier Punkte rechts, aktiv als 3px-Akzentkante statt Pille. Ziele weiter ≥ 44px, + passt bis 320px. +- **Hero** stapelt Text zuerst, Foto danach als gekipptes, gerahmtes Bild wie + `.story__img`. Die Headline beginnt bei 212px statt ~560px. +- **Headline** so groß, wie das längste Wort in die Spalte passt: `min(48px, Spalte / 7.4)`, + Verein `/ 8.1` wegen „zusammenhalten!". 45px statt 34px bei 375. Kontur .075em. +- **Rhythmus** gestrafft: Abstände 64 → 40px, Porträt max. 260px, Story-Bild 3:2. + Startseite bei 375px 4936 → 4260px hoch. + +Die Angaben unten zum zweizeiligen, nicht-stickigen Header sind damit überholt. + + Geprüft bei 320 · 375 · 390 · 640 · 768 · 1024 · 1440 · 1920 px, auf allen fünf Seiten, jeweils auf horizontalen Overflow, Zielgrößen, Schriftgrößen und Randabstände. Alles sauber. Gefunden und behoben wurde dabei: diff --git a/assets/site.css b/assets/site.css index c3564ec..ed99a4a 100644 --- a/assets/site.css +++ b/assets/site.css @@ -214,34 +214,27 @@ a:hover{color:var(--sky-600)} .nav a:hover{color:var(--ink-700); background:var(--surface-sunk)} .nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)} -/* MOBILER HEADER — unter 640px. - Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt. - Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei - 320/360px scrollte die Nav seitlich weg, ohne dass man es sieht. - Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px - (WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst - dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine - mitlaufende Navigation kein Verlust. */ +/* MOBILER HEADER — unter 640px. Dritte Fassung (2026-09-24). + Die Zwei-Zeilen-Fassung (Wortmarke mittig, darunter Viererraster mit Pillen) hat + der Kunde als klobig zurückgewiesen. Jetzt wieder eine Zeile und sticky: links nur + das Zeichen (der Name steht groß im Hero-Logo direkt darunter und bleibt für + Screenreader im Link), rechts die vier Punkte. Aktiv ist eine 3px-Unterkante im + Akzent statt der Pille — dieselbe Geste wie die Footer-Kante. + Gemessen passt das bis 320px: 44px Zeichen + vier Ziele à ≥44px Höhe. */ @media (max-width:639.98px){ - .hdr{position:static; height:auto} - html{scroll-padding-top:16px} - .hdr__in{ - flex-direction:column; align-items:stretch; justify-content:flex-start; - height:auto; gap:6px; padding-block:10px; - } - .hdr__brand{ - justify-content:center; min-height:44px; gap:10px; - font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif; - } - .hdr__brand img{width:30px; height:30px} - .nav{ - display:grid; grid-template-columns:repeat(4,1fr); gap:3px; - flex-wrap:nowrap; overflow:visible; - } + :root{--header-h:60px; --page-pad-x:20px} + .hdr__in{gap:var(--space-2)} + .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center} + .hdr__brand img{width:36px; height:36px} + .nav{flex-wrap:nowrap; gap:0} .nav a{ - min-height:44px; display:flex; align-items:center; justify-content:center; - padding:6px 4px; font-size:13px; line-height:1.15; text-align:center; - white-space:normal; hyphens:auto; + position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px); + font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s); + } + .nav a[aria-current="page"]{background:none} + .nav a[aria-current="page"]::after{ + content:""; position:absolute; left:clamp(5px,2.2vw,10px); right:clamp(5px,2.2vw,10px); + bottom:6px; height:3px; border-radius:var(--radius-pill); background:var(--accent-line); } /* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */ .ftr__col ul{gap:2px} @@ -567,6 +560,43 @@ a:hover{color:var(--sky-600)} .label, .ftr__col h3, .badge{font-size:12px} } +/* ============================================================ HANDY-RHYTHMUS + Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein. + Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und + Logo — die Headline begann bei ~560px. Referenz bleibt das Handoff-DS; geändert + werden nur Verhältnisse, nicht die Bausteine. */ +@media (max-width:639.98px){ + /* Headline zuerst, Foto danach als gekipptes, gerahmtes Bild — dieselbe Behandlung + wie .story__img und das Porträt. */ + .hero{display:flex; flex-direction:column} + .hero__in{order:1; padding-block:var(--space-6) var(--space-5)} + .hero__media{ + order:2; height:190px; margin:0 var(--page-pad-x) var(--space-8); + border-radius:var(--radius-xl); box-shadow:var(--shadow-band); transform:rotate(-1.5deg); + } + .hero__col{gap:var(--space-4)} + .hero__logo{max-width:112px} + /* So groß, wie "weitergegeben!" in die Spalte passt (Breite ≈ 7.2 × Schriftgröße): + 46px bei 375, 39px bei 320. Kontur dünner, sonst laufen die Punzen zu. */ + .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))} + /* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */ + .hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))} + .hero .hl span{-webkit-text-stroke-width:.075em} + + .section{padding-block:var(--space-10)} + .section--tight{padding-block:var(--space-8)} + .field{padding-block:var(--space-10)} + .sh{margin-bottom:var(--space-4)} + .story{gap:var(--space-5)} + .story__img{aspect-ratio:3/2} + .portrait{max-width:260px; gap:var(--space-3)} + .tiles{gap:var(--space-3)} + .tile{padding:var(--space-5)} + .band{gap:var(--space-5)} + .band img{max-width:220px} + .ftr{margin-top:var(--space-10); padding-block:var(--space-10) var(--space-6)} +} + /* ============================================================ FOKUS Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel. diff --git a/datenschutz.html b/datenschutz.html index b96c2e1..a6845bf 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -11,7 +11,7 @@ - + diff --git a/hilfe-verein.html b/hilfe-verein.html index 355b2fa..ea23c82 100644 --- a/hilfe-verein.html +++ b/hilfe-verein.html @@ -10,7 +10,7 @@ - + diff --git a/impressum.html b/impressum.html index b20ea67..440b2a3 100644 --- a/impressum.html +++ b/impressum.html @@ -11,7 +11,7 @@ - + diff --git a/index.html b/index.html index 3ee8d8a..2127edc 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + diff --git a/shop.html b/shop.html index ebbc434..0fb3b30 100644 --- a/shop.html +++ b/shop.html @@ -11,7 +11,7 @@ - +