Handy-Ansicht überarbeitet

- 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 <noreply@anthropic.com>

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:

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.

datenschutz.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=722bc4b5" />
+<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>

hilfe-verein.html

@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=722bc4b5" />
+<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
 </head>
 <body class="page-verein">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>

impressum.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=722bc4b5" />
+<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>

index.html

@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=722bc4b5" />
+<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>

shop.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=722bc4b5" />
+<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
 </head>
 <body class="page-shop parked">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>