Mitmachen: Ehrenamtsseite mit Stellen-Filter

Neue Seite /mitmachen, die offene Ehrenamtsstellen aus data/mitmachen.json als
position-card-Komponente listet, mit clientseitigem Bereichsfilter
(position-filter.js, progressive enhancement) und JobPosting-Schema
(job_posting_schema(), employmentType VOLUNTEER). Route ergänzt.
Enthält zudem kleine person-card__contact-Stilanpassungen (gleiche CSS-Sektion).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ

app/components/position-card.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Eine Ehrenamtsstelle als aufklappbare Karte (Seite /mitmachen). Props:
+ *   $position array{id, group?, area?, icon?, title, summary?, description?, tasks?[], commitment?, requirements?[]}
+ *   $contact  array|null — aufgelöster Ansprechpartner (Shape wie person-card erwartet)
+ * Natives <details>/<summary> → ohne JS bedienbar (FAQ-Mechanik). Eingeklappt zeigt die
+ * Karte nur Bereich + Titel; Details und Ansprechpartner erscheinen beim Aufklappen.
+ * Das JobPosting-Schema liefert die Seite über $meta['schema'] (helpers: job_posting_schema).
+ * Heading-Outline: Titel h3 (in der summary), Ansprechpartner (person-card) h4.
+ */
+$contact = $contact ?? null;
+?>
+                    <details class="position-card" id="<?= e($position['id']) ?>" data-group="<?= e($position['group'] ?? '') ?>">
+                        <summary class="position-card__head">
+<?php if (!empty($position['icon'])): ?>
+                            <span class="position-card__icon" aria-hidden="true"><?= icon($position['icon']) ?></span>
+<?php endif; ?>
+                            <span class="position-card__heading">
+<?php if (!empty($position['area'])): ?>
+                                <span class="position-card__area"><?= e($position['area']) ?></span>
+<?php endif; ?>
+                                <h3 class="position-card__title"><?= e($position['title']) ?></h3>
+                            </span>
+                            <?= icon('chevron-down', 'position-card__chevron') ?>
+                        </summary>
+                        <div class="position-card__body">
+                            <div class="position-card__main">
+<?php if (!empty($position['summary'])): ?>
+                                <p class="position-card__summary"><?= e($position['summary']) ?></p>
+<?php endif; ?>
+<?php if (!empty($position['tasks'])): ?>
+                                <ul class="position-card__tasks" role="list">
+<?php foreach ($position['tasks'] as $task): ?>
+                                    <li><?= icon('check2', 'position-card__check') ?><span><?= e($task) ?></span></li>
+<?php endforeach; ?>
+                                </ul>
+<?php endif; ?>
+<?php if (!empty($position['commitment']) || !empty($position['requirements'])): ?>
+                                <dl class="position-card__meta">
+<?php if (!empty($position['commitment'])): ?>
+                                    <div class="position-card__meta-row">
+                                        <dt><?= icon('clock-history', 'position-card__meta-icon') ?>Zeitaufwand</dt>
+                                        <dd><?= e($position['commitment']) ?></dd>
+                                    </div>
+<?php endif; ?>
+<?php if (!empty($position['requirements'])): ?>
+                                    <div class="position-card__meta-row">
+                                        <dt><?= icon('check2', 'position-card__meta-icon') ?>Das brauchst du</dt>
+                                        <dd><?= e(implode(' · ', $position['requirements'])) ?></dd>
+                                    </div>
+<?php endif; ?>
+                                </dl>
+<?php endif; ?>
+                            </div>
+<?php if ($contact !== null): ?>
+                            <div class="position-card__contact">
+<?php component('person-card', ['person' => $contact, 'level' => 'h4']); ?>
+                            </div>
+<?php endif; ?>
+                        </div>
+                    </details>

app/helpers.php

@@ -324,3 +324,51 @@ function sportsevent_nodes(array $upcoming): array
     }
     return $nodes;
 }
