Neubau Fundament + Startseite: Designsystem, PHP-Komponenten, Brevo-Formular, Instagram-Sync

- Ordnerstruktur mit public/-Docroot, Deny-.htaccess für app/bin/config/data/storage
- CLAUDE.md mit Leitplanken (self-hosted only, Single Source of Truth, Component-first)
- Design-Tokens aus alter Seite extrahiert (Akzent #e20612, Coolvetica/Abel als woff2)
- Front Controller mit Routen-Register, Sitemap, Canonical, JSON-LD (SportsClub)
- Startseite: Hero, Instagram-Feed (lokaler Cache), Historie/Sportheim, Stats, Partner, Kontakt
- Kontaktformular via PHPMailer/Brevo mit Honeypot + HMAC-Time-Trap (kein reCAPTCHA)
- bin/instagram-sync.php: Scraper mit Strategie-Kette, flock, atomarem Cache, lokalen Bildern

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/assets/css/base.css

@@ -0,0 +1,106 @@
+/* ============================================================
+   BASE — Fonts, Typografie, Links, Fokus, Skip-Link
+   ============================================================ */
+@font-face {
+    font-family: 'Coolvetica';
+    src: url('../fonts/coolvetica.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Abel';
+    src: url('../fonts/abel.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    font-family: var(--ff-body);
+    font-size: var(--fs-600);
+    font-weight: var(--fw-regular);
+    line-height: var(--lh-body);
+    color: var(--clr-text);
+    background-color: var(--clr-bg);
+    background-image: url('../img/background.jpg');
+    background-size: 100% auto;
+    background-attachment: fixed;
+}
+
+@media (max-width: 768px) {
+    body {
+        /* fixed-Attachment ruckelt auf Mobile */
+        background-attachment: scroll;
+        background-size: auto;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--ff-heading);
+    font-weight: var(--fw-regular);
+    line-height: var(--lh-heading);
+    text-transform: uppercase;
+    text-wrap: balance;
+}
+
+h1 { font-size: var(--fs-900); }
+h2 { font-size: var(--fs-800); }
+h3 { font-size: var(--fs-700); }
+h4 { font-size: 1.625rem; }
+h5,
+h6 { font-size: var(--fs-600); }
+
+p {
+    max-width: 70ch;
+}
+
+a {
+    color: inherit;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+}
+
+a:hover {
+    color: var(--clr-text-muted);
+}
+
+:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: 3px;
+    border-radius: 2px;
+}
+
+::selection {
+    background: var(--clr-accent);
+    color: var(--clr-text);
+}
+
+.skip-link {
+    position: absolute;
+    top: -100%;
+    left: 1rem;
+    z-index: 100;
+    padding: 0.75em 1.25em;
+    background: var(--clr-accent);
+    color: var(--clr-text);
+    text-decoration: none;
+    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
+}
+
+.skip-link:focus-visible {
+    top: 0;
+    color: var(--clr-text);
+}
+
+/* Scrollbar dezent dunkel */
+html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--clr-bg-corporate) transparent;
+}