Relaunch Phase 1: Feinschliff nach Browser- und Code-Prüfung

- Kopfleiste voll deckend, nichts scheint beim Scrollen durch
- Leistungen: Überschrift bleibt links stehen, während die Liste vorbeizieht
- langer Handy-Screenshot unten beschnitten (kein schwarzer Streifen am Ende)
- Titel, Beschreibung, og/twitter nach Spezifikation 6.5; canonical je Route
- Über uns ohne alte Versprechen, nur belegte Aussagen
- Schrittzeile neutral benannt, Tippflächen 44 px, Navigation als eigenes Modul

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/home/Kundenportal.tsx

@@ -32,7 +32,7 @@ const desktopBild = (name: string, alt: string): RahmenBildDaten => ({
   alt,
 });
 
-/** Handy-Bild: Rohformat 780 x 1688 (das lange Bild 780 x 5428), ausgeliefert in 390 / 780 px. */
+/** Handy-Bild: Rohformat 780 x 1688 (das lange Bild 780 x 5219), ausgeliefert in 390 / 780 px. */
 const handyBild = (name: string, alt: string, sizes: string, hoehe = 1688): RahmenBildDaten => ({
   src: `${BILDER}/${name}-780.webp`,
   srcSet: srcSet(name, HANDY_BREITEN),
@@ -291,7 +291,7 @@ const Buehne = () => {
                   >
                     {f.lang ? (
                       <div className="kp-lang">
-                        <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "(min-width: 1200px) 340px, 30vw", 5428)} />
+                        <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "(min-width: 1200px) 340px, 30vw", 5219)} />
                       </div>
                     ) : (
                       <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "(min-width: 1200px) 230px, 20vw")} />
@@ -326,7 +326,7 @@ const LangeKarte = ({ f }: { f: Funktion }) => {
     <div className="kp-karte" ref={ref} data-sichtbar={sichtbar ? "ja" : "nein"}>
       <HandyRahmen className="kp-karte__handy">
         <div className="kp-lang">
-          <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "250px", 5428)} />
+          <RahmenBild bild={handyBild(f.handy.name, f.handy.alt, "250px", 5219)} />
         </div>
       </HandyRahmen>
       <h3 className="wk-h3 kp-karte__titel">{f.titel}</h3>