+
+/**
+ * JobPosting-Knoten für eine Ehrenamtsstelle (Seite /mitmachen). $job: Eintrag aus
+ * data/mitmachen.json → positions[]; $pageSlug: Seiten-Slug für die Anker-URL.
+ * employmentType VOLUNTEER; hiringOrganization verweist via #club auf den Org-Knoten;
+ * jobLocation = Vereinsadresse aus club.json (Single Source). validThrough bewusst
+ * optional — ein abgelaufenes Datum entfernt die Anzeige aktiv aus den Ergebnissen,
+ * deshalb nur bei echt befristeten Stellen setzen. Ohne title → leerer Array (Aufrufer filtert).
+ */
+function job_posting_schema(array $job, string $pageSlug): array
+{
+    if (empty($job['title'])) {
+        return [];
+    }
+    $club = json_load('club');
+    $node = [
+        '@type'              => 'JobPosting',
+        'title'              => $job['title'],
+        'description'        => $job['description'] ?? ($job['summary'] ?? $job['title']),
+        'employmentType'     => 'VOLUNTEER',
+        'hiringOrganization' => ['@id' => abs_url() . '#club'],
+        'jobLocation'        => [
+            '@type'   => 'Place',
+            'address' => [
+                '@type'           => 'PostalAddress',
+                'streetAddress'   => $club['address']['street'],
+                'postalCode'      => $club['address']['zip'],
+                'addressLocality' => $club['address']['city'],
+                'addressCountry'  => $club['address']['country'],
+            ],
+        ],
+    ];
+    if (!empty($job['id'])) {
+        $node['identifier'] = [
+            '@type' => 'PropertyValue',
+            'name'  => $club['name'],
+            'value' => $job['id'],
+        ];
+        $node['url'] = abs_url($pageSlug) . '#' . $job['id'];
+    }
+    if (!empty($job['posted'])) {
+        $node['datePosted'] = $job['posted'];
+    }
+    if (!empty($job['valid_through'])) {
+        $node['validThrough'] = $job['valid_through'];
+    }
+    return $node;
+}

app/pages/mitmachen.php

