Design-Politur R1: Dark-Mode-Kontrast, IA-Nähte, Pfad-A-Hero, Icons (Review, nicht mergen)

CLAUDE.md

@@ -297,6 +297,19 @@ Zwei verzahnte Lernwege: **Faktenchecks** (konkrete Behauptungen) und **Maschen*
   - **OAuth-Scope** des Baukastens (`scope=public_repo`, Zeile ~416) ist breit; verengen
     nur mit Live-Test, da es den funktionierenden Fork-Flow gefährden kann. Vorerst nur
     Transparenz-Hinweis ergänzt.
-  - **Niedrig:** `astro check || true` in `ci.yml` schluckt Typfehler; Inter-Fonts vom
-    Google-CDN (vs. „trackingfrei"-Versprechen) selbst hosten; `display:none`-Tiefen ggf.
-    auf ARIA-Tab-Pattern (SEO ist aber ok, da statisch im DOM).
+  - **Niedrig:** `astro check || true` in `ci.yml` schluckt Typfehler; `display:none`-Tiefen ggf.
+    auf ARIA-Tab-Pattern (SEO ist aber ok, da statisch im DOM). (Inter-Font-Selbsthosting ist
+    ✅ erledigt – `InterVariable.woff2` lokal in `public/fonts/`, kein Google-CDN mehr.)
+- **Design-Politur Runde 1 (07/2026, Branch `claude/design-politur-r1`, in Review, NICHT live):**
+  Owner-Auftrag „fertiges, zeitgeist-taugliches Produkt". 3 Eval-Agents (Design-Zeitgeist,
+  IA/Code-Audit, A11y/Perf/SEO) → Befund: Fundament stark, „gebastelt"-Wirkung nur an den Nähten.
+  Umgesetzt: **Dark-Mode-CTA-Kontrast-Fix** (neues Token `--c-on-accent`, dunkler Text auf hellem
+  Akzent – war WCAG-Fail 2,47:1 auf allen Primär-Buttons/aktiven Filtern/Stufen-Schaltern);
+  **IA:** Werkzeugkasten einheitlich benannt (vorher Nav „Selbst prüfen" ≠ Footer/URL), Footer =
+  Header gespiegelt (O-Ton + Quiz ergänzt); **Startseiten-H1 tonal auf Pfad A** („Behauptungen
+  prüfen — mit Belegen statt Meinung." statt „So wirst du manipuliert"); **Emoji-Icons → Lucide**
+  (mitmachen); `robots.txt` + Sitemap-Verweis; per-Seite `og:image:alt`; Mobile-Touch-Ziele 44px;
+  `.q-tag`-Duplikat entfernt. **SEO-Canonical/BASE_PATH war KEIN Problem** (Deploy setzt korrekt).
+  Offen/Runde 2 (bewusst nicht gemacht, für Review): Spacing-Token-Skala, Masche-Card-Vereinheit-
+  lichung, `.kurzantwort-box` als geteilte Klasse, restliche Emojis (Kopier-/Selbsttest-Button),
+  optional Serif-Body / partei-neutrale Teal-Akzentfarbe (subjektiv → erst mit Nutzer).

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://kompetenz.partizip.online/sitemap-index.xml

src/components/StufenSchalter.astro

@@ -66,10 +66,10 @@
   .stufen-schalter button span { font-size: .76rem; color: var(--c-text-soft); font-weight: 500; }
   .stufen-schalter button:hover { background: var(--c-surface); border-color: var(--c-border); }
   .stufen-schalter button[aria-pressed="true"] {
-    background: var(--c-accent); border-color: var(--c-accent); color: #fff;
+    background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent);
     box-shadow: 0 1px 3px rgba(16,24,40,.18);
   }
-  .stufen-schalter button[aria-pressed="true"] span { color: rgba(255,255,255,.88); }
+  .stufen-schalter button[aria-pressed="true"] span { color: color-mix(in srgb, var(--c-on-accent) 82%, transparent); }
 
   /* Kompakt-Modus: greift, sobald die Leiste beim Scrollen oben „klebt“.
      Spart Platz – nur noch die drei Buttons als schlanke Leiste. */

src/layouts/BaseLayout.astro

@@ -7,13 +7,15 @@ interface Props {
   beschreibung?: string;
   breit?: boolean;
   bild?: string;
+  bildAlt?: string;
   seitentyp?: "website" | "article";
 }
 const {
   titel,
   beschreibung = "Falschbehauptungen prüfen lernen – faktenbasiert, transparent, je nach Vorwissen aufbereitet.",
   breit = false,
   bild = "/og-default.png",
+  bildAlt = "Kompetenzzentrum – Falschbehauptungen prüfen lernen",
   seitentyp = "website",
 } = Astro.props;
 
