From a460fd8e401a619991c23b4039d4e7734ea6cf09 Mon Sep 17 00:00:00 2001
From: Christian Heubaum <christian.heubaum@digiseed.de>
Date: Fri, 17 Apr 2026 12:24:07 +0000
Subject: [PATCH] Multi-Chapter-Support: Aktivierungscode, Gitea-Sync,
 Auto-Update

---
 index.html | 690 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 612 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index d14cd12..2d9a1bd 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,8 @@
             background: linear-gradient(160deg, #0f1f45 0%, #1a2744 40%, #0d1b35 100%);
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
+            padding-top: clamp(90px, 12vh, 160px);
             position: relative;
             overflow: hidden;
         }
@@ -84,14 +85,15 @@
         #fullscreen-btn:hover { background: rgba(255,255,255,0.18); color: white; }
         .display-header {
             position: absolute;
-            top: 32px; left: 40px;
+            top: clamp(14px, 2vh, 32px); left: 40px;
             display: flex;
             align-items: center;
-            gap: 14px;
+            gap: clamp(10px, 1.5vh, 18px);
+            z-index: 10;
         }
 
         .bni-badge {
-            height: 52px;
+            height: clamp(44px, 6vh, 80px);
             width: auto;
             display: block;
             object-fit: contain;
@@ -99,22 +101,23 @@
 
         .chapter-name {
             color: rgba(255,255,255,0.7);
-            font-size: 1.1rem;
+            font-size: clamp(1rem, 1.8vh, 2rem);
             font-weight: 300;
             letter-spacing: 1px;
         }
 
         .progress-indicator {
             position: absolute;
-            top: 36px; right: 40px;
+            top: clamp(28px, 4vh, 50px); right: 40px;
             color: rgba(255,255,255,0.5);
-            font-size: 0.95rem;
+            font-size: clamp(0.85rem, 1.5vh, 1.8rem);
             letter-spacing: 1px;
+            z-index: 10;
         }
 
         .round-badge {
             position: absolute;
-            top: 70px; right: 40px;
+            top: 96px; right: 40px;
             background: var(--red);
             color: white;
             font-size: 0.8rem;
@@ -131,16 +134,18 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            gap: 56px;
+            gap: clamp(40px, 5vw, 100px);
             background: rgba(255,255,255,0.07);
             backdrop-filter: blur(24px);
             border: 1px solid rgba(255,255,255,0.12);
-            border-radius: 28px;
-            padding: 52px 60px;
-            max-width: 1000px;
-            width: 92%;
+            border-radius: clamp(20px, 3vh, 36px);
+            padding: clamp(32px, 5vh, 80px) clamp(40px, 5vw, 100px);
+            max-width: none;
+            width: 96vw;
+            flex: 1;
             position: relative;
             z-index: 1;
+            margin-bottom: clamp(16px, 2.5vh, 40px);
         }
 
         .photo-section {
@@ -152,8 +157,8 @@
         }
 
         .member-photo-wrap {
-            width: 220px;
-            height: 220px;
+            width: 100%;
+            height: 100%;
             border-radius: 50%;
             border: 4px solid var(--red);
             overflow: hidden;
@@ -171,36 +176,42 @@
         }
 
         .initials-avatar {
-            font-size: 4rem;
+            font-size: clamp(4rem, 12vh, 12rem);
             font-weight: 700;
             color: white;
         }
 
-        .qr-wrap {
+        .qr-corner {
+            position: absolute;
+            top: clamp(102px, 14vh, 180px);
+            right: clamp(24px, 3vw, 60px);
+            z-index: 3;
             background: white;
-            padding: 10px;
-            border-radius: 12px;
+            padding: clamp(8px, 1vh, 14px);
+            border-radius: 14px;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.35);
         }
 
         .qr-label {
-            color: rgba(255,255,255,0.4);
-            font-size: 0.7rem;
+            color: #1a2744;
+            font-size: clamp(0.6rem, 1vh, 0.9rem);
             text-align: center;
-            margin-top: 6px;
+            margin-top: 5px;
             text-transform: uppercase;
             letter-spacing: 1px;
+            font-weight: 600;
         }
 
         .info-section {
             flex: 1;
             display: flex;
             flex-direction: column;
-            gap: 14px;
+            gap: clamp(14px, 2.5vh, 36px);
         }
 
         .substitute-label {
             color: rgba(255,255,255,0.5);
-            font-size: 0.85rem;
+            font-size: clamp(0.75rem, 1.5vh, 1.5rem);
             text-transform: uppercase;
             letter-spacing: 2px;
             border-left: 3px solid var(--red);
@@ -208,14 +219,14 @@
         }
 
         .display-name {
-            font-size: clamp(2rem, 4vw, 3.2rem);
+            font-size: clamp(3rem, max(5vw, 7vh), 10rem);
             font-weight: 800;
             color: white;
             line-height: 1.1;
         }
 
         .display-company {
-            font-size: clamp(1.1rem, 2vw, 1.6rem);
+            font-size: clamp(1.6rem, max(2.8vw, 4vh), 6rem);
             color: rgba(255,255,255,0.75);
             font-weight: 400;
         }
@@ -225,8 +236,8 @@
             background: rgba(204,0,0,0.25);
             border: 1px solid rgba(204,0,0,0.5);
             color: #ff8080;
-            font-size: 1rem;
-            padding: 8px 18px;
+            font-size: clamp(1rem, 2.2vh, 2.4rem);
+            padding: clamp(6px, 1vh, 14px) clamp(12px, 1.8vw, 28px);
             border-radius: 30px;
             align-self: flex-start;
         }