@@ -0,0 +1,91 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Mitmachen & Ehrenamt — „Stellenbörse" für ehrenamtliche Helfer.
+ * Struktur: Hero → Stellen (position-card je Stelle) → CTA-Band → FAQ.
+ * Inhalte: data/mitmachen.json. Ansprechpartner: data/ansprechpartner.json (Single Source).
+ * Je Stelle ein JobPosting-Knoten (helpers: job_posting_schema) im $meta['schema']
+ * → GEO/semantisches SEO, verknüpft via #club mit dem Organization-Knoten.
+ */
+$page = json_load('mitmachen');
+
+// Ansprechpartner nach Namen indexieren (Single Source: ansprechpartner.json).
+$directory = [];
+foreach (json_load('ansprechpartner')['persons'] ?? [] as $p) {
+    $directory[$p['name']] = $p;
+}
+// Pro Stelle: inline contact bevorzugt, sonst Lookup über contact_name.
+$contact_for = static function (array $pos) use ($directory): ?array {
+    if (!empty($pos['contact']) && is_array($pos['contact'])) {
+        return $pos['contact'];
+    }
+    return $directory[$pos['contact_name'] ?? ''] ?? null;
+};
+
+$meta = [
+    'title'       => 'Mitmachen & Ehrenamt',
+    'description' => 'Werde ehrenamtlicher Helfer beim TSV 1908 Kulmbach: Jugendtrainer, Betreuer und Unterstützung bei Veranstaltungen. Offene Aufgaben mit direktem Ansprechpartner – ohne Vorerfahrung.',
+    'og_image'    => 'img/pages/jugendfussball-hero-1440.jpg',
+    'scripts'     => ['position-filter.js'],
+    'schema'      => array_merge(
+        page_schema(
+            [
+                ['name' => 'Startseite', 'slug' => ''],
+                ['name' => 'Mitmachen', 'slug' => 'mitmachen'],
+            ],
+            $page['faq'] ?? []
+        ),
+        array_values(array_filter(array_map(
+            static fn (array $job): array => job_posting_schema($job, 'mitmachen'),
+            $page['positions'] ?? []
+        )))
+    ),
+];
+
+component('hero', ['hero' => $page['hero']]);
+?>
+        <section class="section positions" id="stellen" aria-labelledby="positions-heading">
+            <div class="container">
+                <h2 id="positions-heading" class="visually-hidden">Offene Stellen</h2>
+<?php if (!empty($page['filters'])): ?>
+                <div class="filter-bar" role="group" aria-label="Stellen nach Bereich filtern" data-position-filter>
+<?php foreach ($page['filters'] as $i => $f): ?>
+                    <button type="button" class="filter-bar__tab" data-filter="<?= e($f['value']) ?>" aria-pressed="<?= $i === 0 ? 'true' : 'false' ?>"><?= e($f['label']) ?></button>
+<?php endforeach; ?>
+                </div>
+<?php endif; ?>
+                <div class="positions__list" data-position-list>
+<?php foreach ($page['positions'] as $pos): ?>
+<?php component('position-card', ['position' => $pos, 'contact' => $contact_for($pos)]); ?>
+<?php endforeach; ?>
+                </div>
+                <p class="positions__empty" data-position-empty hidden>In diesem Bereich sind aktuell keine Stellen ausgeschrieben. Schau bald wieder vorbei – oder sprich uns einfach <a href="<?= e(url('') . '#kontakt') ?>">direkt an</a>, wir finden gemeinsam eine passende Aufgabe.</p>
+            </div>
+        </section>
+<?php if (!empty($page['arguments']['items'])): ?>
+        <section class="section sponsor-arguments" id="warum-mithelfen" aria-labelledby="warum-heading">
+            <div class="container">
+                <h2 id="warum-heading"><?= e($page['arguments']['title']) ?></h2>
+<?php if (!empty($page['arguments']['intro'])): ?>
+                <p class="sponsor-arguments__intro"><?= e($page['arguments']['intro']) ?></p>
+<?php endif; ?>
+                <ul class="sponsor-arguments__grid" role="list">
+<?php foreach ($page['arguments']['items'] as $arg): ?>
+                    <li class="sponsor-arguments__item">
+                        <div class="sponsor-arguments__icon" aria-hidden="true"><?= icon($arg['icon']) ?></div>
+                        <div class="sponsor-arguments__body">
+                            <h3 class="sponsor-arguments__title"><?= e($arg['title']) ?></h3>
+                            <p class="sponsor-arguments__text"><?= e($arg['text']) ?></p>
+                        </div>
+                    </li>
+<?php endforeach; ?>
+                </ul>
+            </div>
+        </section>
+<?php endif; ?>
+<?php
+component('cta-band', ['band' => $page['cta'], 'anchor' => 'kontakt-mitmachen']);
+
+component('faq', ['faq' => $page['faq'] ?? []]);

app/routes.php

@@ -23,6 +23,7 @@ return [
     'turnen/step-aerobic-fitness-pilates' => ['file' => 'turnen-step-aerobic.php', 'sitemap' => true],
     'turnen/trampolin'           => ['file' => 'turnen-trampolin.php', 'sitemap' => true],
     'turnen/wettkampfturnen'     => ['file' => 'turnen-wettkampfturnen.php', 'sitemap' => true],
+    'mitmachen'                  => ['file' => 'mitmachen.php', 'sitemap' => true],
     'verein'                     => ['file' => 'verein.php',   'sitemap' => true],
     'historie'                   => ['file' => 'historie.php', 'sitemap' => true],
     'sportheimbuchung'           => ['file' => 'sportheimbuchung.php', 'sitemap' => true],