@@ -25,7 +27,7 @@ const nav = [
   { href: "/faktenchecks", text: "Faktenchecks" },
   { href: "/maschen", text: "Maschen" },
   { href: "/o-ton", text: "O-Ton" },
-  { href: "/werkzeugkasten", text: "Selbst prüfen" },
+  { href: "/werkzeugkasten", text: "Werkzeugkasten" },
   { href: "/methodik", text: "Wie wir arbeiten" },
   { href: "/mitmachen", text: "Mitmachen", cta: true },
 ];
@@ -59,7 +61,7 @@ const vollerTitel = titel === "Kompetenzzentrum" ? titel : `${titel} · Kompeten
     <meta property="og:image" content={ogBild} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="Kompetenzzentrum – Falschbehauptungen prüfen lernen" />
+    <meta property="og:image:alt" content={bildAlt} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={vollerTitel} />
     <meta name="twitter:description" content={beschreibung} />
@@ -159,8 +161,10 @@ const vollerTitel = titel === "Kompetenzzentrum" ? titel : `${titel} · Kompeten
             <ul>
               <li><a href={pfad("/faktenchecks")}>Faktenchecks</a></li>
               <li><a href={pfad("/maschen")}>Maschen</a></li>
+              <li><a href={pfad("/o-ton")}>O-Ton</a></li>
               <li><a href={pfad("/werkzeugkasten")}>Werkzeugkasten</a></li>
-              <li><a href={pfad("/methodik")}>Methodik</a></li>
+              <li><a href={pfad("/quiz")}>Quiz</a></li>
+              <li><a href={pfad("/methodik")}>Wie wir arbeiten</a></li>
             </ul>
           </div>
           <div>

src/pages/faktenchecks/index.astro

@@ -99,8 +99,9 @@ const vorhandeneTechniken = Object.keys(TECHNIK_LABEL).filter((t) =>
     border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-soft);
   }
   .filter-btn:hover { border-color: var(--c-accent); }
-  .filter-btn[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
-  .filter-btn--urteil[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); }
+  .filter-btn[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
+  .filter-btn--urteil[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
+  @media (max-width: 720px) { .filter-btn { min-height: 44px; } }
 
   .treffer { margin: .5rem 0 1.25rem; font-weight: 600; }
   .fc-item.versteckt { display: none; }

src/pages/index.astro

@@ -27,7 +27,7 @@ const maschenTop = maschen.filter((m) => m.id !== macheDerWoche?.id).slice(0, 6)
 <BaseLayout titel="Kompetenzzentrum" breit>
   <section class="hero">
     <p class="hero__kicker" data-reveal>Stimmt das wirklich?</p>
-    <h1 data-reveal>So wirst du manipuliert — <span class="turn">und so durchschaust du es.</span></h1>
+    <h1 data-reveal>Behauptungen prüfen — <span class="turn">mit Belegen statt Meinung.</span></h1>
     <p class="lead" data-reveal>
       Hier prüfen wir Behauptungen aus Politik und Netz – mit echten Quellen,
       so einfach wie möglich erklärt. <strong>Du wählst selbst, wie tief du gehst</strong>:
@@ -304,7 +304,7 @@ const maschenTop = maschen.filter((m) => m.id !== macheDerWoche?.id).slice(0, 6)
   .val--accent { color: var(--c-accent); }
   .zahl__src { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: .82rem; color: var(--c-text-soft); }
   .zahl__src a { font-weight: 600; white-space: nowrap; }
-  .q-tag { font-size: .62rem; font-weight: 800; padding: .1rem .42rem; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); text-transform: uppercase; letter-spacing: .03em; }
+  /* .q-tag nutzt jetzt die globale Definition (global.css) – Duplikat entfernt. */
 
   .zwecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 3.5rem; }
   .zweck { align-items: flex-start; }

src/pages/mitmachen.astro

