Rollen (Admin/Mitglied), Seite Kooperationen, Textanpassungen

- Gemeinsame Zugänge mit Rollen: Admin darf alles, Mitglied nutzt Kalender,
  Fahrtplaner, Treffpunkte und bearbeitet Mitglieder (kein Hinzufügen,
  Löschen, Import, keine Patches, keine Statistik-Korrektur)
- Server prüft die Rechte (403), Konten ohne Rolle gelten als Admin
- npm run user: add <name> [admin|mitglied], role <name> <rolle>
- Neue öffentliche Seite Kooperationen mit Titelbild, Anführer,
  Social-Media-Links und Beschreibung, Pflege durch Admin
- Kopfzeile bleibt bei mittlerer Breite einzeilig
- Texte auf Wunsch gekürzt

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

public/kooperationen.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Kooperationen – HCRB</title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <main>
+    <!-- Übersicht aller Kooperationen -->
+    <section id="overview">
+      <header class="page-head">
+        <div>
+          <span class="eyebrow">Verbündete Teams</span>
+          <h1>Kooperationen</h1>
+          <p>Gruppen, mit denen die HCRB zusammen spielt, plant und unterwegs ist.</p>
+        </div>
+        <div class="actions">
+          <button type="button" id="add-btn" class="primary" hidden>Kooperation hinzufügen</button>
+        </div>
+      </header>
+      <div id="coop-grid" class="coop-grid"></div>
+      <div id="coop-empty" class="empty-state" hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M7 11l3-3 3 2 3-3 4 4-6 6-2-1-2 1-6-6z"/><path d="M3 9l4 2M21 9l-4 2"/></svg>
+        <strong>Noch keine Kooperationen</strong>
+        <span id="coop-empty-hint">Sobald der Admin eine Kooperation einträgt, erscheint sie hier.</span>
+      </div>
+    </section>
+
+    <!-- Einzelne Kooperation: Titelbild, Anführer, Soziale Medien, Beschreibung -->
+    <article id="detail" hidden>
+      <a href="#" class="back-link" id="back-link">‹ Alle Kooperationen</a>
+      <div class="coop-hero" id="detail-hero">
+        <img id="detail-img" alt="" hidden>
+        <div class="coop-hero-text">
+          <span class="eyebrow">Kooperation</span>
+          <h1 id="detail-name"></h1>
+        </div>
+      </div>
+      <div class="split wide-left coop-info">
+        <div class="card">
+          <h2>Über die Gruppe</h2>
+          <p id="detail-description" class="coop-description"></p>
+        </div>
+        <div class="card">
+          <h2>Anführer</h2>
+          <p id="detail-leader" class="coop-leader"></p>
+          <h2 class="spaced">Soziale Medien</h2>
+          <div id="detail-socials" class="coop-socials"></div>
+          <div id="detail-admin" class="row wrap admin-actions" hidden>
+            <button type="button" id="detail-edit">Bearbeiten</button>
+            <button type="button" id="detail-delete" class="link danger">Löschen</button>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <!-- Formular (nur Admin) -->
+    <div class="card" id="coop-form-card" hidden>
+      <h2 id="coop-form-title">Kooperation hinzufügen</h2>
+      <form id="coop-form" class="split">
+        <div>
+          <label class="dropzone wide" id="dropzone" for="coop-file">
+            <img id="coop-preview" alt="Vorschau" hidden>
+            <span id="drop-text"></span>
+            <input type="file" id="coop-file" accept="image/png,image/jpeg,image/webp,image/svg+xml,.svg" hidden>
+          </label>
+          <label class="inline" id="remove-image-wrap" hidden>
+            <input type="checkbox" id="coop-remove-image"> Titelbild entfernen
+          </label>
+        </div>
+        <div>
+          <label>Name der Gruppe
+            <input type="text" id="coop-name" required maxlength="80" placeholder="z. B. Black Wolves Airsoft">
+          </label>
+          <label>Anführer
+            <input type="text" id="coop-leader" maxlength="120" placeholder="Name oder Rufname">
+          </label>
+          <label>Kurze Beschreibung
+            <textarea id="coop-description" maxlength="2000" placeholder="Wer sind sie, wo spielen sie, was machen wir zusammen …"></textarea>
+          </label>
+          <fieldset class="socials-fields">
+            <legend>Soziale Medien (optional, Link einfügen)</legend>
+            <div class="grid2">
+              <label>Website <input type="text" id="social-website" inputmode="url" placeholder="https://…"></label>
+              <label>Instagram <input type="text" id="social-instagram" inputmode="url" placeholder="instagram.com/…"></label>
+              <label>YouTube <input type="text" id="social-youtube" inputmode="url" placeholder="youtube.com/@…"></label>
+              <label>TikTok <input type="text" id="social-tiktok" inputmode="url" placeholder="tiktok.com/@…"></label>
+              <label>Facebook <input type="text" id="social-facebook" inputmode="url" placeholder="facebook.com/…"></label>
+              <label>Discord <input type="text" id="social-discord" inputmode="url" placeholder="discord.gg/…"></label>
+            </div>
+          </fieldset>
+          <p id="coop-error" class="warn" hidden></p>
+          <div class="row wrap">
+            <button type="submit" class="primary" id="coop-submit">Speichern</button>
+            <button type="button" id="coop-cancel">Abbrechen</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </main>
+
+  <script type="module" src="/js/kooperationen.js"></script>
+</body>
+</html>