@@ -236,8 +247,8 @@
             background: rgba(234,179,8,0.2);
             border: 1px solid rgba(234,179,8,0.4);
             color: #fcd34d;
-            font-size: 0.85rem;
-            padding: 4px 14px;
+            font-size: clamp(0.8rem, 1.6vh, 1.6rem);
+            padding: clamp(4px, 0.8vh, 10px) clamp(10px, 1.5vw, 20px);
             border-radius: 20px;
             align-self: flex-start;
             margin-top: 4px;
@@ -255,13 +266,13 @@
         }
 
         .presenter-avatar {
-            width: 44px; height: 44px;
+            width: clamp(36px, 4.5vh, 64px); height: clamp(36px, 4.5vh, 64px);
             border-radius: 50%;
             overflow: hidden;
             flex-shrink: 0;
             border: 2px solid rgba(255,255,255,0.2);
             display: flex; align-items: center; justify-content: center;
-            font-size: 0.9rem; font-weight: 700; color: white;
+            font-size: clamp(0.8rem, 1.4vh, 1.4rem); font-weight: 700; color: white;
         }
 
         .presenter-avatar img {
@@ -269,7 +280,7 @@
         }
 
         .presenter-label {
-            font-size: 0.7rem;
+            font-size: clamp(0.65rem, 1.2vh, 1.2rem);
             text-transform: uppercase;
             letter-spacing: 1.5px;
             color: rgba(255,255,255,0.4);
@@ -277,13 +288,13 @@
         }
 
         .presenter-name {
-            font-size: 0.95rem;
+            font-size: clamp(0.9rem, 1.8vh, 1.8rem);
             font-weight: 600;
             color: rgba(255,255,255,0.85);
         }
 
         .presenter-company {
-            font-size: 0.8rem;
+            font-size: clamp(0.75rem, 1.4vh, 1.4rem);
             color: rgba(255,255,255,0.5);
         }
 
@@ -296,53 +307,60 @@
         /* Next Bar */
         .next-bar {
             position: absolute;
-            bottom: 0; left: 0; right: 0;
-            background: rgba(0,0,0,0.55);
+            top: 0; left: 0; right: 0;
+            background: rgba(0,0,0,0.6);
             backdrop-filter: blur(12px);
-            border-top: 1px solid rgba(255,255,255,0.08);
-            padding: 18px 40px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            padding: clamp(12px, 1.8vh, 24px) 40px;
             display: flex;
             align-items: center;
-            gap: 20px;
+            gap: clamp(16px, 2.5vh, 36px);
+            z-index: 5;
         }
 
-        .next-bar-label {
-            color: rgba(255,255,255,0.4);
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            white-space: nowrap;
+        #next-bar {
+            padding-left: 320px;
         }
 
+
+
         .next-bar-divider {
             width: 1px;
-            height: 30px;
+            height: clamp(40px, 7vh, 96px);
             background: rgba(255,255,255,0.15);
         }
 
         .next-photo-small {
-            width: 44px; height: 44px;
+            width: clamp(56px, 8.5vh, 120px); height: clamp(56px, 8.5vh, 120px);
             border-radius: 50%;
             object-fit: cover;
-            border: 2px solid rgba(255,255,255,0.2);
+            border: 2px solid rgba(255,255,255,0.3);
             background: rgba(255,255,255,0.1);
         }
 
         .next-info .next-name-text {
             color: white;
-            font-size: 1.15rem;
-            font-weight: 600;
+            font-size: clamp(1.5rem, 3.8vh, 4.2rem);
+            font-weight: 700;
         }
 
         .next-info .next-company-text {
+            color: rgba(255,255,255,0.6);
+            font-size: clamp(1rem, 2.5vh, 2.8rem);
+        }
+
+        .next-bar-label {
             color: rgba(255,255,255,0.5);
-            font-size: 0.9rem;
+            font-size: clamp(0.8rem, 1.8vh, 2rem);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            white-space: nowrap;
         }
 
         .next-bar-end-text {
-            color: rgba(255,255,255,0.3);
+            color: rgba(255,255,255,0.4);
             font-style: italic;
-            font-size: 1rem;
+            font-size: clamp(1.2rem, 2.5vh, 2.8rem);
         }
 
         /* ============================================================
@@ -709,13 +727,13 @@
         ============================================================ */
         .photo-timer-wrap {
             position: relative;
-            width: 220px; height: 220px;
+            width: min(42vh, 45vmin); height: min(42vh, 45vmin);
             flex-shrink: 0;
         }
         .timer-ring-svg {
             position: absolute;
             top: -14px; left: -14px;
-            width: 248px; height: 248px;
+            width: calc(min(42vh, 45vmin) + 28px); height: calc(min(42vh, 45vmin) + 28px);
             transform: rotate(-90deg);
             pointer-events: none;
             display: none;
@@ -738,7 +756,7 @@
         @keyframes timerBlink { to { opacity: 0.15; } }
 
         #display-timer-text {
-            font-size: 2.6rem; font-weight: 700;
+            font-size: clamp(2rem, 4vh, 5rem); font-weight: 700;
             color: rgba(255,255,255,0.95);
             font-variant-numeric: tabular-nums;
             letter-spacing: 3px;
@@ -986,6 +1004,59 @@
         }
         .btn-save:hover { background: var(--red-dark); }
 