@@ -1,15 +1,16 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import { Icon } from "astro-icon/components";
 import { pfad } from "../lib/labels";
 
 const repo = "https://github.com/pseidler89-sudo/Kompetenzzentrum";
 const wege = [
-  { icon: "🧩", titel: "Faktencheck-Baukasten (mit Live-Vorschau)", text: "Am einfachsten: Faktencheck im Formular zusammenstellen, rechts live sehen, wie er auf der Seite aussieht – und mit einem Klick als Pull Request auf GitHub anlegen. Kein Markdown, keine Technik.", link: pfad("/tools/faktencheck-baukasten"), linkText: "Baukasten öffnen" },
-  { icon: "🛠️", titel: "Redaktion: Bestehendes bearbeiten", text: "Zum Pflegen statt Neu-Anlegen: bestehende Faktenchecks – und auch Maschen & Methodik – im Formular-Editor (/admin) anpassen und den Status verwalten (Entwurf · In Prüfung · Geprüft). Mit GitHub-Login.", link: pfad("/admin/"), linkText: "Redaktion öffnen" },
-  { icon: "✍️", titel: "Faktencheck vorschlagen", text: "Lieber erst eine Idee einbringen? Schlag eine Behauptung vor, die geprüft werden soll.", link: `${repo}/issues/new?template=neuer-faktencheck.yml`, linkText: "Thema vorschlagen" },
-  { icon: "🔍", titel: "Quellen & Zahlen prüfen", text: "Sind alle Zahlen aktuell, alle Links gültig? Sorgfältiges Gegenlesen ist Gold wert.", link: `${repo}/issues`, linkText: "Offene Aufgaben ansehen" },
-  { icon: "🐛", titel: "Fehler melden", text: "Falsche Zahl, toter Link, missverständliche Formulierung? Sag uns Bescheid.", link: `${repo}/issues/new?template=fehler-melden.yml`, linkText: "Fehler melden" },
-  { icon: "💻", titel: "Technik & Design", text: "Astro, CSS, Barrierefreiheit, Übersetzung: Auch an der Plattform selbst kannst du mitbauen.", link: `${repo}`, linkText: "Repository öffnen" },
+  { icon: "lucide:blocks", titel: "Faktencheck-Baukasten (mit Live-Vorschau)", text: "Am einfachsten: Faktencheck im Formular zusammenstellen, rechts live sehen, wie er auf der Seite aussieht – und mit einem Klick als Pull Request auf GitHub anlegen. Kein Markdown, keine Technik.", link: pfad("/tools/faktencheck-baukasten"), linkText: "Baukasten öffnen" },
+  { icon: "lucide:pencil-ruler", titel: "Redaktion: Bestehendes bearbeiten", text: "Zum Pflegen statt Neu-Anlegen: bestehende Faktenchecks – und auch Maschen & Methodik – im Formular-Editor (/admin) anpassen und den Status verwalten (Entwurf · In Prüfung · Geprüft). Mit GitHub-Login.", link: pfad("/admin/"), linkText: "Redaktion öffnen" },
+  { icon: "lucide:lightbulb", titel: "Faktencheck vorschlagen", text: "Lieber erst eine Idee einbringen? Schlag eine Behauptung vor, die geprüft werden soll.", link: `${repo}/issues/new?template=neuer-faktencheck.yml`, linkText: "Thema vorschlagen" },
+  { icon: "lucide:search-check", titel: "Quellen & Zahlen prüfen", text: "Sind alle Zahlen aktuell, alle Links gültig? Sorgfältiges Gegenlesen ist Gold wert.", link: `${repo}/issues`, linkText: "Offene Aufgaben ansehen" },
+  { icon: "lucide:bug", titel: "Fehler melden", text: "Falsche Zahl, toter Link, missverständliche Formulierung? Sag uns Bescheid.", link: `${repo}/issues/new?template=fehler-melden.yml`, linkText: "Fehler melden" },
+  { icon: "lucide:code", titel: "Technik & Design", text: "Astro, CSS, Barrierefreiheit, Übersetzung: Auch an der Plattform selbst kannst du mitbauen.", link: `${repo}`, linkText: "Repository öffnen" },
 ];
 ---
 
