Initial commit

admin.php

@@ -0,0 +1,399 @@
+<?php
+// admin.php - Multi-User Login, Google Authenticator 2FA & News Verwaltung
+session_start();
+
+// Fehleranzeige (für Live-Betrieb auf 0 setzen)
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+// ============================================================================
+// 1. MINI-KLASSE FÜR GOOGLE AUTHENTICATOR (TOTP)
+// ============================================================================
+class MiniTOTP {
+    public static function verify($secret, $code) {
+        $time = floor(time() / 30);
+        for ($i = -1; $i <= 1; $i++) {
+            if (self::getCode($secret, $time + $i) === $code) return true;
+        }
+        return false;
+    }
+    public static function getCode($secret, $time) {
+        $secret = self::base32Decode($secret);
+        $time = pack('N', 0) . pack('N', $time);
+        $hash = hash_hmac('sha1', $time, $secret, true);
+        $offset = ord(substr($hash, -1)) & 0x0F;
+        $code = (unpack('N', substr($hash, $offset, 4))[1] & 0x7FFFFFFF) % 1000000;
+        return str_pad($code, 6, '0', STR_PAD_LEFT);
+    }
+    public static function base32Decode($b32) {
+        $b32 = strtoupper($b32);
+        $map = ['A'=>0,'B'=>1,'C'=>2,'D'=>3,'E'=>4,'F'=>5,'G'=>6,'H'=>7,'I'=>8,'J'=>9,'K'=>10,'L'=>11,'M'=>12,'N'=>13,'O'=>14,'P'=>15,'Q'=>16,'R'=>17,'S'=>18,'T'=>19,'U'=>20,'V'=>21,'W'=>22,'X'=>23,'Y'=>24,'Z'=>25,'2'=>26,'3'=>27,'4'=>28,'5'=>29,'6'=>30,'7'=>31];
+        $decoded = ''; $buffer = 0; $bits = 0;
+        for ($i = 0; $i < strlen($b32); $i++) {
+            $char = $b32[$i];
+            if (!isset($map[$char])) continue;
+            $buffer = ($buffer << 5) | $map[$char];
+            $bits += 5;
+            if ($bits >= 8) { $bits -= 8; $decoded .= chr(($buffer >> $bits) & 0xFF); }
+        }
+        return $decoded;
+    }
+    public static function generateSecret($length = 16) {
+        $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+        $secret = '';
+        for ($i = 0; $i < $length; $i++) $secret .= $chars[random_int(0, 31)];
+        return $secret;
+    }
+    public static function getQRCodeUrl($username, $secret) {
+        $issuer = urlencode("SG 07 St.Leon");
+        $account = urlencode($username);
+        $otpauth = "otpauth://totp/{$issuer}:{$account}?secret={$secret}&issuer={$issuer}";
+        return "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" . urlencode($otpauth);
+    }
+}
+
+// ============================================================================
+// 2. DATENBANK SETUP (News & Benutzer)
+// ============================================================================
+try {
+    $db = new PDO('sqlite:news_database.sqlite');
+    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    // News Tabelle
+    $db->exec("CREATE TABLE IF NOT EXISTS news (
+        id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, department TEXT, title TEXT, content TEXT, full_text TEXT, image TEXT, link TEXT
+    )");
+    try { $db->exec("ALTER TABLE news ADD COLUMN full_text TEXT"); } catch(PDOException $e) {}
+
+    // Benutzer Tabelle
+    $db->exec("CREATE TABLE IF NOT EXISTS users (
+        id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT UNIQUE, password_hash TEXT, totp_secret TEXT
+    )");
+} catch(PDOException $e) {
+    die("Datenbankfehler: " . $e->getMessage());
+}
+
+$userCount = $db->query("SELECT COUNT(*) FROM users")->fetchColumn();
+
+// ============================================================================
+// 3. ERSTEINRICHTUNG (Wenn keine Nutzer existieren)
+// ============================================================================
+if ($userCount == 0) {
+    $setup_msg = "";
+    $new_secret = MiniTOTP::generateSecret();
+    
+    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['do_setup'])) {
+        $user = trim($_POST['username']);
+        $pass = $_POST['password'];
+        $secret = $_POST['totp_secret'];
+        
+        if (!empty($user) && !empty($pass)) {
+            $stmt = $db->prepare("INSERT INTO users (username, password_hash, totp_secret) VALUES (?, ?, ?)");
+            $stmt->execute([$user, password_hash($pass, PASSWORD_DEFAULT), $secret]);
+            header("Location: admin.php");
+            exit;
+        }
+    }
+    ?>
+    <!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><title>Setup | SG 07</title>
+    <style>body{font-family:sans-serif;background:#f4f4f4;display:flex;justify-content:center;align-items:center;height:100vh;} .box{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);max-width:400px;text-align:center;} input,button{width:100%;padding:10px;margin:10px 0;box-sizing:border-box;} button{background:#d32f2f;color:white;border:none;font-weight:bold;cursor:pointer;} .qr{margin:20px 0;}</style></head>
+    <body><div class="box"><h1 style="color:#d32f2f;">Ersteinrichtung</h1><p>Erstelle den ersten Admin-Zugang.</p>
+    <img src="<?= MiniTOTP::getQRCodeUrl('Admin', $new_secret) ?>" class="qr" alt="QR Code">
+    <p style="font-size:0.9rem;color:#666;">1. Scanne diesen QR-Code mit dem <b>Google Authenticator</b> oder <b>Authy</b>.</p>
+    <form method="POST">
+        <input type="text" name="username" placeholder="Benutzername" required>
+        <input type="password" name="password" placeholder="Sicheres Passwort" required>
+        <input type="hidden" name="totp_secret" value="<?= $new_secret ?>">
+        <button type="submit" name="do_setup">Admin anlegen & weiter</button>
+    </form></div></body></html>
+    <?php exit;
+}
+
+// ============================================================================
+// 4. LOGIN LOGIK
+// ============================================================================
+if (isset($_GET['action']) && $_GET['action'] == 'logout') {
+    session_destroy(); header("Location: admin.php"); exit;
+}
+
+$login_error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['do_login'])) {
+    $stmt = $db->prepare("SELECT * FROM users WHERE username = ?");
+    $stmt->execute([trim($_POST['username'])]);
+    $user = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if ($user && password_verify($_POST['password'], $user['password_hash'])) {
+        if (MiniTOTP::verify($user['totp_secret'], $_POST['totp_code'])) {
+            $_SESSION['logged_in'] = true;
+            $_SESSION['username'] = $user['username'];
+            header("Location: admin.php"); exit;
+        } else {
+            $login_error = "Der 2FA Code ist falsch oder abgelaufen.";
+        }
+    } else {
+        $login_error = "Benutzername oder Passwort falsch.";
+    }
+}
+
+if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
+    ?>
+    <!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><title>Login | SG 07</title>
+    <style>body{font-family:'Segoe UI',sans-serif;background:#f4f4f4;display:flex;justify-content:center;align-items:center;height:100vh;} .login-box{background:#fff;padding:40px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:350px;width:100%;text-align:center;border-top:5px solid #d32f2f;} input{width:100%;padding:12px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;} button{width:100%;padding:14px;background:#d32f2f;color:white;border:none;font-weight:bold;border-radius:4px;cursor:pointer;} button:hover{background:#9a0007;} .err{color:red;margin-bottom:15px;}</style></head>
+    <body><div class="login-box"><div style="font-size:3rem;">🔒</div><h1 style="color:#d32f2f;margin-bottom:20px;">Admin Login</h1>
+    <?php if($login_error) echo "<div class='err'>$login_error</div>"; ?>
+    <form method="POST">
+        <input type="text" name="username" placeholder="Benutzername" required autofocus>
+        <input type="password" name="password" placeholder="Passwort" required>
+        <input type="text" name="totp_code" placeholder="6-stelliger Authenticator Code" pattern="\d{6}" maxlength="6" required autocomplete="off">
+        <button type="submit" name="do_login">Sicher einloggen</button>
+    </form></div></body></html>
+    <?php exit;
+}
+
+// ============================================================================
+// 5. ADMIN BEREICH (Eingeloggt)
+// ============================================================================
+$message = "";
+
+// --- NEU: Bild-Upload Funktion ---
+function handleImageUpload() {
+    if (isset($_FILES['image_file']) && $_FILES['image_file']['error'] === UPLOAD_ERR_OK) {
+        $year = date('Y');
+        // Ordnerstruktur: img/news/YYYY (wird automatisch erstellt, falls nicht vorhanden)
+        $upload_dir = __DIR__ . '/img/news/' . $year;
+        if (!is_dir($upload_dir)) {
+            mkdir($upload_dir, 0777, true);
+        }
+        
+        $ext = strtolower(pathinfo($_FILES['image_file']['name'], PATHINFO_EXTENSION));
+        $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+        
+        if (in_array($ext, $allowed)) {
+            // Format: YYYYMMDD_randomnummer.format
+            $filename = date('Ymd') . '_' . rand(10000, 99999) . '.' . $ext;
+            $target_file = $upload_dir . '/' . $filename;
+            
+            if (move_uploaded_file($_FILES['image_file']['tmp_name'], $target_file)) {
+                // Gib den relativen Pfad für die Datenbank zurück
+                return 'img/news/' . $year . '/' . $filename;
+            }
+        }
+    }
+    return null;
+}
+
+// Aktion: News aktualisieren (EDIT)
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_news'])) {
+    $final_image_path = $_POST['existing_image']; // Standard: Altes Bild behalten
+    
+    $uploaded_img = handleImageUpload();
+    if ($uploaded_img) {
+        $final_image_path = $uploaded_img; // Neues Upload-Bild nutzen
+    } elseif (isset($_POST['image_url'])) {
+        // Link korrigieren, falls manuell etwas eingetragen wurde
+        $final_image_path = str_replace(['http://new.sg07-stleon.de/', 'https://new.sg07-stleon.de/', 'new.sg07-stleon.de/', 'new.sg07-stleon.de\\'], '', trim($_POST['image_url']));
+    }
+
+    $stmt = $db->prepare("UPDATE news SET date=?, department=?, title=?, content=?, full_text=?, image=?, link=? WHERE id=?");
+    if ($stmt->execute([$_POST['date'], $_POST['department'], $_POST['title'], $_POST['content'], $_POST['full_text'], $final_image_path, $_POST['link'], $_POST['news_id']])) {
+        $message = "<div class='success'>✓ News erfolgreich aktualisiert!</div>";
+    }
+}
+
+// Aktion: News speichern (NEU ERSTELLEN)
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_news'])) {
+    $final_image_path = '';
+    
+    $uploaded_img = handleImageUpload();
+    if ($uploaded_img) {
+        $final_image_path = $uploaded_img;
+    } else {
+        $final_image_path = str_replace(['http://new.sg07-stleon.de/', 'https://new.sg07-stleon.de/', 'new.sg07-stleon.de/', 'new.sg07-stleon.de\\'], '', trim($_POST['image_url'] ?? ''));
+    }
+
+    $stmt = $db->prepare("INSERT INTO news (date, department, title, content, full_text, image, link) VALUES (?, ?, ?, ?, ?, ?, ?)");
+    if ($stmt->execute([$_POST['date'], $_POST['department'], $_POST['title'], $_POST['content'], $_POST['full_text'], $final_image_path, $_POST['link']])) {
+        $message = "<div class='success'>✓ News erfolgreich veröffentlicht!</div>";
+    }
+}
+
+// Aktion: News löschen
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_news'])) {
+    $stmt = $db->prepare("DELETE FROM news WHERE id = ?");
+    if ($stmt->execute([$_POST['delete_id']])) {
+         $message = "<div class='success'>✓ Die News wurde unwiderruflich gelöscht!</div>";
+    }
+}
+
+// Aktion: Neuen Benutzer anlegen
+$new_user_qr = "";
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_user'])) {
+    $new_user = trim($_POST['new_username']);
+    $new_pass = $_POST['new_password'];
+    $new_secret = MiniTOTP::generateSecret();
+    
+    try {
+        $stmt = $db->prepare("INSERT INTO users (username, password_hash, totp_secret) VALUES (?, ?, ?)");
+        $stmt->execute([$new_user, password_hash($new_pass, PASSWORD_DEFAULT), $new_secret]);
+        $url = MiniTOTP::getQRCodeUrl($new_user, $new_secret);
+        $new_user_qr = "<div class='qr-box'><h3>Benutzer '$new_user' angelegt!</h3><p>Bitte lasse den neuen Benutzer <b>jetzt sofort</b> diesen QR Code scannen.</p><img src='$url' alt='QR Code'><p>Geheimer Schlüssel (falls QR nicht geht): <b>$new_secret</b></p></div>";
+    } catch(PDOException $e) {
+        $message = "<div class='error'>Fehler: Benutzername existiert evtl. schon.</div>";
+    }
+}
+
+// Edit-Modus prüfen (Ist ein Klick auf "Ändern" erfolgt?)
+$is_edit = false;
+$edit_news = null;
+if (isset($_GET['edit_id'])) {
+    $stmt = $db->prepare("SELECT * FROM news WHERE id = ?");
+    $stmt->execute([$_GET['edit_id']]);
+    $edit_news = $stmt->fetch(PDO::FETCH_ASSOC);
+    if ($edit_news) $is_edit = true;
+}
+
+// Alle bestehenden News abrufen, um sie aufzulisten
+$existing_news = $db->query("SELECT id, date, department, title FROM news ORDER BY id DESC")->fetchAll(PDO::FETCH_ASSOC);
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Admin Dashboard | SG 07 St. Leon</title>
+    <style>
+        body { font-family: 'Segoe UI', sans-serif; background: #f4f4f4; padding: 40px 20px; margin: 0; }
+        .container { max-width: 1000px; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin: 0 auto; }
+        .header-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f4f4f4; padding-bottom: 20px; margin-bottom: 30px; }
+        .header-bar h1 { color: #d32f2f; margin: 0; }
+        .logout-btn { background: #555; color: white; padding: 8px 15px; border-radius: 4px; text-decoration: none; font-weight: bold;}
+        .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
+        label { font-weight: 600; display: block; margin-top: 15px; margin-bottom: 5px; color: #333;}
+        input[type="text"], input[type="password"], textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
+        button { margin-top: 20px; padding: 15px; background: #d32f2f; color: white; border: none; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%; transition: background 0.2s; }
+        button:hover { background: #9a0007; }
+        .success { background: #4CAF50; color: white; padding: 15px; border-radius: 4px; margin-bottom: 20px; font-weight: bold;}
+        .error { background: #d32f2f; color: white; padding: 15px; border-radius: 4px; margin-bottom: 20px; font-weight: bold;}
+        .sidebar-box { background: #fafafa; padding: 20px; border-radius: 8px; border: 1px solid #ddd; }
+        .qr-box { background: #fff3cd; color: #856404; padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 20px; border: 1px solid #ffeeba;}
+        
+        /* Tabelle für News Verwaltung */
+        .news-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95rem; }
+        .news-table th { background: #f4f4f4; padding: 12px; text-align: left; border-bottom: 2px solid #ddd; color: #333; }
+        .news-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
+        .news-table tr:hover { background: #fafafa; }
+        .edit-btn { background: #2196F3; color: white; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 0.9rem; }
+        .delete-btn { background: #d32f2f; color: white; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin: 0; width: auto; font-size: 0.9rem; }
+        
+        @media(max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header-bar">
+            <h1>SG 07 Dashboard</h1>
+            <div>
+                <span style="margin-right:15px; color:#666;">Hallo, <b><?= htmlspecialchars($_SESSION['username']) ?></b></span>
+                <a href="?action=logout" class="logout-btn">Abmelden</a>
+            </div>
+        </div>
+        
+        <?= $message ?>
+        <?= $new_user_qr ?>
+
+        <div class="grid-2">
+            <!-- News Eintragen / Ändern -->
+            <div>
+                <h2 style="color: #333; margin-bottom: 10px;"><?= $is_edit ? 'News bearbeiten' : 'News veröffentlichen' ?></h2>
+                <form method="POST" enctype="multipart/form-data">
+                    <?php if($is_edit): ?>
+                        <input type="hidden" name="news_id" value="<?= $edit_news['id'] ?>">
+                        <input type="hidden" name="existing_image" value="<?= htmlspecialchars($edit_news['image']) ?>">
+                    <?php endif; ?>
+
+                    <label>Datum</label>
+                    <input type="text" name="date" value="<?= $is_edit ? htmlspecialchars($edit_news['date']) : date('d.m.Y') ?>" required>
+                    <label>Abteilung</label>
+                    <input type="text" name="department" placeholder="z.B. Turnen" value="<?= $is_edit ? htmlspecialchars($edit_news['department']) : '' ?>" required>
+                    <label>Überschrift</label>
+                    <input type="text" name="title" value="<?= $is_edit ? htmlspecialchars($edit_news['title']) : '' ?>" required>
+                    <label>Kurze Einleitung (Vorschau)</label>
+                    <textarea name="content" rows="3" required><?= $is_edit ? htmlspecialchars($edit_news['content']) : '' ?></textarea>
+                    <label>Kompletter Artikel (Popup)</label>
+                    <textarea name="full_text" rows="8" required><?= $is_edit ? htmlspecialchars($edit_news['full_text']) : '' ?></textarea>
+                    
+                    <label>Bild hochladen (wird gespeichert unter /img/news/Jahr/...)</label>
+                    <input type="file" name="image_file" accept="image/*" style="background: white;">
+                    <?php if($is_edit && $edit_news['image']): ?>
+                        <p style="font-size: 0.85rem; color: #666; margin-top: -10px; margin-bottom: 10px;">Aktuelles Bild: <b><?= htmlspecialchars($edit_news['image']) ?></b></p>
+                    <?php endif; ?>
+
+                    <label>ODER Bild-Link (URL)</label>
+                    <input type="text" name="image_url" placeholder="https://..." value="<?= $is_edit ? htmlspecialchars($edit_news['image']) : '' ?>">
+                    
+                    <label>Weiterführender Link (Optional)</label>
+                    <input type="text" name="link" value="<?= $is_edit ? htmlspecialchars($edit_news['link']) : '' ?>">
+                    
+                    <?php if($is_edit): ?>
+                        <div style="display: flex; gap: 10px;">
+                            <button type="submit" name="update_news" style="background: #2196F3;">Änderungen speichern</button>
+                            <a href="admin.php" style="display: block; text-align: center; margin-top: 20px; padding: 15px; background: #555; color: white; border-radius: 4px; text-decoration: none; font-weight: bold; width: 100%; box-sizing: border-box;">Abbrechen</a>
+                        </div>
+                    <?php else: ?>
+                        <button type="submit" name="save_news">News online stellen</button>
+                    <?php endif; ?>
+                </form>
+            </div>
+
+            <!-- Benutzerverwaltung -->
+            <div>
+                <div class="sidebar-box">
+                    <h2 style="color: #333; margin-top: 0;">Neuen Admin anlegen</h2>
+                    <p style="font-size: 0.9rem; color: #666;">Lege einen Kollegen an. Ein QR-Code für dessen 2FA-App wird direkt danach <b>einmalig</b> angezeigt.</p>
+                    <form method="POST">
+                        <label>Benutzername</label>
+                        <input type="text" name="new_username" required>
+                        <label>Passwort</label>
+                        <input type="password" name="new_password" required>
+                        <button type="submit" name="add_user" style="background: #333; padding: 10px;">Admin hinzufügen</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- News Liste zum Löschen -->
+        <div style="margin-top: 50px; border-top: 2px solid #eee; padding-top: 30px;">
+            <h2 style="color: #333; margin-bottom: 10px;">Bestehende News verwalten</h2>
+            <p style="color: #666; font-size: 0.95rem;">Hier kannst du fehlerhafte oder veraltete News endgültig von der Website entfernen.</p>
+            
+            <table class="news-table">
+                <tr>
+                    <th>Datum</th>
+                    <th>Abteilung</th>
+                    <th>Titel</th>
+                    <th style="width: 100px; text-align: right;">Aktion</th>
+                </tr>
+                <?php foreach($existing_news as $news_item): ?>
+                <tr>
+                    <td><?= htmlspecialchars($news_item['date']) ?></td>
+                    <td><span style="background: #eee; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem;"><?= htmlspecialchars($news_item['department']) ?></span></td>
+                    <td><strong><?= htmlspecialchars($news_item['title']) ?></strong></td>
+                    <td style="text-align: right; display: flex; justify-content: flex-end; gap: 5px;">
+                        <a href="?edit_id=<?= $news_item['id'] ?>" class="edit-btn">Ändern</a>
+                        <form method="POST" style="margin: 0;" onsubmit="return confirm('Möchtest du diese News wirklich unwiderruflich löschen?');">
+                            <input type="hidden" name="delete_id" value="<?= $news_item['id'] ?>">
+                            <button type="submit" name="delete_news" class="delete-btn">Löschen</button>
+                        </form>
+                    </td>
+                </tr>
+                <?php endforeach; ?>
+                <?php if(empty($existing_news)): ?>
+                <tr>
+                    <td colspan="4" style="text-align: center; padding: 20px; color: #888;">Noch keine News in der Datenbank vorhanden.</td>
+                </tr>
+                <?php endif; ?>
+            </table>
+        </div>
+    </div>
+</body>
+</html>

aktuelles.php

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aktuelles & Archiv | SG 07 St. Leon</title>
+</head>
+
+<!-- Header-->
+<?php 
+$pageTitle = "News | SG 07 St. Leon";
+$activePage = "News & Archiv"; // passend zum Link im header.php
+include 'header.php'; 
+?>
+<!-- /Header-->
+    <div class="hero" style="--hero-bg: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
+        <h1>Aktuelles & Archiv</h1>
+    </div>
+
+    <section>
+        <div class="grid" id="news-container">
+            <!-- ALLE News-Karten erscheinen hier -->
+        </div>
+    </section>
+
+    <!-- DAS NEWS POPUP (MODAL) -->
+    <div class="news-modal" id="newsModal">
+        <div class="news-modal-content">
+            <span class="news-modal-close" onclick="closeNewsModal()">&times;</span>
+            <img src="" alt="News Bild" class="news-modal-img" id="modalImage">
+            <div class="news-modal-header">
+                <div class="news-modal-meta" id="modalMeta">Datum | Abteilung</div>
+                <h2 class="news-modal-title" id="modalTitle">Überschrift</h2>
+            </div>
+            <div class="news-modal-body" id="modalBody">
+                Hier steht dann der komplette Text...
+            </div>
+        </div>
+    </div>
+
+<!-- Footer --> 
+ <?php include 'footer.php'; ?>
+<!-- /Footer -->
+</body>
+</html>

api.php

@@ -0,0 +1,44 @@
+<?php
+// api.php - Gibt die News als JSON an die Website aus
+header('Content-Type: application/json; charset=utf-8');
+
+try {
+    $db = new PDO('sqlite:news_database.sqlite');
+    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    // Tabelle sichern
+    $db->exec("CREATE TABLE IF NOT EXISTS news (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        date TEXT,
+        department TEXT,
+        title TEXT,
+        content TEXT,
+        full_text TEXT,
+        image TEXT,
+        link TEXT
+    )");
+
+    $stmt = $db->query('SELECT * FROM news ORDER BY id DESC');
+    $news = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    if (count($news) === 0) {
+        $news = [
+            [
+                "id" => 1,
+                "date" => date("d.m.Y"),
+                "department" => "System",
+                "title" => "Willkommen beim neuen News-System",
+                "content" => "Die Datenbank ist bereit. Klicke auf Weiterlesen, um zu sehen, wie das Popup funktioniert.",
+                "full_text" => "Herzlichen Glückwunsch! Die SQLite-Datenbank wurde erfolgreich eingerichtet.\n\nHier im Popup kannst du beliebig lange Texte schreiben. Absätze aus dem Admin-Formular werden hier sauber übernommen.\n\nUm echte News zu erstellen, gehe einfach auf die admin.php und tippe deinen ersten Artikel ein!",
+                "image" => "https://images.unsplash.com/photo-1518605368461-1e1e38ce8ba6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+                "link" => ""
+            ]
+        ];
+    }
+
+    echo json_encode($news);
+
+} catch(PDOException $e) {
+    echo json_encode(["error" => $e->getMessage()]);
+}
+?>

chronik.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vereinschronik | SG 07 St. Leon</title>
+    <style>
+        /* --- Grundlegendes Design & Farben --- */
+        :root {
+            --primary: #d32f2f;
+            --primary-dark: #9a0007;
+            --light: #ffffff;
+            --light-gray: #f4f4f4;
+            --dark: #222222;
+            --text-gray: #555555;
+            --border-color: #dddddd;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
+        body { background-color: var(--light-gray); color: var(--dark); line-height: 1.6; }
+        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
+
+        /* --- Navigation --- */
+        header { 
+            background-color: var(--light); color: var(--dark); padding: 1rem 5%; 
+            display: flex; justify-content: space-between; align-items: center; 
+            position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-bottom: 3px solid var(--primary);
+        }
+        header .logo { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
+        header .logo img { height: 40px; width: auto; }
+        nav ul { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end;}
+        nav ul li a { font-weight: 600; padding: 5px 0; position: relative; font-size: 0.95rem; }
+        nav ul li a::after {
+            content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 3px;
+            background-color: var(--primary); transition: width 0.3s ease;
+        }
+        nav ul li a:hover::after, nav ul li a.active::after { width: 100%; }
+        .mobile-menu-btn { display: none; background: none; border: none; color: var(--primary); font-size: 1.8rem; cursor: pointer; }
+
+        /* --- Hero Bereich --- */
+        .hero { 
+            background: linear-gradient(rgba(154, 0, 7, 0.8), rgba(211, 47, 47, 0.9)), 
+                        url('https://images.unsplash.com/photo-1542652735873-fb2825bac6e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; 
+            height: 40vh; min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; 
+            color: var(--light); text-align: center; padding: 0 20px; 
+        }
+        .hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 10px; text-transform: uppercase; font-weight: 900; }
+        .hero p { font-size: 1.2rem; max-width: 600px; color: rgba(255,255,255,0.9); }
+
+        /* --- Sektionen Allgemein --- */
+        section { padding: 4rem 5%; max-width: 1000px; margin: 0 auto; }
+        .section-title { text-align: center; margin-bottom: 3rem; color: var(--dark); font-size: 2.2rem; text-transform: uppercase; position: relative; }
+        .section-title::after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--primary); margin: 10px auto 0; }
+        
+        .timeline-intro { text-align: center; font-size: 1.1rem; color: var(--text-gray); margin-bottom: 4rem; max-width: 800px; margin-left: auto; margin-right: auto; }
+
+        /* --- Historie (Timeline) --- */
+        .timeline-container { margin-bottom: 5rem; }
+        .timeline-container h3 { color: var(--primary); font-size: 1.8rem; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 30px; text-transform: uppercase;}
+        
+        .timeline { position: relative; padding-left: 30px; border-left: 4px solid var(--primary); }
+        .timeline-item { position: relative; margin-bottom: 25px; padding-left: 20px; }
+        .timeline-item::before {
+            content: ''; position: absolute; left: -38px; top: 5px; width: 16px; height: 16px;
+            background-color: var(--light); border: 4px solid var(--primary); border-radius: 50%;
+            transition: background-color 0.3s;
+        }
+        .timeline-item:hover::before { background-color: var(--primary); }
+        
+        .timeline-year { 
+            font-weight: 900; color: var(--primary); font-size: 1.3rem; margin-bottom: 5px; 
+            display: inline-block; background: var(--light); padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border-color);
+        }
+        .timeline-content { 
+            background: var(--light); padding: 15px 25px; border-radius: 6px; 
+            box-shadow: 0 3px 10px rgba(0,0,0,0.04); border: 1px solid var(--border-color);
+            margin-top: 10px; color: var(--text-gray); line-height: 1.5;
+        }
+        .timeline-content strong { color: var(--dark); }
+
+        /* --- Footer --- */
+        footer { background: var(--dark); color: #ccc; text-align: center; padding: 3rem 5% 1.5rem; margin-top: 3rem; }
+        .footer-content { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-bottom: 2rem; max-width: 1200px; margin: 0 auto; }
+        .footer-section { flex: 1 1 250px; text-align: left; }
+        .footer-section h4 { color: var(--light); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); display: inline-block; }
+        .footer-section ul { list-style: none; }
+        .footer-section ul li { margin-bottom: 10px; }
+        .footer-section ul li a:hover { color: var(--light); }
+        .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; font-size: 0.9rem; }
+
+        @media (max-width: 900px) { nav ul { gap: 10px; } }
+        @media (max-width: 768px) {
+            .mobile-menu-btn { display: block; }
+            nav ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--light); padding: 20px 5%; gap: 15px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-top: 1px solid var(--border-color); }
+            nav ul.show { display: flex; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Navigation -->
+    <header>
+        <div class="logo">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23d32f2f'/%3E%3Ctext x='50' y='55' font-size='28' fill='white' text-anchor='middle' font-family='sans-serif' font-weight='bold'%3ESG%3C/text%3E%3C/svg%3E" alt="SG 07 Logo">
+            <span>SG 07 St. Leon</span>
+        </div>
+        <button class="mobile-menu-btn" id="menuToggle">☰</button>
+        <nav>
+            <ul id="navMenu">
+                <li><a href="index.html">Startseite</a></li>
+                <li><a href="kinderturnen.html">Kinderturnen</a></li>
+                <li><a href="vereinsheim.html">Vereinsheim</a></li>
+                <li><a href="verein.html">Vorstand</a></li>
+                <li><a href="chronik.html" class="active">Chronik</a></li>
+                <li><a href="freundeskreis.html">Freundeskreis</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Hero Bereich -->
+    <div class="hero">
+        <h1>Vereinschronik</h1>
+        <p>Die stolze Geschichte der SG 07 St. Leon von 1907 bis heute.</p>
+    </div>
+
+    <!-- Inhalt -->
+    <section>
+        <p class="timeline-intro">
+            Über 100 Jahre Sport, Leidenschaft und Gemeinschaft. Entdecke die Meilensteine unseres Vereins, von den ersten Turnübungen bis hin zu den überregionalen Erfolgen im Handballsport.
+        </p>
+        
+        <div class="timeline-container">
+            <h3>Gesamtverein & Herren</h3>
+            <div class="timeline">
+                <div class="timeline-item">
+                    <div class="timeline-year">1907</div>
+                    <div class="timeline-content">Gründung des <strong>„Turnverein Germania 07 St. Leon“</strong> und eines zweiten Turnvereins namens <strong>„Turnverein Jahn 07 St. Leon“</strong>. In beiden Vereinen wurde Turnen und Leichtathletik betrieben.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1910</div>
+                    <div class="timeline-content">Gründung des „Katholischen Jungmännervereins St. Leon“. Dieser Verein begeisterte die Jugendlichen für das Fußballspiel.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1919</div>
+                    <div class="timeline-content">Nach der Unterbrechung durch den 1. Weltkrieg nehmen der Turnverein Germania 07 und der Turnerbund Jahn 07 den Sportbetrieb wieder auf. Als neue sportliche Betätigung kam das <strong>Faustballspiel</strong> hinzu.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1928</div>
+                    <div class="timeline-content">Die Katholische Mannschaft schloss sich zur DJK (=Deutsche Jugendkraft) zusammen und <strong>führte den Handballsport in St. Leon ein</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1929</div>
+                    <div class="timeline-content">TV Germania und TB Jahn begannen ebenfalls mit dem Handballsport. Jeder der drei Vereine verfügte über eine erste und zweite Mannschaft sowie Jugend- und Schülermannschaften.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1933</div>
+                    <div class="timeline-content">Aufgrund des politischen Umschwungs wurde die DJK verboten und die beiden Turnvereine mussten sich zwangsweise zur <strong>„Turngemeinde 1907 St. Leon“</strong> zusammenschließen.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1946</div>
+                    <div class="timeline-content">Nach dem Neubeginn des Handballsports wurde am 16. April die <strong>„Sportgemeinde 07 St. Leon“</strong> gegründet. Als Vereinsfarben wurden <strong>„Rot-Weiß“</strong> gewählt.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1950 - 1961</div>
+                    <div class="timeline-content">Eine Ära der Erfolge: Die SG holt die erste Badische Jugendmeisterschaft (1950), wird mehrfach Badischer Meister im Feld und in der Halle (u.a. 1954, 1957, 1961) und ist 1958 Gründungsmitglied der süddeutschen Feldhandball-Oberliga.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1969 / 1970</div>
+                    <div class="timeline-content">Gründung der Hallenhandball-Regionalliga Süd mit der SG 07 St. Leon.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1972 / 1973</div>
+                    <div class="timeline-content">Ein großer Meilenstein abseits des Feldes: Das <strong>Vereinsheim</strong> wurde errichtet.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1975 - 1989</div>
+                    <div class="timeline-content">Die A-Jugend wird Badischer und Süddeutscher Meister im Großfeld (1975). Die 1. Herrenmannschaft feiert weitere Badische Meisterschaften und steigt 1989 in die <strong>Regionalliga</strong> auf.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2008</div>
+                    <div class="timeline-content">Aufstieg in die Baden-Württemberg-Oberliga (BW-Oberliga).</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">16.03.2012</div>
+                    <div class="timeline-content">Bündelung der Kräfte: <strong>Gründung der HSG St. Leon/Reilingen</strong> für eine noch erfolgreichere Zukunft im Handballsport.</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="timeline-container">
+            <h3>Die Geschichte der Damen</h3>
+            <div class="timeline">
+                <div class="timeline-item">
+                    <div class="timeline-year">30.06.1946</div>
+                    <div class="timeline-content"><strong>Gründung der ersten Damenmannschaft.</strong> Nach der Teilnahme an der Verbandsrunde 1946-1947 löste sich die Mannschaft mangels Nachwuchs vorerst wieder auf.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1972</div>
+                    <div class="timeline-content"><strong>Neugründung</strong> der Damen-Abteilung. Dies war der Startschuss für eine extrem erfolgreiche sportliche Entwicklung in den folgenden Jahrzehnten.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1984 - 1990</div>
+                    <div class="timeline-content">Der kontinuierliche Weg nach oben: Aufstieg in die 1. Division (1984), Aufstieg in die Landesliga (1987) und der große Aufstieg in die <strong>Oberliga (1990)</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1992</div>
+                    <div class="timeline-content">Sensationeller Aufstieg in die <strong>Regionalliga Süd</strong>. Nach der Auflösung der 1. Damenmannschaft 1994 führte die 1b-Mannschaft den Spielbetrieb in der 1. Division erfolgreich fort.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2013</div>
+                    <div class="timeline-content">Nach der Fusion zur HSG feierten die Damen den Aufstieg in die <strong>BW-Oberliga</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2020</div>
+                    <div class="timeline-content">Der bisher größte Erfolg der Damenmannschaft: <strong>Aufstieg in die 3. Liga (Süd-West)</strong>.</div>
+                </div>
+            </div>
+        </div>
+        
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h4>Über uns</h4>
+                <p>Die SG 07 St. Leon ist die sportliche Heimat für alle Altersklassen in der Region. Wir fördern Gemeinschaft, Gesundheit und Leistung.</p>
+            </div>
+            <div class="footer-section">
+                <h4>Verein</h4>
+                <ul>
+                    <li><a href="verein.html">Vorstand & Ansprechpartner</a></li>
+                    <li><a href="freundeskreis.html">Freundeskreis</a></li>
+                    <li><a href="https://www.dkc88skc89.de/" target="_blank">Kegeln</a></li>
+                    <li><a href="https://www.hsg-s-r.de/" target="_blank">Handball (HSG)</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h4>Kontakt</h4>
+                <ul>
+                    <li>📧 sg07-stleon@t-online.de</li>
+                    <li>📍 Postfach 6459, 68789 St. Leon-Rot</li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2026 SG 07 St. Leon e.V. Alle Rechte vorbehalten.</p>
+        </div>
+    </footer>
+
+    <script>
+        document.getElementById('menuToggle').addEventListener('click', function() {
+            document.getElementById('navMenu').classList.toggle('show');
+        });
+    </script>
+</body>
+</html>

chronik.php

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vereinschronik | SG 07 St. Leon</title>
+</head>
+
+<!-- Header-->
+<?php 
+$pageTitle = "Vereinschronik | SG 07 St. Leon";
+$activePage = "chronik"; // passend zum Link im header.php
+include 'header.php'; 
+?>
+<!-- /Header-->
+
+
+    <!-- Hero Bereich -->
+<div class="hero" style="--hero-bg: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
+    <h1>Vereinschronik</h1>
+    <p>Die stolze Geschichte der SG 07 St. Leon von 1907 bis heute.</p>
+</div>
+
+    <!-- Inhalt -->
+    <section>
+        <p class="timeline-intro">
+            Über 100 Jahre Sport, Leidenschaft und Gemeinschaft. Entdecke die Meilensteine unseres Vereins, von den ersten Turnübungen bis hin zu den überregionalen Erfolgen im Handballsport.
+        </p>
+        
+        <div class="timeline-container">
+            <h3>Gesamtverein & Herren</h3>
+            <div class="timeline">
+                <div class="timeline-item">
+                    <div class="timeline-year">1907</div>
+                    <div class="timeline-content">Gründung des <strong>„Turnverein Germania 07 St. Leon“</strong> und eines zweiten Turnvereins namens <strong>„Turnverein Jahn 07 St. Leon“</strong>. In beiden Vereinen wurde Turnen und Leichtathletik betrieben.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1910</div>
+                    <div class="timeline-content">Gründung des „Katholischen Jungmännervereins St. Leon“. Dieser Verein begeisterte die Jugendlichen für das Fußballspiel.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1919</div>
+                    <div class="timeline-content">Nach der Unterbrechung durch den 1. Weltkrieg nehmen der Turnverein Germania 07 und der Turnerbund Jahn 07 den Sportbetrieb wieder auf. Als neue sportliche Betätigung kam das <strong>Faustballspiel</strong> hinzu.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1928</div>
+                    <div class="timeline-content">Die Katholische Mannschaft schloss sich zur DJK (=Deutsche Jugendkraft) zusammen und <strong>führte den Handballsport in St. Leon ein</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1929</div>
+                    <div class="timeline-content">TV Germania und TB Jahn begannen ebenfalls mit dem Handballsport. Jeder der drei Vereine verfügte über eine erste und zweite Mannschaft sowie Jugend- und Schülermannschaften.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1933</div>
+                    <div class="timeline-content">Aufgrund des politischen Umschwungs wurde die DJK verboten und die beiden Turnvereine mussten sich zwangsweise zur <strong>„Turngemeinde 1907 St. Leon“</strong> zusammenschließen.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1946</div>
+                    <div class="timeline-content">Nach dem Neubeginn des Handballsports wurde am 16. April die <strong>„Sportgemeinde 07 St. Leon“</strong> gegründet. Als Vereinsfarben wurden <strong>„Rot-Weiß“</strong> gewählt.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1950 - 1961</div>
+                    <div class="timeline-content">Eine Ära der Erfolge: Die SG holt die erste Badische Jugendmeisterschaft (1950), wird mehrfach Badischer Meister im Feld und in der Halle (u.a. 1954, 1957, 1961) und ist 1958 Gründungsmitglied der süddeutschen Feldhandball-Oberliga.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1969 / 1970</div>
+                    <div class="timeline-content">Gründung der Hallenhandball-Regionalliga Süd mit der SG 07 St. Leon.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1972 / 1973</div>
+                    <div class="timeline-content">Ein großer Meilenstein abseits des Feldes: Das <strong>Vereinsheim</strong> wurde errichtet.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1975 - 1989</div>
+                    <div class="timeline-content">Die A-Jugend wird Badischer und Süddeutscher Meister im Großfeld (1975). Die 1. Herrenmannschaft feiert weitere Badische Meisterschaften und steigt 1989 in die <strong>Regionalliga</strong> auf.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2008</div>
+                    <div class="timeline-content">Aufstieg in die Baden-Württemberg-Oberliga (BW-Oberliga).</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">16.03.2012</div>
+                    <div class="timeline-content">Bündelung der Kräfte: <strong>Gründung der HSG St. Leon/Reilingen</strong> für eine noch erfolgreichere Zukunft im Handballsport.</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="timeline-container">
+            <h3>Die Geschichte der Damen</h3>
+            <div class="timeline">
+                <div class="timeline-item">
+                    <div class="timeline-year">30.06.1946</div>
+                    <div class="timeline-content"><strong>Gründung der ersten Damenmannschaft.</strong> Nach der Teilnahme an der Verbandsrunde 1946-1947 löste sich die Mannschaft mangels Nachwuchs vorerst wieder auf.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1972</div>
+                    <div class="timeline-content"><strong>Neugründung</strong> der Damen-Abteilung. Dies war der Startschuss für eine extrem erfolgreiche sportliche Entwicklung in den folgenden Jahrzehnten.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1984 - 1990</div>
+                    <div class="timeline-content">Der kontinuierliche Weg nach oben: Aufstieg in die 1. Division (1984), Aufstieg in die Landesliga (1987) und der große Aufstieg in die <strong>Oberliga (1990)</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">1992</div>
+                    <div class="timeline-content">Sensationeller Aufstieg in die <strong>Regionalliga Süd</strong>. Nach der Auflösung der 1. Damenmannschaft 1994 führte die 1b-Mannschaft den Spielbetrieb in der 1. Division erfolgreich fort.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2013</div>
+                    <div class="timeline-content">Nach der Fusion zur HSG feierten die Damen den Aufstieg in die <strong>BW-Oberliga</strong>.</div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-year">2020</div>
+                    <div class="timeline-content">Der bisher größte Erfolg der Damenmannschaft: <strong>Aufstieg in die 3. Liga (Süd-West)</strong>.</div>
+                </div>
+            </div>
+        </div>
+        
+    </section>
+
+<!-- Footer --> 
+ <?php include 'footer.php'; ?>
+<!-- /Footer -->
+</html>

datenschutz.php

@@ -0,0 +1,60 @@
+<?php 
+$pageTitle = "Datenschutz | SG 07 St. Leon";
+$activePage = ""; // Kein Menüpunkt aktiv
+include 'header.php'; 
+?>
+
+    <div class="hero" style="height: 30vh; min-height: 200px; background: linear-gradient(rgba(154, 0, 7, 0.8), rgba(211, 47, 47, 0.9));">
+        <h1 style="font-size: 3rem;">Datenschutz</h1>
+    </div>
+
+    <section style="max-width: 800px; margin: 0 auto; padding: 4rem 5%; color: var(--text-gray);">
+        <h2 style="color: var(--primary); margin-bottom: 20px;">1. Datenschutz auf einen Blick</h2>
+        
+        <h3 style="color: var(--dark); margin-top: 20px; margin-bottom: 10px;">Allgemeine Hinweise</h3>
+        <p style="margin-bottom: 20px;">
+            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. Ausführliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgeführten Datenschutzerklärung.
+        </p>
+
+        <h3 style="color: var(--dark); margin-top: 20px; margin-bottom: 10px;">Datenerfassung auf dieser Website</h3>
+        <p style="margin-bottom: 20px;">
+            <strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong><br>
+            Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.
+        </p>
+        <p style="margin-bottom: 20px;">
+            <strong>Wie erfassen wir Ihre Daten?</strong><br>
+            Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um Daten handeln, die Sie in ein Kontaktformular oder einen Mitgliedsantrag eingeben.<br>
+            Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website betreten.
+        </p>
+
+        <h2 style="color: var(--primary); margin-top: 40px; margin-bottom: 20px;">2. Hosting und Server-Log-Dateien</h2>
+        <p style="margin-bottom: 20px;">
+            Wir hosten unsere Website bei Strato. Der Provider ist die STRATO AG, Pascalstraße 10, 10587 Berlin (nachfolgend „Strato“). Wenn Sie unsere Website besuchen, erfasst Strato verschiedene Logfiles inklusive Ihrer IP-Adressen.<br>
+            Weitere Details entnehmen Sie der Datenschutzerklärung von Strato: <a href="https://www.strato.de/datenschutz/" target="_blank" style="color: var(--primary);">https://www.strato.de/datenschutz/</a>.
+        </p>
+
+        <h2 style="color: var(--primary); margin-top: 40px; margin-bottom: 20px;">3. Umgang mit Mitgliederdaten</h2>
+        <p style="margin-bottom: 20px;">
+            Wir verarbeiten personenbezogene Daten unserer Mitglieder (z. B. Name, Adresse, Geburtsdatum, Bankverbindung) ausschließlich zur Erfüllung unserer satzungsgemäßen Zwecke und Aufgaben sowie zur Verwaltung der Mitgliedschaft. Die Rechtsgrundlage hierfür ist Art. 6 Abs. 1 lit. b DSGVO (Vertragserfüllung bzw. vorvertragliche Maßnahmen).
+        </p>
+
+        <h2 style="color: var(--primary); margin-top: 40px; margin-bottom: 20px;">4. Analyse-Tools (Matomo)</h2>
+        <p style="margin-bottom: 20px;">
+            Diese Website benutzt den Open Source Webanalysedienst Matomo. Wir haben Matomo so konfiguriert, dass <strong>keine Tracking-Cookies</strong> in Ihrem Browser gespeichert werden ("Cookieless Tracking").
+        </p>
+        <p style="margin-bottom: 20px;">
+            Die durch Matomo erfassten Informationen über die Nutzung dieser Website (einschließlich Ihrer gekürzten und damit anonymisierten IP-Adresse) werden ausschließlich auf unseren eigenen Servern gespeichert und nicht an Dritte weitergegeben. Die Datenverarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Wir haben ein berechtigtes Interesse an der anonymisierten Analyse des Nutzerverhaltens, um unser Webangebot zu optimieren. Da wir Ihre Privatsphäre respektieren, ist in unserem Matomo-System die "Do Not Track"-Funktion standardmäßig respektiert und IP-Adressen werden unkenntlich gemacht.
+        </p>
+
+        <h2 style="color: var(--primary); margin-top: 40px; margin-bottom: 20px;">5. Ihre Rechte</h2>
+        <p style="margin-bottom: 20px;">
+            Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung und ggf. ein Recht auf Berichtigung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit an die im Impressum angegebene Adresse wenden.
+        </p>
+
+        <hr style="border: 0; height: 1px; background: #ddd; margin: 40px 0;">
+        <p style="font-size: 0.85rem; text-align: center;">
+            <em>Stand der Datenschutzerklärung: März 2026. <br>Falls Sie spezifische Änderungen wünschen, können Sie diese Seite jederzeit durch Ihre eigenen Texte ersetzen.</em>
+        </p>
+    </section>
+
+<?php include 'footer.php'; ?>

doc/NoWetterunterstand_290412.pdf

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Wayback Machine</title>
+<script src="//archive.org/includes/analytics.js?v=cf34f82" type="text/javascript"></script>
+<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app203.us.archive.org';v.server_ms=589;archive_analytics.send_pageview({});});</script>
+<script type="text/javascript" src="/_static/js/bundle-playback.js?v=1WaXNDFE" charset="utf-8"></script>
+<link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" />
+<link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=qtvMKcIJ" />
+<script src="/_static/js/jquery-1.11.1.min.js"></script>
+</head>
+<body style="height:100vh;overflow:hidden;margin:0;display:flex;flex-flow:column nowrap;align-items:stretch;">
+<div style="flex:0 0;">
+<!-- BEGIN WAYBACK TOOLBAR INSERT -->
+<script>__wm.rw(0);</script>
+<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;">
+<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
+<div id="donato" style="position:relative;width:100%;">
+  <div id="donato-base">
+    <iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&amp;platform=wb&amp;referer=https%3A//web.archive.org/web/20211018233507/http%3A//www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf"
+	    scrolling="no" frameborder="0" style="width:100%; height:100%">
+    </iframe>
+  </div>
+</div><div id="wm-ipp-inside">
+  <div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;">
+    <div id="wm-logo" style="/*width:110px;*/padding-top:12px;">
+      <a href="/web/" title="Wayback Machine home page"><img src="/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="/_static/images/toolbar/wayback-toolbar-logo-100.png, /_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, /_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
+    </div>
+    <div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
+      <form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20211018233507" /><input type="submit" value="Go" />
+      </form>
+      <div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
+                <div class="s" id="wm-nav-captures" style="flex:1;">
+                    <a class="t" href="/web/20211018233507*/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf" title="See a list of every capture for this URL">1 capture</a>
+          <div class="r" title="Timespan for captures of this URL">18 Oct 2021</div>
+          </div>
+        <div class="k">
+          <a href="" id="wm-graph-anchor">
+            <div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
+              <canvas id="wm-sparkline-canvas" width="700" height="27" border="0"></canvas>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="n">
+      <table>
+        <tbody>
+          <!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
+          <tr class="m">
+            <td class="b" nowrap="nowrap">Sep</td>
+            <td class="c" id="displayMonthEl" title="You are here: 23:35:07 Oct 18, 2021">OCT</td>
+            <td class="f" nowrap="nowrap">Nov</td>
+          </tr>
+          <!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
+          <tr class="d">
+            <td class="b" nowrap="nowrap"><img src="/_static/images/toolbar/wm_tb_prv_off.png" alt="Previous capture" width="14" height="16" border="0" /></td>
+            <td class="c" id="displayDayEl" style="width:34px;font-size:22px;white-space:nowrap;" title="You are here: 23:35:07 Oct 18, 2021">18</td>
+            <td class="f" nowrap="nowrap"><img src="/_static/images/toolbar/wm_tb_nxt_off.png" alt="Next capture" width="14" height="16" border="0" /></td>
+          </tr>
+          <!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
+          <tr class="y">
+            <td class="b" nowrap="nowrap">2020</td>
+            <td class="c" id="displayYearEl" title="You are here: 23:35:07 Oct 18, 2021">2021</td>
+            <td class="f" nowrap="nowrap">2022</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="r" style="display:flex;flex-flow:column nowrap;align-items:flex-end;justify-content:space-between;">
+      <div id="wm-btns" style="text-align:right;height:23px;">
+                <span class="xxs">
+          <div id="wm-save-snapshot-success">success</div>
+          <div id="wm-save-snapshot-fail">fail</div>
+          <a id="wm-save-snapshot-open" href="#" title="Share via My Web Archive" >
+            <span class="iconochive-web"></span>
+          </a>
+          <a href="https://archive.org/account/login.php" title="Sign In" id="wm-sign-in">
+            <span class="iconochive-person"></span>
+          </a>
+          <span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
+        </span>
+                <a class="xxs" href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
+        <a id="wm-tb-close" href="#close" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
+      </div>
+      <div id="wm-share" class="xxs">
+        <a href="/web/20211018233507/http://web.archive.org/screenshot/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf"
+           id="wm-screenshot"
+           title="screenshot">
+          <span class="wm-icon-screen-shot"></span>
+        </a>
+        <a href="#" id="wm-video" title="video">
+          <span class="iconochive-movies"></span>
+        </a>
+        <a id="wm-share-facebook" href="#" data-url="https://web.archive.org/web/20211018233507/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
+        <a id="wm-share-twitter" href="#" data-url="https://web.archive.org/web/20211018233507/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
+      </div>
+      <div style="padding-right:2px;text-align:right;white-space:nowrap;">
+        <a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span class="xxs" style="font-size:80%;">About this capture</span></a>
+      </div>
+    </div>
+  </div>
+    <div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
+        <div id="wm-capinfo-notice" source="api"></div>
+                <div id="wm-capinfo-collected-by">
+    <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
+    <div style="padding:3px;position:relative" id="wm-collected-by-content">
+      <div style="display:inline-block;vertical-align:top;width:49%;">
+			<span class="c-logo" style="background-image:url(https://archive.org/services/img/commoncrawl)"></span>
+		<div>Collection: <a style="color:#33f;" href="https://archive.org/details/commoncrawl" target="_new"><span class="wm-title">Common Crawl</span></a></div>
+		<div style="max-height:75px;overflow:hidden;position:relative;">
+	  <div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
+	  Web crawl data from Common Crawl.
+	</div>
+	      </div>
+    </div>
+    </div>
+    <div id="wm-capinfo-timestamps">
+    <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
+    <div>
+      <div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
+      <div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="/_static/images/loading.gif" alt="loading" /></div>
+    </div>
+    </div>
+  </div></div></div></div><div id="wm-ipp-print">The Wayback Machine - https://web.archive.org/web/20211018233507/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf</div>
+<script type="text/javascript">//<![CDATA[
+__wm.bt(700,27,25,2,"web","http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf","20211018233507",1996,"/_static/",["/_static/css/banner-styles.css?v=S1zqJCYt","/_static/css/iconochive.css?v=qtvMKcIJ"], false);
+  __wm.rw(1);
+//]]></script>
+<!-- END WAYBACK TOOLBAR INSERT -->
+ </div>
+<iframe id="playback" src="https://web.archive.org/web/20211018233507if_/http://www.sg07-stleon.de/wp-content/uploads/2017/02/Nutzungsordnung-Wetterunterstand_Stand-29.04.12.pdf" frameborder="0" style="flex:1 0">
+</iframe>
+</body>
+</html>

footer.php

@@ -0,0 +1,53 @@
+<!-- DAS NEWS POPUP (MODAL) - Global verfügbar -->
+    <div class="news-modal" id="newsModal">
+        <div class="news-modal-content">
+            <span class="news-modal-close" onclick="closeNewsModal()">&times;</span>
+            <img src="" alt="News Bild" class="news-modal-img" id="modalImage">
+            <div class="news-modal-header">
+                <div class="news-modal-meta" id="modalMeta">Datum | Abteilung</div>
+                <h2 class="news-modal-title" id="modalTitle">Überschrift</h2>
+            </div>
+            <div class="news-modal-body" id="modalBody">
+                Hier steht dann der komplette Text...
+            </div>
+        </div>
+    </div>
+
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h4>Über uns</h4>
+                <p>Die SG 07 St. Leon ist die sportliche Heimat für alle Altersklassen in der Region.</p>
+            </div>
+            <div class="footer-section">
+                <h4>Verein</h4>
+                <ul>
+                    <li><a href="verein.php">Vorstand & Ansprechpartner</a></li>
+                    <li><a href="mitgliedschaft.php">Mitgliedschaft & Anträge</a></li>
+                    <li><a href="freundeskreis.php">Freundeskreis</a></li>
+                    <li><a href="https://www.dkc88skc89.de/" target="_blank">Kegeln</a></li>
+                    <li><a href="https://www.hsg-s-r.de/" target="_blank">Handball (HSG)</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h4>Kontakt</h4>
+                <ul>
+                    <li>📧 info@sg07-stleon.de</li>
+                    <li>📍 Postfach 6459, 68789 St. Leon-Rot</li>
+                </ul>
+            </div>
+        </div>
+        
+        <!-- NEU: Die Links für Impressum und Datenschutz ganz unten -->
+        <div class="footer-bottom" style="display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px;">
+            <p>&copy; 2026 SG 07 St. Leon e.V. Alle Rechte vorbehalten.</p>
+            <div style="font-size: 0.95rem;">
+                <a href="impressum.php" style="color: #ccc; text-decoration: none; margin: 0 15px; font-weight: bold;">Impressum</a> | 
+                <a href="datenschutz.php" style="color: #ccc; text-decoration: none; margin: 0 15px; font-weight: bold;">Datenschutz</a>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

freundeskreis.php

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Freundeskreis | SG 07 St. Leon</title>
+</head>
+
+<!-- Header-->
+<?php 
+$pageTitle = "Freundeskreis | SG 07 St. Leon";
+$activePage = "freundeskreis"; // passend zum Link im header.php
+include 'header.php'; 
+?>
+<!-- /Header-->
+
+    <!-- Hero Bereich -->
+<div class="hero" style="--hero-bg: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
+        <h1>Freundeskreis Handball</h1>
+        <p>Das Team hinter dem Team. Gemeinsam für die Zukunft der SG 07 St. Leon.</p>
+    </div>
+
+    <!-- Inhalt -->
+    <section>
+        <h2 class="section-title">Wer wir sind</h2>
+        <p class="intro-text">
+            Anfang 1996 setzten sich 25 engagierte Frauen und Männer zusammen und gründeten den Freundeskreis Handball. 
+            Unser klares Ziel damals wie heute: Den Handballsport der SG 07 materiell und finanziell zu unterstützen 
+            und gleichzeitig die Kameradschaft unter den St. Leoner Handballfreunden aktiv zu leben.
+        </p>
+
+        <!-- 3 Säulen -->
+        <div class="features-grid">
+            <div class="feature-card">
+                <div class="feature-icon">🚀</div>
+                <h3>Nachwuchs fördern</h3>
+                <p>Die Anforderungen an unsere Mannschaften wachsen stetig. Wer Nachwuchsförderung auf hohem Niveau betreiben möchte, benötigt ein starkes Finanzierungskonzept. Hier setzen wir an, um die Ausbildung unserer Jugendlichen zu sichern.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🤝</div>
+                <h3>Aktive unterstützen</h3>
+                <p>Ob Trainingsmaterial, Ausstattung oder organisatorische Mittel – wir greifen den aktiven Mannschaften finanziell unter die Arme, damit sich die Spieler und Trainer voll auf den sportlichen Erfolg konzentrieren können.</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">🍻</div>
+                <h3>Gemeinschaft leben</h3>
+                <p>Geselligkeit ist bei uns kein Fremdwort! Gemeinsame Ausflüge, Besichtigungen, unser regelmäßiger Stammtisch und traditionelle Schlachtfeste sind fester und beliebter Bestandteil der Aktivitäten des Freundeskreises geworden.</p>
+            </div>
+        </div>
+
+        <!-- Vision / Warum mitmachen -->
+        <div class="split-section">
+            <div class="split-image">
+                <img src="https://images.unsplash.com/photo-1544606553-f725a39eb874?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Handball Fans und Unterstützer">
+            </div>
+            <div class="split-content">
+                <h2>Wer mehr erreichen will, muss mehr tun.</h2>
+                <p>
+                    Dies sehen wir nicht als Floskel, sondern als unsere tägliche Herausforderung. Um unsere Förderung stetig zu intensivieren, brauchen wir ein breites Fundament an Unterstützern.
+                </p>
+                <p>
+                    Erreichen können wir unsere ambitionierten Ziele nur, wenn sich noch mehr Handballfreunde unserem Kreis anschließen. Ob durch regelmäßige Beiträge, Spenden oder durch aktive und tatkräftige Mitarbeit im Verein – jede Hilfe zählt und bringt unsere Spielerinnen und Spieler ein Stück weiter.
+                </p>
+            </div>
+        </div>
+
+        <!-- CTA & Kontakt -->
+        <div class="cta-container">
+            <div class="cta-box">
+                <h3>Werde Teil der Gemeinschaft!</h3>
+                <p>
+                    Wir laden dich herzlich ein, dich den vielen Handballfreunden im Freundeskreis anzuschließen. 
+                    Lade dir einfach die Beitrittserklärung herunter und werde das "Team hinter dem Team".
+                </p>
+                <a href="#" class="btn">Beitrittserklärung herunterladen</a>
+            </div>
+            <div class="contact-card">
+                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='%23f4f4f4'/%3E%3Ccircle cx='128' cy='96' r='48' fill='%23cccccc'/%3E%3Cpath d='M128 160c-44.2 0-80 35.8-80 80h160c0-44.2-35.8-80-80-80z' fill='%23cccccc'/%3E%3C/svg%3E" alt="Torsten Weis" class="contact-avatar">
+                <h4>Torsten Weis</h4>
+                <p class="title">Vorsitzender Freundeskreis Handball</p>
+                <p class="email"><a href="mailto:info@sg07-stleon.de" style="color:var(--primary);">Kontakt aufnehmen</a></p>
+            </div>
+        </div>
+
+    </section>
+
+    <!-- Footer -->
+<?php include 'footer.php'; ?>
+</html>

header.php

@@ -0,0 +1,59 @@
+<?php
+// Wenn kein Titel übergeben wurde, Standard-Titel nutzen
+$pageTitle = $pageTitle ?? 'SG 07 St. Leon | Sportgemeinschaft';
+// Welcher Menüpunkt ist aktiv?
+$activePage = $activePage ?? '';
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+    <!-- Das zentrale Stylesheet laden -->
+    <link rel="stylesheet" href="style.css">
+
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+      _paq.push(["setDoNotTrack", true]);
+      _paq.push(["disableCookies"]);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//sg07-stleon.de/analytics/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '2']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="//sg07-stleon.de/analytics/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+    <!-- End Matomo Code -->
+     
+</head>
+<body>
+
+    <header>
+        <div class="logo">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23d32f2f'/%3E%3Ctext x='50' y='55' font-size='28' fill='white' text-anchor='middle' font-family='sans-serif' font-weight='bold'%3ESG%3C/text%3E%3C/svg%3E" alt="SG 07 Logo">
+            <span>SG 07 St. Leon</span>
+        </div>
+        <button class="mobile-menu-btn" id="menuToggle">☰</button>
+        <nav>
+            <ul id="navMenu">
+                <li><a href="index.php" class="<?= ($activePage == 'home') ? 'active' : '' ?>">Startseite</a></li>
+                <li><a href="aktuelles.php" class="<?= ($activePage == 'aktuelles') ? 'active' : '' ?>">Aktuelles</a></li>
+                <li><a href="turnen.php" class="<?= ($activePage == 'turnen') ? 'active' : '' ?>">Turnen</a></li>
+                <li><a href="kinderturnen.php" class="<?= ($activePage == 'kinderturnen') ? 'active' : '' ?>">Kinderturnen</a></li>
+                <li><a href="vereinsheim.php" class="<?= ($activePage == 'vereinsheim') ? 'active' : '' ?>">Vereinsheim</a></li>
+                <li><a href="verein.php" class="<?= ($activePage == 'verein') ? 'active' : '' ?>">Vorstand</a></li>
+                <li><a href="chronik.php" class="<?= ($activePage == 'chronik') ? 'active' : '' ?>">Chronik</a></li>
+                <li><a href="freundeskreis.php" class="<?= ($activePage == 'freundeskreis') ? 'active' : '' ?>">Freundeskreis</a></li>
+                <!-- NEU: Prominenter Link zur Mitgliedschaft -->
+                <li><a href="mitgliedschaft.php" class="<?= ($activePage == 'mitgliedschaft') ? 'active' : '' ?>" style="color: var(--primary); font-weight: 800;">Mitglied werden</a></li>
+            </ul>
+        </nav>
+    </header>

img/uploads/bsk-pdf-manager/ftp/index.php

@@ -0,0 +1,3 @@
+<?php
+// Silence is golden.
+?>

img/uploads/bsk-pdf-manager/index.php

@@ -0,0 +1,3 @@
+<?php
+// Silence is golden.
+?>

img/uploads/wpcode/cache/docs.json

@@ -0,0 +1 @@
+{"categories":{"getting-started":"Getting Started","auto-insert-locations":"Auto-Insert Locations","conversion-pixels":"Conversion Pixels","functionality":"Functionality","troubleshooting":"Troubleshooting"},"docs":{"2364":{"title":"Access Control","url":"https:\/\/wpcode.com\/docs\/access-control\/","categories":["functionality"]},"2351":{"title":"I can't find the script I added in the frontend","url":"https:\/\/wpcode.com\/docs\/i-cant-find-the-script-i-added-in-the-frontend\/","categories":["troubleshooting"]},"2349":{"title":"How to find where a script or code is coming from in WPCode","url":"https:\/\/wpcode.com\/docs\/how-to-find-where-a-script-or-code-is-coming-from-in-wpcode\/","categories":["troubleshooting"]},"2302":{"title":"File Editor","url":"https:\/\/wpcode.com\/docs\/file-editor\/","categories":["functionality"]},"2324":{"title":"How to fix WPCode Permissions Error","url":"https:\/\/wpcode.com\/docs\/how-to-fix-wpcode-permissions-error\/","categories":["troubleshooting"]},"2290":{"title":"How to debug PHP errors in WPCode","url":"https:\/\/wpcode.com\/docs\/how-to-debug-php-errors-in-wpcode\/","categories":["troubleshooting"]},"2142":{"title":"How To Use the Conversion Pixels Custom Click Tracking","url":"https:\/\/wpcode.com\/docs\/conversion-pixels-custom-click-tracking\/","categories":["conversion-pixels"]},"2140":{"title":"How to find the right CSS Selector","url":"https:\/\/wpcode.com\/docs\/finding-css-selector\/","categories":["troubleshooting"]},"2144":{"title":"How to find your Snapchat Pixel Id and Conversions API Token","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-snapchat-pixel-id-and-conversions-api-token\/","categories":["conversion-pixels"]},"2085":{"title":"Using Shortcode Attributes","url":"https:\/\/wpcode.com\/docs\/shortcode-attributes\/","categories":["functionality"]},"2094":{"title":"Using Smart Tags","url":"https:\/\/wpcode.com\/docs\/smart-tags\/","categories":["functionality"]},"2055":{"title":"Using Snippet Error Logging","url":"https:\/\/wpcode.com\/docs\/using-snippet-error-logging\/","categories":["troubleshooting"]},"2002":{"title":"Usage Tracking","url":"https:\/\/wpcode.com\/docs\/usage-tracking\/","categories":[]},"1894":{"title":"Using CSS Selectors to Insert Snippets Anywhere","url":"https:\/\/wpcode.com\/docs\/using-css-selectors\/","categories":["auto-insert-locations"]},"1824":{"title":"How to create advanced scheduling rules","url":"https:\/\/wpcode.com\/docs\/how-to-create-advanced-scheduling-rules\/","categories":["functionality"]},"1822":{"title":"Conditional Logic PHP Snippets","url":"https:\/\/wpcode.com\/docs\/conditional-logic-php-snippets\/","categories":["troubleshooting"]},"1761":{"title":"How to find your TikTok Pixel ID and Events API Access Token","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-tiktok-pixel-id-and-events-api-access-token\/","categories":["conversion-pixels"]},"1759":{"title":"How to find your Pinterest Tag ID and Conversion Access Token","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-pinterest-tag-id-and-conversion-access-token\/","categories":["conversion-pixels"]},"1757":{"title":"How to find your Google Ads Tag ID & Conversion Label","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-google-ads-tag-id\/","categories":["conversion-pixels"]},"1755":{"title":"How to find your Google Analytics ID","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-google-analytics-id\/","categories":["conversion-pixels"]},"1753":{"title":"How to Find your Facebook Pixel ID and Conversions API Token","url":"https:\/\/wpcode.com\/docs\/how-to-find-your-facebook-pixel-id-and-conversions-api-token\/","categories":["conversion-pixels"]},"1721":{"title":"WPCode Library 1-click install","url":"https:\/\/wpcode.com\/docs\/update-plugin-for-1-click-install\/","categories":["getting-started"]},"1604":{"title":"How to Install the WPCode Plugin","url":"https:\/\/wpcode.com\/docs\/how-to-install-the-wpcode-plugin\/","categories":["getting-started"]},"65":{"title":"Using the Global Header & Footer settings","url":"https:\/\/wpcode.com\/docs\/using-the-global-header-footer-settings\/","categories":["getting-started"]},"56":{"title":"How To Use Snippets Smart Conditional Logic","url":"https:\/\/wpcode.com\/docs\/how-to-use-snippets-smart-conditional-logic\/","categories":["getting-started"]},"53":{"title":"A Complete Guide to Snippet Locations","url":"https:\/\/wpcode.com\/docs\/a-complete-guide-to-snippet-locations\/","categories":["getting-started"]},"46":{"title":"PHP Error Handling & Safe Mode","url":"https:\/\/wpcode.com\/docs\/php-error-handling-safe-mode\/","categories":["troubleshooting"]},"27":{"title":"How To Create Your First Snippet?","url":"https:\/\/wpcode.com\/docs\/how-to-create-your-first-snippet\/","categories":["getting-started"]},"9":{"title":"What Type of Snippet Do I Need?","url":"https:\/\/wpcode.com\/docs\/what-type-of-snippet-do-i-need\/","categories":["getting-started"]}}}