+        /* Profile Extras Section in Modal */
+        .extras-section-divider {
+            border: none;
+            border-top: 1px solid var(--border);
+            margin: 16px 0 12px;
+        }
+        .extras-section-title {
+            font-size: 0.72rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            color: var(--muted);
+            margin-bottom: 12px;
+        }
+        .offline-photo-row {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 12px;
+            background: var(--bg);
+            border-radius: 8px;
+            border: 1px solid var(--border);
+            margin-bottom: 8px;
+        }
+        .offline-photo-thumb {
+            width: 52px; height: 52px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid var(--border);
+            flex-shrink: 0;
+        }
+        .offline-photo-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        .btn-file-label {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 5px 12px;
+            font-size: 0.82rem;
+            font-weight: 600;
+            cursor: pointer;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            background: white;
+            color: var(--muted);
+            transition: all 0.15s;
+        }
+        .btn-file-label:hover { background: white; color: var(--text); }
+
         /* Import/Export */
         .import-export-panel {
             padding: 16px;
@@ -1049,12 +1120,16 @@
 <div id="view-display" class="view">
     <button id="fullscreen-btn" onclick="toggleFullscreen()" title="Vollbild">⛶</button>
     <div class="display-header">
-        <img class="bni-badge" src="logo.jpeg" alt="BNI Sonne Ulm">
-        <div class="chapter-name">Vorstellungsrunde</div>
+        <img class="bni-badge" id="display-logo" src="logo.jpeg" alt="BNI">
+        <div class="chapter-name" id="display-chapter-name">Vorstellungsrunde</div>
         <a href="#" onclick="window.location.hash=''" style="margin-left:16px;color:rgba(255,255,255,0.25);font-size:0.78rem;text-decoration:none;letter-spacing:1px;" title="Zur Steuerung">⚙ Steuerung</a>
     </div>
 
     <div class="progress-indicator" id="progress-text"></div>
+    <div class="qr-corner" id="qr-wrap" style="display:none">
+        <div id="display-qr"></div>
+        <div class="qr-label">Profil</div>
+    </div>
     <div class="round-badge" id="round-badge">2. Runde – Besucher</div>
 
     <!-- Abwesenheits-Zusammenfassung -->
@@ -1074,7 +1149,7 @@
 
     <!-- Startbild: außerhalb der Karte, damit es unabhängig angezeigt werden kann -->
     <div id="display-empty" style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;">
-        <img src="logo.jpeg" alt="BNI Sonne Ulm" style="width:min(520px,72vw);height:auto;border-radius:24px;box-shadow:0 8px 60px rgba(0,0,0,0.5);">
+        <img id="display-logo-empty" src="logo.jpeg" alt="BNI" style="width:min(520px,72vw);height:auto;border-radius:24px;box-shadow:0 8px 60px rgba(0,0,0,0.5);">
     </div>
 
     <div class="main-card" id="main-card">
@@ -1091,10 +1166,6 @@
                     </div>
                 </div>
                 <div id="display-timer-text"></div>
-                <div class="qr-wrap" id="qr-wrap" style="display:none">
-                    <div id="display-qr"></div>
-                    <div class="qr-label">Profil</div>
-                </div>
             </div>
 
             <div class="info-section">
@@ -1121,7 +1192,7 @@
         <div class="next-info">
             <div class="next-name-text" id="next-name-text">—</div>
             <div class="next-company-text" id="next-company-text"></div>
-            <div id="next-sub-text" style="display:none;font-size:0.78rem;color:rgba(255,255,255,0.4);margin-top:2px;"></div>
+            <div id="next-sub-text" style="display:none;font-size:clamp(0.7rem,1.5vh,1.5rem);color:rgba(255,255,255,0.4);margin-top:2px;"></div>
         </div>
     </div>
 
@@ -1142,8 +1213,8 @@
 
     <!-- Header -->
     <div class="ctrl-header">
-        <img class="bni-badge" src="logo.jpeg" alt="BNI Sonne Ulm">
-        <div class="ctrl-title">Vorstellungsrunde steuern</div>
+        <img class="bni-badge" id="ctrl-logo" src="logo.jpeg" alt="BNI">
+        <div class="ctrl-title" id="ctrl-chapter-name">Vorstellungsrunde steuern</div>
         <div class="flex-gap-8">
             <div class="status-dot dot-idle" id="sync-dot" title="Display-Verbindung"></div>
             <button class="btn btn-secondary btn-sm" onclick="resetMeeting()">↺ Neu starten</button>
@@ -1188,6 +1259,7 @@
                 <div class="panel-right-tab active" data-panel="visitors-panel" onclick="switchRightPanel('visitors-panel')">Besucher</div>
                 <div class="panel-right-tab" data-panel="members-panel" onclick="switchRightPanel('members-panel')">Mitglieder</div>
                 <div class="panel-right-tab" data-panel="substitutes-panel" onclick="switchRightPanel('substitutes-panel')">Vertretungen</div>
+                <div class="panel-right-tab" data-panel="admin-panel" onclick="switchRightPanel('admin-panel')">Admin</div>
             </div>
 
             <div class="panel-right-content">
@@ -1232,6 +1304,10 @@
                 </div>
 
                 <!-- SUBSTITUTES -->
+                <div id="admin-panel" class="right-panel-section">
+                    <!-- rendered by renderAdminPanel() -->
+                </div>
+
                 <div id="substitutes-panel" class="right-panel-section">
                     <div style="padding: 14px 16px 8px;">
                         <div style="font-size:0.85rem; color:var(--muted); margin-bottom:12px;">Mitglied als vertreten markieren:</div>
@@ -1289,13 +1365,32 @@
         <label>Foto-URL (von BNI-Profil kopieren)</label>
         <input id="m-photo" type="text" placeholder="https://cdn.bniconnectglobal.com/...">
 
-        <label>Profil-URL (für QR-Code)</label>
+        <label>Profil-URL (von BNI, wird für Sync genutzt)</label>
         <input id="m-profile" type="text" placeholder="https://bni-ulm.com/sonne/de/memberdetails?...">
 
         <div id="photo-preview-wrap" style="display:none; text-align:center; margin:8px 0;">
             <img id="photo-preview" src="" alt="" style="width:80px; height:80px; border-radius:50%; object-fit:cover; border:2px solid var(--border);">
         </div>
 
+        <hr class="extras-section-divider">
+        <div class="extras-section-title">Dauerhaft gespeichert (bleibt nach BNI-Sync erhalten)</div>
+
+        <label>Kurzlink (für QR-Code) <span style="font-weight:400;color:var(--muted);">— überschreibt Profil-URL im QR</span></label>
+        <input id="m-kurzlink" type="text" placeholder="z.B. https://qr.bp.com/kai">
+
+        <label>Offline-Foto <span style="font-weight:400;color:var(--muted);">— lokal gespeichert, kein Internet nötig</span></label>
+        <div class="offline-photo-row" id="offline-photo-row">
+            <img class="offline-photo-thumb" id="offline-photo-thumb" src="" alt="" style="display:none;">
+            <div class="offline-photo-actions">
+                <label class="btn-file-label">
+                    📁 Datei wählen
+                    <input type="file" id="m-photo-file" accept="image/*" style="display:none" onchange="handleOfflinePhotoFile(this)">
+                </label>
+                <button class="btn btn-ghost btn-sm" onclick="loadOfflinePhotoFromUrl()">⬇ Von Profil-URL laden</button>
+                <button class="btn btn-danger btn-sm" id="btn-remove-offline-photo" onclick="removeOfflinePhoto()" style="display:none;">✕ Entfernen</button>
+            </div>
+        </div>
+
         <div class="modal-footer">
             <button class="btn btn-ghost" onclick="closeMemberModal()">Abbrechen</button>
             <button class="btn btn-save btn-primary" onclick="saveMember()">Speichern</button>
@@ -1319,6 +1414,21 @@
             <button class="btn btn-ghost" onclick="closeModal('modal-importexport')">Abbrechen</button>
             <button class="btn btn-save btn-primary" onclick="importJSON()">Importieren</button>
         </div>
+
+        <hr class="extras-section-divider" style="margin-top:24px;">
+        <div class="extras-section-title">Profildaten (Kurzlinks + Offline-Fotos)</div>
+        <p style="font-size:0.85rem; color:var(--muted); margin-bottom:14px;">
+            Kurzlinks und lokale Fotos werden <strong>getrennt</strong> gespeichert und bleiben nach jedem BNI-Sync erhalten.
+            Diese Datei im Projektordner ablegen und nach einem Browser-Reset wieder importieren.
+        </p>
+        <div style="display:flex; gap:8px; align-items:center;">
+            <button class="btn btn-ghost" onclick="exportProfildaten()">⬇ profildaten.json speichern</button>
+            <label class="btn-file-label" style="cursor:pointer;">
+                ⬆ profildaten.json laden
+                <input type="file" id="profildaten-file-input" accept=".json" style="display:none" onchange="importProfildaten(this)">
+            </label>
+            <span id="profildaten-status" style="font-size:0.82rem;color:var(--muted);"></span>
+        </div>
     </div>
 </div>
 
@@ -1505,7 +1615,7 @@
             <div style="font-weight:700;font-size:0.9rem;margin-bottom:6px;">Schritt 2 – Daten exportieren</div>
             <ol style="font-size:0.85rem;color:var(--muted);padding-left:18px;line-height:1.8;">
                 <li>BNI-Mitgliederliste öffnen:
-                    <a href="https://bni-ulm.com/sonne/de/memberlist?chapterName=6035&regionIds=43671&isChapterwebsite=true" target="_blank" style="color:var(--red);font-weight:600;">bni-ulm.com → Chapter Sonne</a>
+                    <a id="bni-sync-link" href="https://bni-ulm.com/sonne/de/memberlist?chapterName=6035&regionIds=43671&isChapterwebsite=true" target="_blank" style="color:var(--red);font-weight:600;">bni-ulm.com → Chapter Sonne</a>
                 </li>
                 <li>Warten bis alle Mitglieder geladen sind</li>
                 <li>Bookmarklet <strong>"BNI Mitglieder exportieren"</strong> klicken</li>
@@ -1533,10 +1643,32 @@
 </div>
 
 <script>
+// ============================================================
+// CONSTANTS & CHAPTER CONFIG
+// ============================================================
+const APP_VERSION = '1.1.0';
+const GITEA_RAW = 'http://72.60.134.73:3000/cheubaum/BNI-Sonne/raw/branch/main';
+const CHAPTER_CONFIG_KEY = 'bni-active-chapter';
+
+function loadChapterConfig() {
+    try { const s = localStorage.getItem(CHAPTER_CONFIG_KEY); return s ? JSON.parse(s) : null; } catch(e) { return null; }
+}
+function saveChapterConfig(cfg) {
+    localStorage.setItem(CHAPTER_CONFIG_KEY, JSON.stringify(cfg));
+}
+function clearChapterData() {
+    if (activeChapter) localStorage.removeItem(`bni-chapter-${activeChapter.code}-v2`);
+    if (activeChapter) localStorage.removeItem(`bni-extras-${activeChapter.code}`);
+    localStorage.removeItem(CHAPTER_CONFIG_KEY);
+    activeChapter = null;
+}
+
+let activeChapter = loadChapterConfig();
+let STORAGE_KEY = activeChapter ? `bni-chapter-${activeChapter.code}-v2` : 'bni-chapter-default-v2';
+
 // ============================================================
 // STATE
 // ============================================================
-const STORAGE_KEY = 'bni-sonne-v2';
 
 let state = loadState();
 let sortableInstance = null;
@@ -1577,6 +1709,161 @@ function saveState(broadcast = true) {
     }
 }
 
