feat: redesign manual hero section with improved visual hierarchy and modern UI styling

- Restructure hero layout with separate main content and visual areas
- Replace KPI grid with modern spec tiles featuring icons and detailed labels
- Add start orientation guide and primary CTA button for Quick Start
- Reduce topbar padding and adjust font sizing for cleaner appearance
- Update color scheme with darker backgrounds and refined borders
- Improve spec tiles with pill-shaped design and icon badges

src/manual/index.html

@@ -38,33 +38,30 @@
     .topbar {
       position: sticky; top: 0; z-index: 100;
       backdrop-filter: blur(14px);
-      background: rgba(16,18,24,.96);
-      border-bottom: 1px solid rgba(0,0,0,.8);
+      background: rgba(10,12,18,.96);
+      border-bottom: 1px solid rgba(0,0,0,.85);
     }
     .topbar .inner {
       max-width: var(--max);
       margin: 0 auto;
-      padding: 14px 18px;
+      padding: 8px 18px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
+      font-size: 14px;
     }
     .brand {
-      display: flex; align-items: baseline; gap: 10px;
+      display: flex; align-items: baseline; gap: 8px;
       font-weight: 650;
-      letter-spacing: .2px;
+      letter-spacing: .15px;
       white-space: nowrap;
     }
     .brand small { color: var(--muted); font-weight: 500; }
     .badge {
       font-size: 12px;
-      padding: 4px 10px;
-      border-radius: 999px;
-      color: var(--text);
-      background: rgba(17,182,173,.12);
-      border: 1px solid rgba(17,182,173,.7);
-      font-weight: 600;
+      color: var(--muted);
+      font-weight: 500;
     }
     .layout {
       max-width: var(--max);
@@ -113,8 +110,8 @@
       font-weight: 650;
     }
     article {
-      border: 1px solid rgba(0,0,0,.8);
-      background: var(--panel2);
+      border: 1px solid rgba(0,0,0,.9);
+      background: #181b22;
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 20px 22px 14px;
@@ -125,10 +122,10 @@
     }
     section:last-child { border-bottom: 0; padding-bottom: 6px; }
     h1 {
-      margin: 6px 0 6px;
-      font-size: clamp(26px, 3vw, 36px);
+      margin: 4px 0 4px;
+      font-size: clamp(22px, 2.6vw, 30px);
       line-height: 1.15;
-      letter-spacing: -.2px;
+      letter-spacing: -.02em;
     }
     h2 {
       margin: 10px 0 8px;
@@ -144,42 +141,124 @@
     .muted { color: var(--muted); }
     .hero {
       display: grid;
-      grid-template-columns: 1.2fr 1fr;
-      gap: 16px;
+      grid-template-columns: 1.2fr 0.9fr;
+      gap: 18px;
       align-items: center;
+      margin-bottom: 4px;
+    }
+    .hero-main {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .hero-meta {
+      font-size: 14px;
+      color: var(--muted);
+    }
+    .hero-claim {
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--text);
+    }
+    .hero-benefits {
+      font-size: 14px;
+      color: var(--muted);
     }
     .hero-card {
-      border: 1px solid rgba(0,0,0,.8);
-      background: var(--panel);
       border-radius: var(--radius);
-      padding: 16px 18px;
+      padding: 16px 18px 14px;
+      background: linear-gradient(135deg, #1e242f, #141721);
     }
-    .hero img {
+    .hero-visual {
+      justify-self: end;
+    }
+    .hero-visual img {
       width: 100%;
+      max-width: 260px;
       height: auto;
-      border-radius: 12px;
-      background: white;
+      border-radius: 14px;
+      background: #f9fafb;
+      box-shadow: 0 16px 40px rgba(0,0,0,.8);
     }
-    .kpi {
+    .spec-tiles {
       display: grid;
       grid-template-columns: repeat(2, minmax(0,1fr));
       gap: 10px;
-      margin-top: 12px;
+      margin-top: 10px;
     }
-    .kpi div {
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 10px 10px;
-      background: #22252d;
+    .spec-tile {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 9px 10px;
+      border-radius: 999px;
+      background: rgba(15,23,42,.9);
+      border: 1px solid rgba(15,23,42,.9);
     }
-    .kpi .label { font-size: 12px; color: var(--muted); }
-    .kpi .value { font-weight: 650; }
+    .spec-icon {
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      background: rgba(17,182,173,.12);
+      color: var(--accent);
+    }
+    .spec-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    .spec-value {
+      font-size: 13px;
+      font-weight: 600;
+    }
+    .spec-label {
+      font-size: 11px;
+      color: var(--muted);
+    }
+    .start-orientation {
+      margin-top: 14px;
+      font-size: 14px;
+      color: var(--muted);
+    }
+    .start-orientation p { margin: 6px 0; }
+    .start-orientation strong { color: var(--text); }
+    .cta-primary {
+      margin-top: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .btn-primary {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 9px 14px;
+      border-radius: 999px;
+      border: none;
+      background: var(--accent);
+      color: #021310;
+      font-weight: 600;
+      font-size: 14px;
+      cursor: pointer;
+      text-decoration: none;
+    }
+    .btn-primary:hover { opacity: .95; }
+    .cta-links {
+      font-size: 13px;
+      color: var(--muted);
+    }
+    .cta-links a { color: var(--text); }
+    .cta-links a:hover { color: var(--accent); }
     .callout {
-      border: 1px solid rgba(160,137,46,.8);
-      background: rgba(160,137,46,.26);
       border-radius: 12px;
       padding: 12px 12px;
       margin: 12px 0;
+      background: rgba(15,23,42,.85);
+      border: 1px solid rgba(15,23,42,1);
     }
     .warn {
       border: 1px solid rgba(251,191,36,.6);
@@ -246,13 +325,32 @@
       font-size: 13px;
       color: var(--muted);
     }
+    .doc-footer {
+      margin-top: 18px;
+      padding-top: 10px;
+      border-top: 1px solid var(--border);
+      font-size: 13px;
+      color: var(--muted);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .doc-footer strong { color: var(--text); }
     @media (max-width: 980px) {
       .layout {
         grid-template-columns: 1fr;
       }
       nav.toc { display: none; }
       .toc-mobile { display: block; }
-      .hero { grid-template-columns: 1fr; }
+      .hero {
+        grid-template-columns: 1fr;
+      }
+      .hero-visual {
+        justify-self: flex-start;
+      }
+      .spec-tiles {
+        grid-template-columns: 1fr;
+      }
       .grid2 { grid-template-columns: 1fr; }
     }
     @media print {
@@ -329,59 +427,90 @@
     <article>
       <section id="start">
         <div class="hero">
-          <div class="hero-card">
-            <h1>Summitwave Beacon</h1>
-            <p class="muted">Multikanal‑Auracast™ Sender für professionelle Audio‑Installationen.</p>
+          <div class="hero-main">
+            <div class="hero-card">
+              <h1>Summitwave Beacon</h1>
+              <p class="hero-claim">Multikanal‑Auracast™ Sender für professionelle Audio‑Installationen.</p>
+              <p class="hero-benefits">Bis zu 6 Auracast™ Streams. Optional Dante/AoIP und PoE. 2× symmetrische Audio‑Eingänge.</p>
 
-            <div class="kpi" role="list">
-              <div role="listitem"><div class="label">Streams</div><div class="value">bis zu 6 parallel</div></div>
-              <div role="listitem"><div class="label">Funk</div><div class="value">2,4&nbsp;GHz · max. +10&nbsp;dBm</div></div>
-              <div role="listitem"><div class="label">Audio‑Inputs</div><div class="value">2× symm. XLR/TRS</div></div>
-              <div role="listitem"><div class="label">Strom</div><div class="value">PoE (802.3af) oder USB‑C 5&nbsp;V</div></div>
+              <div class="spec-tiles" role="list">
+                <div class="spec-tile" role="listitem">
+                  <div class="spec-icon">6</div>
+                  <div class="spec-body">
+                    <div class="spec-value">Bis zu 6 Auracast™ Streams</div>
+                    <div class="spec-label">Mehrsprachigkeit, Assistive Listening, Silent‑Events</div>
+                  </div>
+                </div>
+                <div class="spec-tile" role="listitem">
+                  <div class="spec-icon">RF</div>
+                  <div class="spec-body">
+                    <div class="spec-value">2,4&nbsp;GHz · bis +10&nbsp;dBm</div>
+                    <div class="spec-label">Funkverbindung im 2,4‑GHz‑Band</div>
+                  </div>
+                </div>
+                <div class="spec-tile" role="listitem">
+                  <div class="spec-icon">IN</div>
+                  <div class="spec-body">
+                    <div class="spec-value">2× symmetrisch (XLR/TRS Combo)</div>
+                    <div class="spec-label">Analoge Audio‑Eingänge, optional AoIP</div>
+                  </div>
+                </div>
+                <div class="spec-tile" role="listitem">
+                  <div class="spec-icon">DC</div>
+                  <div class="spec-body">
+                    <div class="spec-value">PoE (IEEE&nbsp;802.3af) oder USB‑C (5&nbsp;V)</div>
+                    <div class="spec-label">Flexible Stromversorgung im Installationsalltag</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="start-orientation">
+                <p>Diese Anleitung beschreibt Installation, Web‑UI und Betrieb des Summitwave Beacon.</p>
+                <p><strong>Für die erste Inbetriebnahme:</strong> Kapitel „Quick Start“.</p>
+                <p><strong>Für Installateure:</strong> Kapitel „Technische Daten“ und „Konformität &amp; CE“.</p>
+              </div>
+
+              <div class="cta-primary">
+                <a class="btn-primary" href="#quickstart">Quick Start</a>
+                <div class="cta-links">
+                  Weitere Kapitel:
+                  <br/><a href="#webui">Web‑UI Referenz</a>
+                  · <a href="#techdata">Technische Daten</a>
+                  · <a href="#konformitaet">CE‑Infos</a>
+                  · <a href="#troubleshooting">Fehlerbehebung</a>
+                </div>
+              </div>
             </div>
-
-            <div class="callout">
-              <strong>Quick‑Navigation:</strong>
-              <span class="pill"><a href="#quickstart">Quick Start</a></span>
-              <span class="pill"><a href="#webui">Web‑UI</a></span>
-              <span class="pill"><a href="#techdata">Technische Daten</a></span>
-              <span class="pill"><a href="#konformitaet">CE‑Infos</a></span>
-            </div>
-
-            <p class="foot">
-              Hersteller: Summitwave FlexCo · Hinterwaldnerstraße 16a · 6020 Innsbruck · Österreich ·
-              <span class="mono">info@summitwave.eu</span>
-            </p>
           </div>
 
-          <figure>
-            <img src="./beacon-front.jpg" alt="Screenshot des Web‑Interface: Auracast Audio Mode Control" style="width:100%; height:auto;"/>
-            <figcaption>Summitwave Beacon V1</figcaption>
-          </figure>
+          <div class="hero-visual">
+            <figure>
+              <img src="./beacon-front.jpg" alt="Summitwave Beacon – Produktansicht" style="width:100%; height:auto;"/>
+              <figcaption>Summitwave Beacon V1</figcaption>
+            </figure>
+          </div>
         </div>
       </section>
       <section id="dokumentkontrolle">
         <h2>0. Dokumentkontrolle</h2>
         <h3>0.1 Dokumenttitel, Produkt, Versionen</h3>
-        <p>Diese Anleitung beschreibt Installation, Konfiguration, Betrieb und Wartung des Produkts <strong>Summitwave Beacon</strong>. Die Inhalte beziehen sich auf die in der Kopfzeile genannte Hardware‑, Firmware‑ und UI‑Version.</p>
-        <p class="muted">Beispiel: „Summitwave Beacon – Betriebsanleitung, HW&nbsp;v1.x, FW&nbsp;v1.x, Web‑UI&nbsp;v1.x“.</p>
-
+        <p>Diese Anleitung beschreibt Installation, Konfiguration, Betrieb und Wartung des Produkts <strong>Summitwave Beacon</strong>.</p>
+        
         <h3>0.2 Änderungsverlauf</h3>
         <table aria-label="Änderungsverlauf">
           <thead>
             <tr><th>Version</th><th>Datum</th><th>Beschreibung</th></tr>
           </thead>
           <tbody>
-            <tr><td>1.0</td><td>12/2025</td><td>Erstveröffentlichung für Summitwave Beacon</td></tr>
+            <tr><td>1.0</td><td>13.12.2025</td><td>Erstveröffentlichung Beacon V1</td></tr>
           </tbody>
         </table>
 
         <h3>0.3 Gültigkeitsbereich</h3>
-        <p>Diese Anleitung gilt für alle Summitwave Beacon Geräte, für die das Dokument <span class="mono">„Summitwave Beacon – technische Informationen 12.25“</span> als Referenzdatenblatt angegeben ist.</p>
+        <p>Diese Anleitung gilt für alle Summitwave Beacon Geräte, für die das Dokument <span class="mono">„Summitwave Beacon – technische Informationen“</span> als Referenzdatenblatt angegeben ist.</p>
 
         <h3>0.4 Hersteller, Adresse, Kontakt</h3>
-        <p>Herstellerangaben werden aus dem offiziellen Datenblatt übernommen, z.&nbsp;B.:</p>
-        <p class="muted">Summitwave FlexCo · Hinterwaldnerstraße&nbsp;16a · 6020 Innsbruck · Österreich · <span class="mono">info@summitwave.eu</span></p>
+        <p>Summitwave FlexCo · Hinterwaldnerstraße&nbsp;16a · 6020 Innsbruck · Österreich · <span class="mono">info@summitwave.eu</span></p>
       </section>
 
       <section id="sicherheit">
@@ -401,12 +530,10 @@
         <p>Summitwave Beacon ist ein <strong>Mehrkanal‑Auracast™ Sender</strong> für professionelle Audio‑Installationen. Er ermöglicht bis zu sechs parallele Auracast‑Streams, die über ein Webinterface konfiguriert werden und wahlweise analoge oder AoIP‑Audioquellen nutzen.</p>
 
         <h3>1.4 Bestimmungsgemäße Verwendung</h3>
-        <p>Der Beacon ist zur drahtlosen Audioübertragung für z.&nbsp;B. <strong>Assistive Listening</strong>, Mehrsprachigkeit, Führungen und Silent‑Events in Innenräumen vorgesehen. Betrieb ausschließlich in zulässigen Ländern und gemäß den in dieser Anleitung beschriebenen Parametern.</p>
+        <p>Der Beacon ist zur drahtlosen Audioübertragung für z.&nbsp;B. <strong>Assistive Listening</strong>, Mehrsprachigkeit, Führungen und Silent‑Events vorgesehen. Betrieb ausschließlich in zulässigen Ländern und gemäß den in dieser Anleitung beschriebenen Parametern.</p>
 
         <h3>1.5 Nicht bestimmungsgemäße Verwendung</h3>
-        <div class="warn">
-          <p><strong>Achtung:</strong> Jede Verwendung außerhalb der beschriebenen Anwendungen (z.&nbsp;B. sicherheitskritische Kommunikation, Betrieb in explosionsgefährdeten Bereichen, Eigenumbauten) gilt als nicht bestimmungsgemäß und kann zu Personen‑ und Sachschäden führen.</p>
-        </div>
+        <p><strong>Achtung:</strong> Jede Verwendung außerhalb der beschriebenen Anwendungen (z.&nbsp;B. sicherheitskritische Kommunikation, Betrieb in explosionsgefährdeten Bereichen, Eigenumbauten) gilt als nicht bestimmungsgemäß und kann zu Personen‑ und Sachschäden führen.</p>
 
         <h3>2. Sicherheitshinweise</h3>
 
@@ -444,15 +571,15 @@
           </tbody>
         </table>
 
-        <h3>3.3 Normenübersicht (Beispiele)</h3>
-        <ul class="muted">
+        <h3>3.3 Normenübersicht</h3>
+        <ul>
           <li>EN&nbsp;62368‑1 (Sicherheit Audio/Video, IT‑Geräte)</li>
           <li>EN&nbsp;55032 / EN&nbsp;55035 (EMV‑Anforderungen)</li>
           <li>RoHS / REACH / WEEE (Umwelt- und Stoffbeschränkungen)</li>
         </ul>
 
         <h3>3.4 Entsorgung (WEEE)</h3>
-        <p>Das Produkt darf nicht über den Hausmüll entsorgt werden. Bitte die in Ihrem Land gültigen Rücknahme‑ und Recyclingsysteme für Elektro‑ und Elektronikgeräte nutzen.</p>
+        <p>Das Produkt darf nicht über den Hausmüll entsorgt werden. Bitte die in Ihrem Land gültigen Rücknahme‑ und Recyclingsysteme für Elektro‑ und Elektronikgeräte nutzen. Summitwave unterstützt einen möglichst geschlossenen Lebenszyklus („cradle to cradle“) und freut sich über die Rücksendung ausgedienter Geräte, die stets zur fachgerechten Verwertung angenommen werden.</p>
 
         <h3>3.5 Herstellerkennzeichnung &amp; Support</h3>
         <p>Typenschild und Herstellerangaben befinden sich auf der Geräterückseite. Für Support und Service steht der im Datenblatt genannte Kontakt zur Verfügung.</p>
@@ -466,10 +593,11 @@
           <li>Summitwave Beacon Gerät</li>
           <li>Schnellstart‑Hinweis / Verweis auf Online‑Anleitung</li>
           <li>Montagezubehör je nach Variante (z.&nbsp;B. Wand‑/Deckenhalter)</li>
+          <li>USB-C Netzteil</li>
         </ul>
 
         <h3>4.2 Gerätebeschreibung</h3>
-        <p>Der Beacon bietet bis zu <strong>6 parallele Auracast‑Streams</strong>, zwei symmetrische XLR/TRS‑Audioeingänge und ein Web‑GUI für Konfiguration und Monitoring. Optional können AoIP‑Quellen (Dante/AES67) eingebunden werden.</p>
+        <p>Der Beacon bietet bis zu <strong>6 parallele Auracast‑Streams</strong>, zwei symmetrische XLR/TRS‑Audioeingänge und ein Web‑GUI für Konfiguration und Monitoring. Zwei Ethernet‑Ports stehen zur Verfügung: Port&nbsp;1 für Konfiguration und Überwachung, Port&nbsp;2 für PoE‑Versorgung, AoIP (Dante/AES67) und Konfiguration.</p>
 
         <h3>4.3 Typische Anwendungen</h3>
         <p>Beispiele: Theater, Kirchen, Hochschulen, Museen, Konferenzräume, Silent‑Events.</p>
@@ -487,17 +615,17 @@
         <h3>5.1 Netzwerkports</h3>
         <p>
           - <strong>Port&nbsp;1 (RJ45):</strong> Konfiguration/Monitoring
-          <br/>- <strong>Port&nbsp;2 (RJ45):</strong> Konfiguration + Dante/AES67 (optional) + PoE‑Versorgung
+          <br/>- <strong>Port&nbsp;2 (RJ45):</strong> Konfiguration/Monitoring + Dante/AES67 + PoE‑Versorgung
         </p>
 
         <h3>5.2 Audioeingänge</h3>
-        <p>Zwei symmetrische XLR/TRS‑Kombibuchsen, schaltbar für Mic/Line gemäß Datenblatt. Typischer Nennpegel +4&nbsp;dBu.</p>
+        <p>Zwei symmetrische XLR/TRS‑Kombibuchsen, schaltbar für Line Pegel. Typischer Nennpegel +4&nbsp;dBu.</p>
 
         <h3>5.3 Stromversorgung</h3>
-        <p>Stromzufuhr primär über PoE an Port&nbsp;2. USB‑C 5&nbsp;V kann als Service‑ oder Backup‑Versorgung dienen.</p>
+        <p>Stromzufuhr über PoE an Port&nbsp;2 oder USB‑C 5&nbsp;V beide Spannungen können parallel angeschlossen werden und gegenseitig als Backup dienen. Der Verbrauch liegt unter 10Watt.</p>
 
         <h3>5.4 Mechanik &amp; Montagepunkte</h3>
-        <p>Montageoptionen (z.&nbsp;B. Wand/Decke, VESA/Bracket, 3/8"‑ und 1/4"‑Gewinde) werden in der finalen Version mit Skizzen aus dem Datenblatt dargestellt.</p>
+        <p>Montageoptionen (z.&nbsp;B. Wand/Decke, VESA/Bracket, 3/8"‑ und 1/4"‑Gewinde) stehen auf der Bodenplatte zur Verfügung.</p>
       </section>
 
       <section id="installation">
@@ -510,7 +638,7 @@
         <p>Wand‑, Decken‑ oder Truss‑Montage gemäß freigegebenem Zubehör. Kabelzugentlastung vorsehen, mechanische Spannungen auf Buchsen vermeiden.</p>
 
         <h3>6.3 Verkabelung</h3>
-        <p>Reihenfolgeempfehlung: Netzwerk/PoE verbinden → Audioeingänge anschließen → optional USB‑C Service → dann Gerät einschalten.</p>
+        <p>Reihenfolgeempfehlung: Audioeingänge anschließen → Netzwerk/PoE verbinden → optional USB‑C Service.</p>
 
         <h3>6.4 Erstinbetriebnahme‑Checkliste</h3>
         <ul>
@@ -525,10 +653,82 @@
         <h2>7. Netzwerk &amp; Zugriff auf das Webinterface</h2>
 
         <h3>7.1 IP‑Adressierung</h3>
-        <p>Je nach Netzwerkinfrastruktur per <strong>DHCP</strong>, statischer Adresse oder link‑local. Die gültige IP kann über einen IP‑Finder oder die Verwaltungsoberfläche des Switches ermittelt werden.</p>
+        <p>Der Beacon kann seine IP‑Adresse per <strong>DHCP</strong>, statischer Adresse oder als <strong>Link‑Local</strong> (169.254.x.x) beziehen. In der Praxis ist DHCP über einen Router oder einen PC mit gemeinsam genutzter Verbindung der einfachste Weg.</p>
+
+        <h4>7.1.1 DHCP über Router (Standardfall)</h4>
+        <p>Ein Router stellt automatisch DHCP bereit und vergibt dem Gerät eine IP‑Adresse.</p>
+        <ul>
+          <li>Gerät per LAN‑Kabel an einen LAN‑Port des Routers (oder an einen Switch, der am Router hängt) anschließen.</li>
+          <li>Router muss DHCP aktiviert haben (bei Heimroutern normalerweise Standard).</li>
+          <li>30–60&nbsp;Sekunden warten, bis die Adresse vergeben ist.</li>
+          <li>IP‑Adresse ermitteln über Router‑Weboberfläche (Clients / DHCP‑Leases / verbundene Geräte) oder einen IP‑Finder / Netzwerk‑Scanner.</li>
+        </ul>
+        <p class="muted">Hinweis: Ein „normaler“ Switch vergibt keine IP‑Adressen – DHCP kommt fast immer vom Router oder einem Server.</p>
+
+        <h4>7.1.2 DHCP über Windows‑PC</h4>
+        <p>Wenn kein Router vorhanden ist, kann ein Windows‑PC selbst DHCP bereitstellen – am einfachsten über die <strong>Internetverbindungsfreigabe (ICS)</strong>.</p>
+        <p><strong>Option A (empfohlen):</strong> ICS – Windows wird DHCP‑Server.</p>
+        <ul>
+          <li>Windows‑PC hat Internet über WLAN oder einen zweiten Netzwerkadapter.</li>
+          <li>Gerät per LAN‑Kabel an den Ethernet‑Port des Windows‑PC anschließen.</li>
+          <li>Unter Windows die Netzwerkverbindungen öffnen (z.&nbsp;B. Systemsteuerung → Netzwerk und Internet → Netzwerkverbindungen).</li>
+          <li>Rechtsklick auf die Internet‑Verbindung (meist WLAN) → Eigenschaften → Reiter „Freigabe“.</li>
+          <li>„Anderen Benutzern im Netzwerk gestatten, diese Verbindung zu verwenden“ aktivieren und als Heimnetzwerkverbindung den Ethernet‑Adapter wählen.</li>
+        </ul>
+        <p class="muted">Ergebnis (typisch): Windows setzt Ethernet auf 192.168.137.1, der Beacon erhält per DHCP eine Adresse 192.168.137.x.</p>
+        <p><strong>Option B:</strong> Netzwerkbrücke (nur wenn das vorhandene Netzwerk dies zulässt). DHCP wird dabei aus dem bestehenden Netz durchgereicht.</p>
+        <ul>
+          <li>In „Netzwerkverbindungen“ WLAN + Ethernet markieren.</li>
+          <li>Rechtsklick → „Verbindung überbrücken“.</li>
+        </ul>
+        <p class="muted">Wenn danach keine IP vergeben wird, besser Option A (ICS) verwenden.</p>
+
+        <h4>7.1.3 DHCP über Linux‑PC (z.&nbsp;B. Ubuntu)</h4>
+        <p>Unter Linux stellt der NetworkManager mit „<strong>Shared to other computers</strong>“ automatisch DHCP bereit.</p>
+        <p><strong>Option A (empfohlen):</strong> NetworkManager – „Shared to other computers“.</p>
+        <ul>
+          <li>Gerät per LAN‑Kabel an den Ethernet‑Port des Linux‑PC anschließen.</li>
+          <li>Netzwerkeinstellungen öffnen → „Kabelgebunden“ → (Zahnrad).</li>
+          <li>IPv4‑Methode auf „Gemeinsam nutzen“ / „Shared to other computers“ stellen.</li>
+          <li>Verbindung trennen und neu verbinden, kurz warten.</li>
+        </ul>
+        <p class="muted">Ergebnis (typisch): Der Linux‑PC wird Gateway (z.&nbsp;B. 10.42.0.1), der Beacon erhält per DHCP eine Adresse 10.42.0.x.</p>
+        <p><strong>Option B (advanced):</strong> eigener DHCP‑Server (z.&nbsp;B. dnsmasq). Nur für Setups mit speziellen Anforderungen nötig.</p>
+
+        <h4>7.1.4 Mini‑Fehlerbild</h4>
+        <ul>
+          <li><strong>Beacon hat 169.254.x.x (Link‑Local):</strong> Es ist kein DHCP erreichbar → Router/ICS/„Shared to other computers“ aktivieren.</li>
+          <li><strong>Keine IP auffindbar:</strong> Kabel und Link‑LEDs prüfen, anderes Kabel/Port testen, dann Router‑Clientliste oder IP‑Finder nutzen.</li>
+        </ul>
 
         <h3>7.2 Zugriff im Browser</h3>
-        <p>Aufruf über einen aktuellen Webbrowser via HTTP/HTTPS. Standard‑Login und Passwort sollten bei der ersten Inbetriebnahme geändert werden.</p>
+        <p>Die Konfiguration erfolgt über die integrierte Weboberfläche des Beacon.</p>
+        <h4>Voraussetzungen</h4>
+        <ul>
+          <li>Gerät ist im Netzwerk verbunden (siehe Abschnitt 7.1).</li>
+          <li>Aktueller Browser installiert (z.&nbsp;B. Chrome, Edge, Firefox, Safari).</li>
+        </ul>
+
+        <h4>Aufruf (Standard)</h4>
+        <p>Auf dem Typenschild des Beacon ist die Standard‑Adresse für den Zugriff vermerkt. Diese folgt dem Schema:</p>
+        <p><code>https://summitwave-beaconXX.local/</code></p>
+        <p>Dabei steht <strong>XX</strong> für die Seriennummer des Geräts (z.&nbsp;B. 19 → <code>https://summitwave-beacon19.local/</code>).</p>
+        <p class="muted">Hinweis: <code>.local</code> funktioniert in den meisten Netzwerken automatisch über mDNS/Bonjour. Falls der Name nicht aufgelöst wird, kann alternativ der Zugriff über die IP‑Adresse erfolgen (siehe unten).</p>
+
+        <h4>Aufruf über IP‑Adresse (Fallback)</h4>
+        <ul>
+          <li>IP‑Adresse des Geräts ermitteln (siehe Abschnitt 7.1).</li>
+          <li>Im Browser aufrufen: <code>http://&lt;IP‑Adresse&gt;</code> oder, falls verfügbar, <code>https://&lt;IP‑Adresse&gt;</code>.</li>
+        </ul>
+
+        <h4>Login</h4>
+        <p>Mit den Standard‑Zugangsdaten anmelden. Bei der ersten Inbetriebnahme sollte das Passwort unbedingt geändert werden, um unbefugten Zugriff zu vermeiden.</p>
+
+        <h4>Fehlersuche (kurz)</h4>
+        <ul>
+          <li><strong>Seite nicht erreichbar:</strong> Netzwerkverbindung und IP‑Adresse prüfen, sicherstellen, dass PC und Beacon im gleichen Netzwerk/Subnetz sind, Firewall/VPN/Proxy testweise deaktivieren.</li>
+          <li><strong><code>.local</code> klappt nicht:</strong> Zugriff über IP‑Adresse verwenden.</li>
+        </ul>
 
         <h3>7.3 Erreichbarkeit prüfen</h3>
         <p>Typische Schritte: Ping auf die IP‑Adresse, Aufruf der Web‑UI im Browser, Kontrolle der Link‑LEDs an den Netzwerkports.</p>
@@ -540,14 +740,61 @@
       <section id="quickstart">
         <h2>8. Quick Start (ca. 10 Minuten)</h2>
 
-        <h3>8.1 Erstes Radio konfigurieren</h3>
-        <p>Im Web‑UI ein Radio aktivieren, Namen (z.&nbsp;B. „Deutsch“), Sprache und Program Info vergeben.</p>
+        <p>Ziel: In kurzer Zeit prüfen, ob Broadcast, Empfang und Abdeckung funktionieren – zunächst im Demo‑Modus, anschließend mit echtem Audio.</p>
 
-        <h3>8.2 Audioquelle wählen</h3>
-        <p>Analogen Eingang (XLR/TRS) als Quelle wählen, Pegel so einstellen, dass keine Clip‑Anzeige im UI erscheint.</p>
+        <h3>8.1 Demo‑Modus aktivieren (1–2 Minuten)</h3>
+        <p>Der Demo‑Modus ist ideal für einen schnellen Funktionstest, ohne dass bereits eine Audioquelle eingerichtet sein muss.</p>
+        <ul>
+          <li>Web‑UI öffnen und anmelden.</li>
+          <li>Demo‑Modus aktivieren.</li>
+          <li>Anzahl der Kanäle/Streams wählen:
+            <br/>– 1 Kanal für den Schnelltest
+            <br/>– mehrere Kanäle, wenn direkt Mehrkanal‑/Sprachkanal‑Szenarien getestet werden sollen
+          </li>
+          <li>Einstellungen speichern/anwenden.</li>
+        </ul>
+        <p class="muted">Ergebnis: Der Beacon sendet testweise einen oder mehrere Streams, die Empfänger finden können.</p>
 
-        <h3>8.3 Test mit Empfänger</h3>
-        <p>Mit einem Auracast‑fähigen Endgerät den Stream suchen, verbinden und Lautstärke testen. Gegebenenfalls Delay/RTN nachregeln.</p>
+        <h3>8.2 Verbindung &amp; Abdeckung im Raum testen (3–5 Minuten)</h3>
+        <ul>
+          <li>Mit einem beliebigen Auracast‑fähigen Empfänger nach dem/den Stream(s) suchen.</li>
+          <li>Verbinden und Audio prüfen.</li>
+          <li>Die Empfangsfläche zu Fuß abgehen:
+            <br/>– Randbereiche prüfen
+            <br/>– „Schattenzonen“ erkennen (z.&nbsp;B. hinter Beton/Metall, um Ecken)
+          </li>
+          <li>Auffälligkeiten notieren (z.&nbsp;B. Stellen mit Aussetzern oder schlechter Qualität).</li>
+        </ul>
+        <p class="muted">Ergebnis: Es ist ersichtlich, ob die Funkabdeckung im Raum grundsätzlich passt – unabhängig von der Audioverkabelung.</p>
+
+        <h3>8.3 Audioeingänge konfigurieren (2–4 Minuten)</h3>
+        <p>Im nächsten Schritt wird die gewünschte Signalquelle eingerichtet – je nach Installation.</p>
+        <p><strong>Variante A: Analoge Eingänge (XLR/TRS)</strong></p>
+        <ul>
+          <li>Im Web‑UI als Quelle <strong>Analog In</strong> wählen.</li>
+          <li>Eingangssignal anlegen und Pegel/Gain einstellen:
+            <br/>– so hoch wie nötig, so niedrig wie möglich
+            <br/>– keine Clip‑Anzeige im UI
+          </li>
+        </ul>
+        <p><strong>Variante B: AoIP (Audio over IP)</strong></p>
+        <ul>
+          <li>Im Web‑UI als Quelle <strong>AoIP</strong> wählen.</li>
+          <li>Netzwerk‑/Stream‑Parameter gemäß Setup konfigurieren (Sender/Stream auswählen, Zuordnung zu Kanal/Radio festlegen).</li>
+          <li>Sicherstellen, dass Audio anliegt und Pegel plausibel sind.</li>
+        </ul>
+        <p class="muted">Ergebnis: Der Beacon sendet jetzt das echte Audiosignal (statt des Demo‑Signals).</p>
+
+        <h3>8.4 Finaler Test mit Empfänger &amp; echtem Audio (2–3 Minuten)</h3>
+        <ul>
+          <li>Empfänger erneut verbinden (ggf. neu verbinden, damit sicher der „echte“ Stream genutzt wird).</li>
+          <li>Testaudio/Live‑Signal abhören: Verständlichkeit, Verzerrung, Pegel.</li>
+          <li>Falls nötig nachregeln:
+            <br/>– Input‑Gain / Pegel
+            <br/>– Delay/RTN (wenn Timing/Synchronität relevant ist)
+          </li>
+        </ul>
+        <p class="muted">Ergebnis: Empfang, Abdeckung und echtes Audio sind geprüft und einsatzbereit.</p>
       </section>
 
       <section id="webui">
@@ -738,6 +985,12 @@
         <p>Kontakt‑ und Impressumsangaben werden konsistent mit Datenblatt und Website gehalten, z.&nbsp;B.:</p>
         <p class="muted">Summitwave FlexCo · Hinterwaldnerstraße&nbsp;16a · 6020 Innsbruck · Österreich · <span class="mono">info@summitwave.eu</span></p>
       </section>
+
+      <div class="doc-footer" aria-label="Dokumentinformationen">
+        <span><strong>Summitwave Beacon</strong> – Online‑Anleitung</span>
+        <span>Hersteller: Summitwave FlexCo · Hinterwaldnerstraße&nbsp;16a · 6020 Innsbruck · Österreich · <span class="mono">info@summitwave.eu</span></span>
+        <span>Dokumentversion: 1.0 · Stand: 13.12.2025</span>
+      </div>
     </article>
   </main>
 </body>