@@ -358,7 +358,7 @@ const HandyReihe = () => (
 const Schrittzeile = ({ desktop }: { desktop: boolean }) =>
   desktop ? (
     <div className="wk-container">
-      <ol className="kp-schritte wk-reveal" aria-label="So arbeiten wir">
+      <ol className="kp-schritte wk-reveal" aria-label="Ablauf in vier Schritten">
         {SCHRITTE.map((s) => (
           <li key={s.nr} className="kp-schritt">
             <span className="kp-schritt__nr wk-num">{s.nr}</span>
@@ -369,7 +369,7 @@ const Schrittzeile = ({ desktop }: { desktop: boolean }) =>
     </div>
   ) : (
     <div className="kp-schritte-handy">
-      <WischReihe ariaLabel="So arbeiten wir, vier Schritte, seitlich wischen" className="kp-schritte-reihe">
+      <WischReihe ariaLabel="Ablauf in vier Schritten, seitlich wischen" className="kp-schritte-reihe">
         {SCHRITTE.map((s) => (
           <div key={s.nr} className="kp-schritt-karte">
             <span className="kp-schritt__nr wk-num">{s.nr}</span>

src/components/home/home.css

@@ -7,7 +7,12 @@
   align-items: start;
 }
 .wk-ueber-uns__link {
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
+}
+.wk-ueber-uns__link a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
 }
 @media (max-width: 899.98px) {
   .wk-ueber-uns {

src/components/home/kundenportal.css

@@ -210,8 +210,8 @@
   transform: translate(-35cqw, -16.75cqw) scale(1.5);
 }
 
-/* Der lange Screenshot: gleiche Breite wie der Schirm, 68,9 % seiner Höhe wandern aus dem Bild
-   ((5428 - 1688) / 5428). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */
+/* Der lange Screenshot: gleiche Breite wie der Schirm, 67,66 % seiner Höhe wandern aus dem Bild
+   ((5219 - 1688) / 5219). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */
 .kp-lang {
   position: absolute;
   top: 0;
@@ -233,7 +233,7 @@
     transition: transform var(--dur-enter) var(--ease);
   }
   .kp-buehne .kp-lang {
-    transform: translateY(calc(var(--kp-q, 0) * -68.9%));
+    transform: translateY(calc(var(--kp-q, 0) * -67.66%));
   }
   /* die große Ebene nur im letzten Schritt auf die Grafikkarte legen */
   .kp-buehne[data-app="ja"] .kp-lang {
@@ -276,7 +276,7 @@
     transform: translateY(0);
   }
   100% {
-    transform: translateY(-68.9%);
+    transform: translateY(-67.66%);
   }
 }
 

src/components/home/leistungen.css

@@ -68,6 +68,9 @@
   .wk-leistungen__kopf {
     grid-column: 1;
     grid-row: 1 / span 2;
+    position: sticky;
+    top: calc(var(--header-h) + 3rem);
+    align-self: start;
   }
   .wk-leistungen__liste {
     grid-column: 2;

src/components/site/SiteHeader.tsx

@@ -3,18 +3,9 @@ import { Link, useLocation } from "react-router-dom";
 import { useTheme } from "next-themes";
 import { Moon, Sun } from "lucide-react";
 import Logo from "@/components/Logo";
-import { projekte } from "@/data/projekte";
+import { NAVIGATION } from "./navigation";
 import "./site.css";
 
-/** Navigation der Kopfleiste (Spezifikation 6.1). „Projekte“ erscheint erst mit freigegebenen Referenzen. */
-export const NAVIGATION = [
-  { label: "Kundenportal", to: "/#kundenportal" },
-  { label: "Was wir bauen", to: "/#leistungen" },
-  ...(projekte.length > 0 ? [{ label: "Projekte", to: "/#projekte" }] : []),
-  { label: "Preise", to: "/#preise" },
-  { label: "Über uns", to: "/#ueber-uns" },
-];
-
 /** Hell/Dunkel umschalten. Vor dem ersten Rendern ist das Thema unbekannt, daher kein Symbolwechsel beim Laden. */
 const ThemaSchalter = ({ mitText = false }: { mitText?: boolean }) => {
   const { resolvedTheme, setTheme } = useTheme();

src/components/site/navigation.ts

@@ -0,0 +1,10 @@
+import { projekte } from "@/data/projekte";
+
+/** Navigation der Kopfleiste (Spezifikation 6.1). „Projekte“ erscheint erst mit freigegebenen Referenzen. */
+export const NAVIGATION = [
+  { label: "Kundenportal", to: "/#kundenportal" },
+  { label: "Was wir bauen", to: "/#leistungen" },
+  ...(projekte.length > 0 ? [{ label: "Projekte", to: "/#projekte" }] : []),
+  { label: "Preise", to: "/#preise" },
+  { label: "Über uns", to: "/#ueber-uns" },
+];

src/components/site/site.css

@@ -4,7 +4,7 @@
   position: sticky;
   top: 0;
   z-index: 50;
-  background: color-mix(in srgb, var(--bg) 94%, transparent);
+  background: var(--bg);
   border-bottom: 1px solid transparent;
   transition: border-color var(--dur-state) var(--ease);
 }
@@ -233,7 +233,8 @@
   color: var(--fg);
   font-weight: 600;
   font-size: 1rem;
-  margin-bottom: 0.75rem;
+  min-height: 44px;
+  margin-bottom: 0.25rem;
 }
 .wk-footer__marke svg {
   border-radius: 6px;