+// ============================================================
+// PROFILE EXTRAS (Kurzlinks + Offline-Fotos, persistent)
+// ============================================================
+let EXTRAS_KEY = activeChapter ? `bni-extras-${activeChapter.code}` : 'bni-profile-extras';
+
+function loadExtras() {
+    try {
+        const s = localStorage.getItem(EXTRAS_KEY);
+        return s ? JSON.parse(s) : {};
+    } catch(e) { return {}; }
+}
+
+function saveExtras(extras) {
+    localStorage.setItem(EXTRAS_KEY, JSON.stringify(extras));
+}
+
+function extrasKey(name) {
+    return (name || '').toLowerCase().trim();
+}
+
+// Resize an image File to base64 JPEG (max maxPx on longest side)
+function resizePhotoToBase64(file, maxPx = 400) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                let w = img.width, h = img.height;
+                if (w > maxPx || h > maxPx) {
+                    if (w > h) { h = Math.round(h * maxPx / w); w = maxPx; }
+                    else { w = Math.round(w * maxPx / h); h = maxPx; }
+                }
+                const canvas = document.createElement('canvas');
+                canvas.width = w; canvas.height = h;
+                canvas.getContext('2d').drawImage(img, 0, 0, w, h);
+                resolve(canvas.toDataURL('image/jpeg', 0.82));
+            };
+            img.onerror = reject;
+            img.src = e.target.result;
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+
+// Try to load a remote photo as base64 via canvas (requires CORS)
+function loadPhotoFromUrl(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            const maxPx = 400;
+            let w = img.width, h = img.height;
+            if (w > maxPx || h > maxPx) {
+                if (w > h) { h = Math.round(h * maxPx / w); w = maxPx; }
+                else { w = Math.round(w * maxPx / h); h = maxPx; }
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = w; canvas.height = h;
+            canvas.getContext('2d').drawImage(img, 0, 0, w, h);
+            resolve(canvas.toDataURL('image/jpeg', 0.82));
+        };
+        img.onerror = () => reject(new Error('Foto konnte nicht geladen werden (CORS oder URL ungültig).'));
+        img.src = url;
+    });
+}
+
+// Module-level state for currently editing offline photo
+let _editingOfflinePhotoB64 = null;
+
+function _updateOfflinePhotoUI(b64) {
+    _editingOfflinePhotoB64 = b64 || null;
+    const thumb = document.getElementById('offline-photo-thumb');
+    const removeBtn = document.getElementById('btn-remove-offline-photo');
+    if (b64) {
+        thumb.src = b64;
+        thumb.style.display = 'block';
+        removeBtn.style.display = 'inline-flex';
+    } else {
+        thumb.src = '';
+        thumb.style.display = 'none';
+        removeBtn.style.display = 'none';
+    }
+}
+
+function handleOfflinePhotoFile(input) {
+    const file = input.files && input.files[0];
+    if (!file) return;
+    resizePhotoToBase64(file)
+        .then(b64 => _updateOfflinePhotoUI(b64))
+        .catch(e => alert('Fehler beim Laden des Fotos: ' + e.message));
+    input.value = '';
+}
+
+function loadOfflinePhotoFromUrl() {
+    const url = (document.getElementById('m-photo').value || '').trim();
+    if (!url) { alert('Bitte zuerst eine Foto-URL eingeben.'); return; }
+    // Remove any previous hint
+    const existingHint = document.getElementById('offline-photo-url-hint');
+    if (existingHint) existingHint.remove();
+    loadPhotoFromUrl(url)
+        .then(b64 => _updateOfflinePhotoUI(b64))
+        .catch(() => {
+            // Show inline hint with direct link instead of an alert
+            const hint = document.createElement('div');
+            hint.id = 'offline-photo-url-hint';
+            hint.style.cssText = 'font-size:0.82rem;color:var(--muted);margin-top:6px;line-height:1.5;';
+            hint.innerHTML = `Server erlaubt keinen direkten Import. <a href="${url}" target="_blank" rel="noopener" style="color:var(--red);font-weight:600;">Foto öffnen ↗</a> &rarr; Rechtsklick &rarr; Bild speichern &rarr; dann über <strong>Datei wählen</strong> hochladen.`;
+            document.getElementById('offline-photo-row').insertAdjacentElement('afterend', hint);
+        });
+}
+
+function removeOfflinePhoto() {
+    _updateOfflinePhotoUI(null);
+}
+
+// Export profildaten.json
+function exportProfildaten() {
+    const extras = loadExtras();
+    const blob = new Blob([JSON.stringify({ version: 1, extras }, null, 2)], { type: 'application/json' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'profildaten.json';
+    a.click();
+    document.getElementById('profildaten-status').textContent = '✓ Gespeichert';
+    setTimeout(() => { document.getElementById('profildaten-status').textContent = ''; }, 3000);
+}
+
+// Import profildaten.json
+function importProfildaten(input) {
+    const file = input.files && input.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        try {
+            const data = JSON.parse(e.target.result);
+            const incoming = data.extras || data; // support both formats
+            const existing = loadExtras();
+            // Merge: incoming data wins for kurzlink/photoB64 per member
+            Object.entries(incoming).forEach(([k, v]) => {
+                existing[k] = Object.assign(existing[k] || {}, v);
+            });
+            saveExtras(existing);
+            const count = Object.keys(incoming).length;
+            document.getElementById('profildaten-status').textContent = `✓ ${count} Einträge geladen`;
+            setTimeout(() => { document.getElementById('profildaten-status').textContent = ''; }, 4000);
+            renderCurrentView();
+        } catch(err) {
+            alert('Ungültige Datei: ' + err.message);
+        }
+        input.value = '';
+    };
+    reader.readAsText(file);
+}
+
 // ============================================================
 // BROADCAST CHANNEL (cross-tab sync)
 // ============================================================
@@ -1585,7 +1872,7 @@ let syncDot;
 
 function initChannel() {
     try {
-        channel = new BroadcastChannel('bni-sonne-channel');
+        channel = new BroadcastChannel('bni-channel-' + (activeChapter ? activeChapter.code : 'default'));
         channel.onmessage = (ev) => {
             if (ev.data.type === 'STATE_UPDATE') {
                 state = ev.data.state;
@@ -1629,9 +1916,12 @@ function getView() {
 }
 
 function renderCurrentView() {
+    const hasChapter = !!activeChapter;
     const view = getView();
-    document.getElementById('view-display').classList.toggle('active', view === 'display');
-    document.getElementById('view-control').classList.toggle('active', view === 'control');
+    document.getElementById('view-activation').classList.toggle('active', !hasChapter);
+    document.getElementById('view-display').classList.toggle('active', hasChapter && view === 'display');
+    document.getElementById('view-control').classList.toggle('active', hasChapter && view === 'control');
+    if (!hasChapter) return;
 
     if (view === 'display') {
         renderDisplay();
@@ -1871,13 +2161,14 @@ function renderDisplay() {
         qrWrap.style.display = 'block';
         qrEl.innerHTML = '';
         try {
+            const qrSize = Math.round(Math.min(window.innerHeight * 0.24, window.innerWidth * 0.14, 300));
             new QRCode(qrEl, {
                 text: data.profileUrl,
-                width: 100,
-                height: 100,
+                width: qrSize,
+                height: qrSize,
                 colorDark: '#1a2744',
                 colorLight: '#ffffff',
-                correctLevel: QRCode.CorrectLevel.M,
+                correctLevel: QRCode.CorrectLevel.L,
             });
         } catch(e) { qrWrap.style.display = 'none'; }
     } else {
@@ -2078,13 +2369,15 @@ function getDisplayData(presenter) {
         }
         resolvedSub = { ...sub, photoUrl };
     }
+    // Merge profile extras (kurzlink + offline photo override)
+    const ex = loadExtras()[extrasKey(presenter.name)] || {};
     return {
         // Member stays in foreground
         name: presenter.name,
         company: presenter.company,
         specialty: presenter.specialty,
-        photoUrl: presenter.photoUrl || '',
-        profileUrl: presenter.profileUrl || '',
+        photoUrl: ex.photoB64 || presenter.photoUrl || '',
+        profileUrl: ex.kurzlink || presenter.profileUrl || '',
         // Substitute shown as secondary presenter
         presentedBy: resolvedSub,
         isVisitor: false,
@@ -2102,6 +2395,7 @@ function renderControl() {
     renderSubstitutesList();
     renderSubstituteMemberSelect();
     renderInvitedBySelect();
+    renderAdminPanel();
     updateNextButton();
     syncDot = document.getElementById('sync-dot');
 }
@@ -2553,7 +2847,9 @@ function openAddMember() {
     document.getElementById('m-specialty').value = '';
     document.getElementById('m-photo').value = '';
     document.getElementById('m-profile').value = '';
+    document.getElementById('m-kurzlink').value = '';
     document.getElementById('photo-preview-wrap').style.display = 'none';
+    _updateOfflinePhotoUI(null);
     openModal('modal-member');
 }
 
@@ -2574,6 +2870,12 @@ function editMember(id) {
     } else {
         document.getElementById('photo-preview-wrap').style.display = 'none';
     }
+
+    // Load extras for this member
+    const ex = loadExtras()[extrasKey(m.name)] || {};
+    document.getElementById('m-kurzlink').value = ex.kurzlink || '';
+    _updateOfflinePhotoUI(ex.photoB64 || null);
+
     openModal('modal-member');
 }
 
@@ -2595,6 +2897,7 @@ function saveMember() {
     const specialty = document.getElementById('m-specialty').value.trim();
     const photoUrl = document.getElementById('m-photo').value.trim();
     const profileUrl = document.getElementById('m-profile').value.trim();
+    const kurzlink = document.getElementById('m-kurzlink').value.trim();
 
     if (!name) { alert('Bitte Name eingeben.'); return; }
 
@@ -2612,6 +2915,18 @@ function saveMember() {
         }
     }
 
+    // Save extras (kurzlink + offline photo) — keyed by name
+    const extras = loadExtras();
+    const key = extrasKey(name);
+    const entry = extras[key] || {};
+    if (kurzlink) entry.kurzlink = kurzlink;
+    else delete entry.kurzlink;
+    if (_editingOfflinePhotoB64) entry.photoB64 = _editingOfflinePhotoB64;
+    else delete entry.photoB64;
+    if (Object.keys(entry).length > 0) extras[key] = entry;
+    else delete extras[key];
+    saveExtras(extras);
+
     saveState();
     closeMemberModal();
     renderControl();
@@ -2632,6 +2947,8 @@ function deleteMember(id) {
 }
 
 function closeMemberModal() {
+    const hint = document.getElementById('offline-photo-url-hint');
+    if (hint) hint.remove();
     closeModal('modal-member');
 }
 
@@ -3679,16 +3996,233 @@ function applyQueueRatio(ratio) {
     });
 })();
 
+// ============================================================
+// CHAPTER ACTIVATION & LICENSE
+// ============================================================
+async function activateChapter() {
+    const input = document.getElementById('activation-code-input');
+    const code = (input ? input.value : '').trim().toLowerCase();
+    if (!code) return;
+    const btn = document.getElementById('activation-btn');
+    const status = document.getElementById('activation-status');
+    btn.disabled = true;
+    status.textContent = 'Überprüfe Lizenzcode…';
+    status.style.color = 'rgba(255,255,255,0.6)';
+    try {
+        const res = await fetch(`${GITEA_RAW}/chapters/${code}/config.json`, { cache: 'no-store' });
+        if (!res.ok) {
+            status.textContent = 'Ungültiger oder abgelaufener Lizenzcode.';
+            status.style.color = '#f87171';
+            btn.disabled = false;
+            return;
+        }
+        const config = await res.json();
+        activeChapter = { code, config, activatedAt: new Date().toISOString(), lastChecked: new Date().toISOString() };
+        saveChapterConfig(activeChapter);
+        STORAGE_KEY = `bni-chapter-${code}-v2`;
+        EXTRAS_KEY = `bni-extras-${code}`;
+        state = loadState();
+        if (config.defaultTimer && !state.meetingOrder.length) {
+            state.defaultTimer = config.defaultTimer;
+            saveState(false);
+        }
+        applyChapterUI(config);
+        status.textContent = `✓ Chapter "${config.chapterName}" aktiviert!`;
+        status.style.color = '#4ade80';
+        setTimeout(() => {
+            renderCurrentView();
+            fetchChapterMembersFromGitea();
+        }, 800);
+    } catch(e) {
+        status.textContent = 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
+        status.style.color = '#f87171';
+        btn.disabled = false;
+    }
+}
+
+function applyChapterUI(config) {
+    if (!config) return;
+    const name = config.chapterName || 'BNI Chapter';
+    document.title = `${name} – Vorstellungsrunde`;
+    const el = document.getElementById('display-chapter-name');
+    if (el) el.textContent = name;
+    const ctrlName = document.getElementById('ctrl-chapter-name');
+    if (ctrlName) ctrlName.textContent = `${name} – Steuerung`;
+    if (config.logoUrl && activeChapter) {
+        const src = config.logoUrl.startsWith('http') ? config.logoUrl
+            : `${GITEA_RAW}/chapters/${activeChapter.code}/${config.logoUrl}`;
+        ['display-logo','display-logo-empty','ctrl-logo'].forEach(id => {
+            const img = document.getElementById(id);
+            if (img) img.src = src;
+        });
+    }
+    const syncLink = document.getElementById('bni-sync-link');
+    if (syncLink && config.syncUrl) {
+        syncLink.href = config.syncUrl;
+        syncLink.textContent = name + ' – Mitgliederliste';
+    }
+}
+
+async function checkLicenseAndUpdates() {
+    if (!activeChapter) return;
+    try {
+        const res = await fetch(`${GITEA_RAW}/chapters/${activeChapter.code}/config.json`, { cache: 'no-store' });
+        if (!res.ok) {
+            clearChapterData();
+            state = defaultState();
+            alert('Deine Lizenz wurde widerrufen. Bitte gib einen neuen Code ein.');
+            renderCurrentView();
+            return;
+        }
+        const config = await res.json();
+        activeChapter.config = config;
+        activeChapter.lastChecked = new Date().toISOString();
+        saveChapterConfig(activeChapter);
+        applyChapterUI(config);
+        await checkForUpdates();
+    } catch(e) {
+        // Offline → continue with cached data
+        const dot = document.getElementById('sync-dot');
+        if (dot) dot.title = 'Offline – letzte Prüfung: ' + (activeChapter.lastChecked ? new Date(activeChapter.lastChecked).toLocaleDateString('de') : 'unbekannt');
+    }
+}
+
+async function checkForUpdates() {
+    try {
+        const res = await fetch(`${GITEA_RAW}/version.json`, { cache: 'no-store' });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.version && data.version > APP_VERSION) showUpdateBanner(data.version, data.notes);
+    } catch(e) { /* ignore */ }
+}
+
+function showUpdateBanner(version, notes) {
+    let banner = document.getElementById('update-banner');
+    if (!banner) {
+        banner = document.createElement('div');
+        banner.id = 'update-banner';
+        banner.style.cssText = 'background:#1a2744;color:white;padding:8px 16px;display:flex;align-items:center;gap:12px;font-size:0.85rem;flex-shrink:0;z-index:100;';
+        const ctrlView = document.getElementById('view-control');
+        ctrlView.insertBefore(banner, ctrlView.firstChild);
+    }
+    banner.innerHTML = `🆕 Update ${version} verfügbar${notes ? ' – ' + notes : ''} &nbsp;<button onclick="downloadUpdate('${version}')" style="background:#cc0000;color:white;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:0.82rem;font-weight:600;">Jetzt laden</button> <button onclick="this.parentElement.style.display='none'" style="background:transparent;border:none;color:rgba(255,255,255,0.5);cursor:pointer;margin-left:auto;font-size:1rem;">✕</button>`;
+}
+
+async function downloadUpdate(version) {
+    try {
+        const licRes = await fetch(`${GITEA_RAW}/chapters/${activeChapter.code}/config.json`, { cache: 'no-store' });
+        if (!licRes.ok) {
+            clearChapterData();
+            state = defaultState();
+            alert('Lizenz nicht mehr gültig. Bitte neuen Code eingeben.');
+            renderCurrentView();
+            return;
+        }
+    } catch(e) { alert('Keine Serververbindung möglich.'); return; }
+    try {
+        const res = await fetch(`${GITEA_RAW}/index.html`, { cache: 'no-store' });
+        const html = await res.text();
+        const blob = new Blob([html], { type: 'text/html' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'index.html';
+        a.click();
+        URL.revokeObjectURL(a.href);
+    } catch(e) { alert('Download fehlgeschlagen: ' + e.message); }
+}
+
+async function fetchChapterMembersFromGitea() {
+    if (!activeChapter) return;
+    try {
+        const res = await fetch(`${GITEA_RAW}/chapters/${activeChapter.code}/members.json`, { cache: 'no-store' });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data.members || !data.members.length) return;
+        const mergedMap = new Map(state.members.map(m => [m.id, m]));
+        data.members.forEach(m => {
+            const ex = mergedMap.get(m.id);
+            mergedMap.set(m.id, ex ? Object.assign({}, ex, m) : m);
+        });
+        state.members = Array.from(mergedMap.values());
+        const knownIds = new Set(state.meetingOrder);
+        state.members.forEach(m => { if (!knownIds.has(m.id)) state.meetingOrder.push(m.id); });
+        activeChapter.lastMemberSync = new Date().toISOString();
+        saveChapterConfig(activeChapter);
+        saveState(false);
+        renderCurrentView();
+        renderAdminPanel();
+    } catch(e) { /* ignore */ }
+}
+
+function renderAdminPanel() {
+    const panel = document.getElementById('admin-panel');
+    if (!panel) return;
+    const cfg = activeChapter && activeChapter.config;
+    const code = activeChapter && activeChapter.code;
+    const lastChecked = activeChapter && activeChapter.lastChecked ? new Date(activeChapter.lastChecked).toLocaleString('de') : '—';
+    const lastSync = activeChapter && activeChapter.lastMemberSync ? new Date(activeChapter.lastMemberSync).toLocaleString('de') : '—';
+    const maskedCode = code ? code.slice(0, -3).replace(/./g, '·') + code.slice(-3) : '—';
+
+    panel.innerHTML = `<div style="padding:16px;overflow-y:auto;height:100%;">
+        <div style="font-weight:700;font-size:0.9rem;margin-bottom:14px;">Chapter-Administration</div>
+        ${cfg ? `
+        <div style="background:#f8f9fa;border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:14px;">
+            <div style="font-size:0.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Aktives Chapter</div>
+            <div style="font-weight:600;margin-bottom:2px;">${cfg.chapterName || '—'}</div>
+            <div style="font-size:0.82rem;color:var(--muted);">Version: <strong>${APP_VERSION}</strong></div>
+            <div style="font-size:0.82rem;color:var(--muted);">Letzte Lizenzprüfung: ${lastChecked}</div>
+        </div>
+        <button class="btn btn-secondary btn-sm" style="width:100%;margin-bottom:6px;" onclick="fetchChapterMembersFromGitea()">🔄 Mitglieder vom Server laden</button>
+        <div style="font-size:0.78rem;color:var(--muted);margin-bottom:14px;">Letzte Synchronisation: ${lastSync}</div>
+        <button class="btn btn-secondary btn-sm" style="width:100%;margin-bottom:6px;" onclick="checkForUpdates()">🔍 Auf Updates prüfen</button>
+        <div style="font-size:0.78rem;color:var(--muted);margin-bottom:20px;"></div>
+        ` : `<div style="color:var(--muted);font-size:0.88rem;margin-bottom:20px;">Kein Chapter aktiviert.</div>`}
+        <div style="border-top:1px solid var(--border);padding-top:14px;">
+            <button class="btn btn-ghost btn-sm" style="width:100%;" onclick="confirmSwitchChapter()">↔ Chapter wechseln</button>
+        </div>
+    </div>`;
+}
+
+function confirmSwitchChapter() {
+    if (!confirm('Chapter wechseln?\n\nAlle lokalen Daten dieses Chapters werden gelöscht. Fortfahren?')) return;
+    clearChapterData();
+    state = defaultState();
+    renderCurrentView();
+}
+
 // ============================================================
 // INIT
 // ============================================================
 initChannel();
+if (activeChapter) applyChapterUI(activeChapter.config);
 renderCurrentView();
+checkLicenseAndUpdates();
 
 // Keyboard shortcut hint
 if (getView() === 'control') {
     console.log('Tastaturkürzel: Leertaste oder → = Weiter');
 }
 </script>
+
+<!-- ============================================================
+     ACTIVATION VIEW
+============================================================ -->
+<div id="view-activation" class="view" style="background:linear-gradient(160deg,#0f1f45 0%,#1a2744 40%,#0d1b35 100%);align-items:center;justify-content:center;flex-direction:column;">
+    <img id="activation-logo" src="logo.jpeg" alt="BNI" style="height:80px;margin-bottom:32px;border-radius:8px;object-fit:contain;">
+    <div style="background:rgba(255,255,255,0.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:40px;width:min(420px,90vw);color:white;">
+        <div style="font-size:1.4rem;font-weight:700;margin-bottom:6px;">BNI Vorstellungsrunde</div>
+        <div style="font-size:0.88rem;color:rgba(255,255,255,0.6);margin-bottom:24px;">Bitte gib deinen Lizenzcode ein, um dein Chapter freizuschalten.</div>
+        <input id="activation-code-input" type="text" placeholder="chapter-lizenzcode"
+               style="width:100%;padding:12px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);border-radius:10px;color:white;font-size:1rem;outline:none;margin-bottom:12px;letter-spacing:1px;"
+               onkeydown="if(event.key==='Enter')activateChapter()"
+               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+        <div id="activation-status" style="font-size:0.85rem;min-height:20px;margin-bottom:12px;"></div>
+        <button id="activation-btn" onclick="activateChapter()"
+                style="width:100%;padding:12px;background:#cc0000;color:white;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;">
+            Aktivieren
+        </button>
+    </div>
+</div>
+
 </body>
 </html>