@@ -24,7 +25,7 @@ const wege = [
   <div class="grid grid--2" style="margin-top:2rem;">
     {wege.map((w) => (
       <div class="card">
-        <h3 style="margin:0;">{w.icon} {w.titel}</h3>
+        <h3 class="weg-titel" style="margin:0;"><span class="weg-ic" aria-hidden="true"><Icon name={w.icon} /></span> {w.titel}</h3>
         <p style="margin:0;flex:1;">{w.text}</p>
         <a class="btn btn--ghost" href={w.link} rel="noopener">{w.linkText}</a>
       </div>
@@ -63,6 +64,14 @@ const wege = [
 
 <style>
   section { margin-top: 3rem; }
+  .weg-titel { display: flex; align-items: center; gap: .6rem; }
+  .weg-ic {
+    width: 2.1rem; height: 2.1rem; flex: none; border-radius: 9px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface));
+    color: var(--c-accent);
+  }
+  .weg-ic svg { width: 1.2rem; height: 1.2rem; }
   .ablauf { display: grid; gap: .7rem; padding-left: 1.2rem; }
   .start-cta { text-align: center; padding: 2.5rem 1.5rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
   .start-cta .hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }

src/pages/werkzeugkasten.astro

@@ -10,8 +10,8 @@ const sift = [
 ];
 ---
 
-<BaseLayout titel="Selbst prüfen" beschreibung="Methoden, um Informationen selbst zu finden und zu bewerten.">
-  <h1>Selbst prüfen</h1>
+<BaseLayout titel="Werkzeugkasten" beschreibung="Methoden, um Informationen selbst zu finden und zu bewerten.">
+  <h1>Werkzeugkasten</h1>
   <p class="lead">
     Hier geht es ums <strong>Selbst-Prüfen</strong>: wie du Informationen findest,
     einordnest und bewertest. (Die Manipulations-<em>Maschen</em>, mit denen du

src/styles/global.css

@@ -22,6 +22,10 @@
   --c-accent-strong: #16498f;
   --c-accent-soft: #e8f0fb;
   --c-link: #1450a8;
+  /* Vordergrundfarbe auf Akzent-Flächen (Buttons, aktive States). Im Light-Mode
+     ist der Akzent dunkel genug für Weiß; im Dark-Mode ist der Akzent hell →
+     dunkler Text (siehe Dark-Blöcke), sonst WCAG-Kontrast-Fail. */
+  --c-on-accent: #ffffff;
 
   /* Urteilsfarben – semantisch klar, AA-kontraststark auf hellen Tönten. */
   --c-falsch: #b71c1c;
@@ -84,6 +88,7 @@
   --c-accent-strong: #93bcff;
   --c-accent-soft: #182942;
   --c-link: #8db8ff;
+  --c-on-accent: #0b1a33;
 
   --c-falsch: #ff8a85;
   --c-falsch-bg: #38191a;
@@ -116,6 +121,7 @@
     --c-accent-strong: #93bcff;
     --c-accent-soft: #182942;
     --c-link: #8db8ff;
+    --c-on-accent: #0b1a33;
 
     /* Im Dark Mode sowohl Vordergrund als auch Hintergrund anpassen,
        damit das Urteil farbig UND kontraststark bleibt. */
@@ -252,9 +258,9 @@ blockquote {
 .site-nav a:hover { color: var(--c-text); background: var(--c-surface-2); }
 .site-nav a[aria-current="page"] { color: var(--c-accent); background: var(--c-accent-soft); }
 /* „Mitmachen" als hervorgehobene Aktion rechts in der Leiste. */
-.site-nav a.nav-cta { color: #fff; background: var(--c-accent); font-weight: 700; margin-left: .35rem; }
-.site-nav a.nav-cta:hover { color: #fff; background: var(--c-accent-strong); }
-.site-nav a.nav-cta[aria-current="page"] { color: #fff; background: var(--c-accent-strong); }
+.site-nav a.nav-cta { color: var(--c-on-accent); background: var(--c-accent); font-weight: 700; margin-left: .35rem; }
+.site-nav a.nav-cta:hover { color: var(--c-on-accent); background: var(--c-accent-strong); }
+.site-nav a.nav-cta[aria-current="page"] { color: var(--c-on-accent); background: var(--c-accent-strong); }
 
 .site-footer {
   border-top: 1px solid var(--c-border);
@@ -309,8 +315,8 @@ a.badge:hover { border-color: var(--c-border-strong); color: var(--c-text); }
   transition: transform .06s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
 }
 .btn:active { transform: translateY(1px); }
-.btn--primary { background: var(--c-accent); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
-.btn--primary:hover { background: var(--c-accent-strong); }
+.btn--primary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
+.btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); }
 .btn--ghost { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
 .btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
 
@@ -474,7 +480,8 @@ tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-surface-2) 45%
     border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lift);
     z-index: 60;
   }
-  .nav-burger[open] > .site-nav--mobile a { padding: .6rem .8rem; font-size: 1rem; }
+  .nav-burger[open] > .site-nav--mobile a { padding: .7rem .8rem; font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
+  .theme-toggle { width: 44px; height: 44px; }
 }
 
 @media (prefers-reduced-motion: reduce) {