Add Bedienungsanleitung (user guide) and link from admin dashboard

- Static HTML guide at /bedienungsanleitung.html with DATACREW logo - Fixed image paths and anchor links for standalone hosting - Added "Hilfe" link in admin bar (opens guide in new tab) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-03 00:49:32 +01:00
parent 644da5b11f
commit 26ef0ec05f
3 changed files with 417 additions and 6 deletions
--- a/public/bedienungsanleitung.html
+++ b/public/bedienungsanleitung.html
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Bedienungsanleitung - Bürgerportal Weißkirchen an der Traun</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Inter', sans-serif;
+  background: #f5f5f5;
+  color: #333;
+  line-height: 1.7;
+}
+
+.header {
+  background: #0a0a0a;
+  padding: 20px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
+}
+
+.logo-area { display: flex; align-items: center; gap: 16px; }
+.logo-area img { height: 40px; }
+
+.header-badge {
+  background: #FCDC31;
+  color: #0a0a0a;
+  padding: 6px 18px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.hero {
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
+  padding: 80px 40px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: -50%; left: -50%;
+  width: 200%; height: 200%;
+  background: radial-gradient(circle at 30% 50%, rgba(252,220,49,0.08) 0%, transparent 50%);
+}
+
+.hero h1 { color: #fff; font-size: 42px; font-weight: 800; margin-bottom: 12px; position: relative; }
+.hero h1 span { color: #FCDC31; }
+.hero p { color: rgba(255,255,255,0.7); font-size: 18px; font-weight: 300; position: relative; }
+
+.hero .subtitle {
+  display: inline-block; margin-top: 20px;
+  background: rgba(252,220,49,0.15); border: 1px solid rgba(252,220,49,0.3);
+  color: #FCDC31; padding: 8px 24px; border-radius: 30px; font-size: 14px; font-weight: 500;
+}
+
+.container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
+
+.toc {
+  background: #fff; border-radius: 12px; padding: 32px; margin-bottom: 40px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-left: 4px solid #FCDC31;
+}
+.toc h2 { font-size: 20px; font-weight: 700; color: #0a0a0a; margin-bottom: 16px; }
+.toc ol { padding-left: 20px; }
+.toc ol li { padding: 6px 0; color: #555; font-size: 15px; }
+.toc ol li a { color: #0a0a0a; text-decoration: none; font-weight: 500; }
+.toc ol li a:hover { color: #FCDC31; }
+.toc ol ol { margin-top: 4px; }
+.toc ol ol li { font-size: 14px; }
+
+.section {
+  background: #fff; border-radius: 12px; padding: 40px; margin-bottom: 30px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+
+.section-number {
+  display: inline-block; background: #FCDC31; color: #0a0a0a; font-weight: 800; font-size: 14px;
+  width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 8px; margin-bottom: 12px;
+}
+
+.section h2 { font-size: 26px; font-weight: 800; color: #0a0a0a; margin-bottom: 20px; }
+.section h3 { font-size: 20px; font-weight: 700; color: #0a0a0a; margin-top: 28px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #FCDC31; display: inline-block; }
+.section h4 { font-size: 16px; font-weight: 600; color: #333; margin-top: 20px; margin-bottom: 10px; }
+.section p { margin-bottom: 14px; color: #444; font-size: 15px; }
+
+.step-box {
+  background: #fafafa; border: 1px solid #eee; border-radius: 10px;
+  padding: 24px; margin: 16px 0; position: relative; padding-left: 70px;
+}
+.step-box .step-num {
+  position: absolute; left: 20px; top: 24px; background: #0a0a0a; color: #FCDC31;
+  font-weight: 800; font-size: 18px; width: 36px; height: 36px; line-height: 36px;
+  text-align: center; border-radius: 50%;
+}
+.step-box h4 { margin-top: 0; font-size: 17px; font-weight: 700; color: #0a0a0a; }
+.step-box p { margin-bottom: 8px; font-size: 14px; }
+
+.info-box {
+  background: rgba(252,220,49,0.1); border: 1px solid rgba(252,220,49,0.3);
+  border-radius: 10px; padding: 18px 24px; margin: 16px 0; font-size: 14px; color: #333;
+}
+.info-box strong { color: #0a0a0a; }
+
+.warning-box {
+  background: rgba(220,53,69,0.06); border: 1px solid rgba(220,53,69,0.2);
+  border-radius: 10px; padding: 18px 24px; margin: 16px 0; font-size: 14px; color: #333;
+}
+
+.feature-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; }
+.feature-item:last-child { border-bottom: none; }
+.feature-icon {
+  background: #0a0a0a; color: #FCDC31; font-weight: 700; font-size: 12px;
+  min-width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 6px; flex-shrink: 0;
+}
+.feature-item .feature-text strong { display: block; color: #0a0a0a; font-size: 15px; margin-bottom: 2px; }
+.feature-item .feature-text span { color: #666; font-size: 14px; }
+
+.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
+.data-table th {
+  background: #0a0a0a; color: #FCDC31; padding: 12px 16px; text-align: left;
+  font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+.data-table td { padding: 10px 16px; border-bottom: 1px solid #eee; color: #444; }
+.data-table tr:hover td { background: #fafafa; }
+.data-table code { background: #f0f0f0; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #666; }
+
+.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
+.badge-green { background: #e6f9ee; color: #1a8a4a; }
+.badge-orange { background: #fff3e0; color: #e65100; }
+.badge-red { background: #fce4ec; color: #c62828; }
+
+.footer { background: #0a0a0a; padding: 40px; text-align: center; margin-top: 40px; }
+.footer img { height: 35px; margin-bottom: 12px; }
+.footer p { color: rgba(255,255,255,0.5); font-size: 13px; }
+.footer a { color: #FCDC31; text-decoration: none; }
+
+.section-divider { height: 3px; background: linear-gradient(to right, #FCDC31, transparent); border: none; margin: 0 0 30px 0; border-radius: 3px; }
+
+@media print { .header { position: relative; } .section { break-inside: avoid; } body { background: #fff; } }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="logo-area">
+    <img src="/datacrew-logo-ver3.svg" alt="DATACREW Logo">
+  </div>
+  <div class="header-badge">Dokumentation</div>
+</div>
+
+<div class="hero">
+  <h1>Bedienungsanleitung<br><span>Bürgerportal</span></h1>
+  <p>Gemeinde Weißkirchen an der Traun</p>
+  <div class="subtitle">Version 1.0 &nbsp;|&nbsp; März 2026</div>
+</div>
+
+<div class="container">
+
+  <div class="toc">
+    <h2>📑 Inhaltsverzeichnis</h2>
+    <ol>
+      <li><a href="#uebersicht">Übersicht</a></li>
+      <li><a href="#buerger">Bürger-Bereich</a>
+        <ol><li><a href="#pool">Pool-Befüllung anmelden</a></li><li><a href="#wasser">Wasserzähler melden</a></li></ol>
+      </li>
+      <li><a href="#admin">Mitarbeiter-Bereich (Admin)</a>
+        <ol><li><a href="#login">Anmeldung</a></li><li><a href="#dashboard">Dashboard-Übersicht</a></li><li><a href="#poolbuchungen">Pool-Buchungen</a></li><li><a href="#wasserzaehler">Wasserzähler</a></li><li><a href="#einstellungen">Einstellungen</a></li></ol>
+      </li>
+      <li><a href="#kontakt">Kontakt &amp; Support</a></li>
+    </ol>
+  </div>
+
+  <div class="section" id="uebersicht">
+    <div class="section-number">1</div>
+    <h2>Übersicht</h2>
+    <p>Das <strong>Bürgerportal der Gemeinde Weißkirchen an der Traun</strong> dient zur Koordinierung großer Wasserentnahmen, damit die Versorgung für alle Bürgerinnen und Bürger gesichert bleibt.</p>
+    <p>Das Portal besteht aus zwei Hauptbereichen:</p>
+    <div class="feature-item"><div class="feature-icon">🏊</div><div class="feature-text"><strong>Pool-Befüllung anmelden</strong><span>Bürger können online einen Wunschtermin für die Pool-Befüllung reservieren.</span></div></div>
+    <div class="feature-item"><div class="feature-icon">💧</div><div class="feature-text"><strong>Wasserzähler melden</strong><span>Über einen persönlichen QR-Code kann der aktuelle Wasserzählerstand gemeldet werden.</span></div></div>
+    <div class="feature-item"><div class="feature-icon">⚙️</div><div class="feature-text"><strong>Mitarbeiter-Zugang (Admin)</strong><span>Verwaltungsbereich für Gemeindemitarbeiter zur Verwaltung aller Buchungen und Zähler.</span></div></div>
+    <p>Die Startseite des Portals zeigt die beiden Bürgerdienste sowie unten den Link „Mitarbeiter-Zugang".</p>
+  </div>
+
+  <hr class="section-divider">
+
+  <div class="section" id="buerger">
+    <div class="section-number">2</div>
+    <h2>Bürger-Bereich</h2>
+
+    <h3 id="pool">2.1 Pool-Befüllung anmelden</h3>
+    <p>Über diese Funktion können Bürger einen Termin zur Pool-Befüllung reservieren. Der Vorgang ist in <strong>drei einfache Schritte</strong> gegliedert.</p>
+
+    <div class="step-box"><div class="step-num">1</div><h4>Termin wählen</h4>
+      <p>Ein Kalender zeigt den aktuellen Monat an. Die <strong>Saison</strong> läuft vom 15. März bis 30. Juni. Oben wird die Anzahl der verfügbaren Tage im Monat angezeigt.</p>
+      <p>Die Tage sind farblich markiert: <span class="badge badge-green">Frei</span> <span class="badge badge-orange">Fast voll</span> <span class="badge badge-red">Voll</span></p>
+      <p>Mit den Pfeilen neben dem Monatsnamen wechselt man zwischen Monaten. Nach Auswahl eines Tages erscheint eine Bestätigung. Danach klickt man auf <strong>„Weiter"</strong>.</p>
+    </div>
+
+    <div class="step-box"><div class="step-num">2</div><h4>Daten eingeben</h4>
+      <p>Hier werden die persönlichen Daten eingegeben. Der gewählte Termin kann über <strong>„Ändern"</strong> angepasst werden.</p>
+      <table class="data-table">
+        <tbody><tr><th>Feld</th><th>Pflicht</th><th>Beschreibung</th></tr>
+        <tr><td>Name</td><td>Ja</td><td>Vor- und Nachname</td></tr>
+        <tr><td>Straße &amp; Hausnummer</td><td>Nein</td><td>Wohnadresse</td></tr>
+        <tr><td>Telefon</td><td>Ja</td><td>Telefonnummer für Rückfragen</td></tr>
+        <tr><td>E-Mail</td><td>Ja</td><td>E-Mail-Adresse</td></tr>
+        <tr><td>Wasserquelle</td><td>Ja</td><td>„Eigener Brunnen" oder „Ortswasserleitung"</td></tr>
+      </tbody></table>
+      <p>Vor dem Absenden muss ein <strong>Cloudflare-Captcha</strong> bestätigt werden.</p>
+    </div>
+
+    <div class="step-box"><div class="step-num">3</div><h4>Fertig</h4>
+      <p>Nach dem Klick auf <strong>„Anmeldung absenden"</strong> wird die Buchung bestätigt.</p>
+    </div>
+
+    <h3 id="wasser">2.2 Wasserzähler melden</h3>
+    <p>Diese Funktion ermöglicht es Bürgern, ihren aktuellen Wasserzählerstand online zu melden.</p>
+    <div class="warning-box">⚠️ <strong>Wichtig:</strong> Der Zugang erfolgt ausschließlich über einen <strong>persönlichen QR-Code</strong> auf dem Ableseblatt. Ohne gültigen QR-Code erscheint „Ungültiger Zugang".</div>
+  </div>
+
+  <hr class="section-divider">
+
+  <div class="section" id="admin">
+    <div class="section-number">3</div>
+    <h2>Mitarbeiter-Bereich (Admin-Dashboard)</h2>
+
+    <h3 id="login">3.1 Anmeldung</h3>
+    <p>Auf der Startseite befindet sich unten der Link <strong>„Mitarbeiter-Zugang"</strong>. Die Anmeldung erfolgt mit E-Mail und Passwort.</p>
+    <div class="info-box">💡 Oben links wird <strong>ADMIN</strong> angezeigt, oben rechts der Link <strong>„Abmelden"</strong> zum Ausloggen.</div>
+
+    <h3 id="dashboard">3.2 Dashboard-Übersicht</h3>
+    <p>Oben werden drei <strong>Kennzahlen-Kacheln</strong> angezeigt:</p>
+    <table class="data-table">
+      <tbody><tr><th>Kachel</th><th>Bedeutung</th></tr>
+      <tr><td><strong>Heute</strong></td><td>Anzahl der Pool-Buchungen für heute</td></tr>
+      <tr><td><strong>m³ heute</strong></td><td>Kubikmeter Wasserverbrauch heute</td></tr>
+      <tr><td><strong>Gesamt aktiv</strong></td><td>Gesamtzahl aller aktiven Buchungen</td></tr>
+    </tbody></table>
+
+    <h3 id="poolbuchungen">3.3 Tab: Pool-Buchungen</h3>
+    <p>Zeigt alle Pool-Befüllungs-Anmeldungen in einer Tabelle.</p>
+
+    <h4>Tabellenspalten</h4>
+    <table class="data-table">
+      <tbody><tr><th>Spalte</th><th>Beschreibung</th></tr>
+      <tr><td>Datum</td><td>Gewünschter Befüllungstermin</td></tr>
+      <tr><td>Name</td><td>Name des Antragstellers</td></tr>
+      <tr><td>Straße</td><td>Adresse</td></tr>
+      <tr><td>Telefon</td><td>Telefonnummer (klickbar)</td></tr>
+      <tr><td>E-Mail</td><td>E-Mail-Adresse</td></tr>
+      <tr><td>Quelle</td><td>„Brunnen" oder „Leitung"</td></tr>
+      <tr><td>M³</td><td>Wasserverbrauch in Kubikmetern</td></tr>
+      <tr><td>Status</td><td><span class="badge badge-green">aktiv</span> <span class="badge badge-orange">storniert</span> <span class="badge badge-green">erledigt</span></td></tr>
+      <tr><td>Aktion</td><td>„Stornieren"-Button</td></tr>
+    </tbody></table>
+
+    <h4>Verfügbare Funktionen</h4>
+    <div class="feature-item"><div class="feature-icon">+</div><div class="feature-text"><strong>Manuell eintragen</strong><span>Dialogfenster für telefonische Anmeldungen. Felder: Name*, Straße*, Telefon*, E-Mail (optional), Wunschtermin*, Wasserquelle.</span></div></div>
+    <div class="feature-item"><div class="feature-icon">📅</div><div class="feature-text"><strong>Datumsfilter</strong><span>Filtert die Tabelle nach einem bestimmten Datum (tt.mm.jjjj).</span></div></div>
+    <div class="feature-item"><div class="feature-icon">🔽</div><div class="feature-text"><strong>Statusfilter</strong><span>Dropdown: „Alle Status", „Aktiv", „Storniert", „Erledigt".</span></div></div>
+    <div class="feature-item"><div class="feature-icon">📊</div><div class="feature-text"><strong>CSV Export</strong><span>Exportiert Buchungsdaten als CSV-Datei.</span></div></div>
+    <div class="feature-item"><div class="feature-icon">✕</div><div class="feature-text"><strong>Stornieren</strong><span>Roter Link in der Aktions-Spalte zum Stornieren einer Buchung.</span></div></div>
+
+    <h3 id="wasserzaehler">3.4 Tab: Wasserzähler</h3>
+    <p>Übersicht aller registrierten Wasserzähler-Haushalte.</p>
+    <table class="data-table">
+      <tbody><tr><th>Spalte</th><th>Beschreibung</th></tr>
+      <tr><td>Haushalt</td><td>Name des Haushalts</td></tr>
+      <tr><td>Adresse</td><td>Adresse</td></tr>
+      <tr><td>Zählernr.</td><td>Wasserzähler-Nummer</td></tr>
+      <tr><td>Alter Stand</td><td>Letzter Zählerstand (m³)</td></tr>
+      <tr><td>Neuer Stand</td><td>Aktuell gemeldeter Stand (m³)</td></tr>
+      <tr><td>Verbrauch</td><td>Differenz in m³</td></tr>
+      <tr><td>Ablesedatum</td><td>Datum der letzten Ablesung</td></tr>
+      <tr><td>Token</td><td>QR-Code-Schlüssel</td></tr>
+    </tbody></table>
+    <div class="info-box">💡 Nach Meldung durch den Bürger erscheinen automatisch Werte in „Neuer Stand", „Verbrauch" und „Ablesedatum". Auch hier: <strong>CSV Export</strong> verfügbar.</div>
+
+    <h3 id="einstellungen">3.5 Tab: Einstellungen</h3>
+    <p>Grundlegende Portal-Parameter konfigurieren.</p>
+    <div class="warning-box">⚠️ <strong>Automatisches Speichern:</strong> Änderungen werden beim Verlassen des Feldes gespeichert – kein separater Speichern-Button.</div>
+    <table class="data-table">
+      <tbody><tr><th>Einstellung</th><th>Schlüssel</th><th>Beschreibung</th></tr>
+      <tr><td>Adresse des Gemeindeamts</td><td><code>gemeinde_adresse</code></td><td>Postadresse</td></tr>
+      <tr><td>E-Mail der Gemeinde</td><td><code>gemeinde_email</code></td><td>Kontakt-E-Mail</td></tr>
+      <tr><td>Name der Gemeinde</td><td><code>gemeinde_name</code></td><td>Angezeigter Name</td></tr>
+      <tr><td>Telefon der Gemeinde</td><td><code>gemeinde_telefon</code></td><td>Telefonnummer</td></tr>
+      <tr><td>Max. Pool-Befüllungen/Tag</td><td><code>max_pools_per_day</code></td><td>Bestimmt Verfügbarkeitsanzeige</td></tr>
+      <tr><td>Saisonende</td><td><code>saison_ende</code></td><td>Format MM-DD (z.B. 06-30)</td></tr>
+      <tr><td>Saisonstart</td><td><code>saison_start</code></td><td>Format MM-DD (z.B. 03-15)</td></tr>
+    </tbody></table>
+  </div>
+
+  <hr class="section-divider">
+
+  <div class="section" id="kontakt">
+    <div class="section-number">4</div>
+    <h2>Kontakt &amp; Support</h2>
+    <p>Bei Fragen oder technischen Problemen:</p>
+    <div style="background:#fafafa;border-radius:10px;padding:24px;margin-top:16px;display:flex;gap:40px;flex-wrap:wrap;">
+      <div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Gemeindeamt Weißkirchen an der Traun</strong><span style="color:#666;font-size:14px;">Gemeindeplatz 1, 4616 Weißkirchen</span></div>
+      <div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Telefon</strong><span style="color:#666;font-size:14px;">+43 7243 50600</span></div>
+      <div><strong style="color:#0a0a0a;display:block;margin-bottom:4px;">E-Mail</strong><span style="color:#666;font-size:14px;">gemeinde@weisskirchen.ooe.gv.at</span></div>
+    </div>
+    <div style="background:#fafafa;border-radius:10px;padding:24px;margin-top:12px;">
+      <strong style="color:#0a0a0a;display:block;margin-bottom:4px;">Technischer Support</strong>
+      <span style="color:#666;font-size:14px;">DATACREW GmbH | office@datacrew.at | +43 664 8352533</span>
+    </div>
+  </div>
+
+</div>
+
+<div class="footer">
+  <img src="/datacrew-logo-ver3.svg" alt="DATACREW Logo">
+  <p>Erstellt von <a href="https://datacrew.at/">DATACREW GmbH</a> &nbsp;|&nbsp; support &amp; solutions</p>
+  <p style="margin-top:6px;">© 2026 Alle Rechte vorbehalten</p>
+</div>
+
+</body></html>
--- a/public/datacrew-logo-ver3.svg
+++ b/public/datacrew-logo-ver3.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 479.5 131">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1d1d1b;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #000;
+      }
+
+      .cls-3 {
+        fill: #fff002;
+      }
+
+      .cls-4 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M397.6,72.5V18.3c0-4.2,1.6-8.2,4.6-11.2.2-.2.5-.4.7-.6H12.5c-5.5,0-10,4.5-10,10v57.9c0,5.5,4.5,10,10,10h390.5c-.2-.2-.5-.4-.7-.6-3-3-4.6-7-4.6-11.2Z"/>
+  <g>
+    <path class="cls-4" d="M20.3,21.8h18.6c14.8,0,25,9.4,25,23.6s-10.3,23.5-25,23.5h-18.6V21.8ZM38.9,60.1c9.3,0,14.8-6.7,14.8-14.7s-5.1-14.8-14.8-14.8h-8.6v29.5h8.6Z"/>
+    <path class="cls-4" d="M98.7,60.8h-21.1l-3,8.1h-11l18.2-47.2h12.6l18.2,47.2h-11l-3-8.1ZM80.4,52.1h15.6l-7.8-21.6-7.8,21.6Z"/>
+    <path class="cls-4" d="M123.4,30.6h-13.8v-8.8h37.6v8.8h-13.7v38.3h-10.1V30.6Z"/>
+    <path class="cls-4" d="M179.2,60.8h-21.1l-3,8.1h-11l18.2-47.2h12.6l18.2,47.2h-11l-3-8.1ZM160.8,52.1h15.6l-7.8-21.6-7.8,21.6Z"/>
+    <path class="cls-3" d="M196.5,45.4c0-14.5,10.7-24.4,24-24.4s14.4,4,18.1,9.3l-4.9,2.8c-2.7-4-7.6-6.9-13.2-6.9-10.1,0-18,7.9-18,19.2s7.8,19.2,18,19.2,10.5-2.8,13.2-6.9l5,2.8c-4,5.4-9.6,9.3-18.2,9.3-13.4,0-24-9.9-24-24.4Z"/>
+    <path class="cls-3" d="M261.5,50.2h-9.4v18.7h-5.9V21.8h19c8.6,0,14.8,5.5,14.8,14.2s-5.8,13.2-12.2,13.7l12.7,19.2h-6.9l-12-18.7ZM264.4,27h-12.4v18h12.4c5.6,0,9.4-3.7,9.4-9.1s-3.8-9-9.4-9Z"/>
+    <path class="cls-3" d="M289.2,21.8h30.9v5.2h-25v15.2h24.5v5.2h-24.5v16.3h25v5.2h-30.9V21.8Z"/>
+    <path class="cls-3" d="M355.1,30.9l-10.4,38h-6.4l-13.4-47.2h6.5l10.5,39.3,10.8-39.3h4.9l10.8,39.3,10.4-39.3h6.5l-13.4,47.2h-6.4l-10.4-38Z"/>
+  </g>
+  <g id="black_white" data-name="black / white">
+    <path class="cls-2" d="M477,72.5c0,3-1.2,6.1-3.5,8.4s-5.3,3.5-8.4,3.5h-51.7c-3,0-6.1-1.2-8.4-3.5-2.3-2.3-3.5-5.3-3.5-8.4V18.3c0-3,1.2-6.1,3.5-8.4,2.3-2.3,5.3-3.5,8.4-3.5h51.7c3,0,6.1,1.2,8.4,3.5,2.3,2.3,3.5,5.3,3.5,8.4v54.1Z"/>
+    <g>
+      <path class="cls-4" d="M418.5,73.6h10.1v-17.3l2.3-4.3v-16.1c0-.8-.3-1.6-.9-2.3-.6-.6-1.4-.9-2.3-.9h-6c-.8,0-1.6.3-2.3.9-.6.6-.9,1.4-.9,2.3v37.8Z"/>
+      <path class="cls-4" d="M424.7,28.8c4.1,0,6.6-2.8,6.6-6.2,0-3.5-2.5-6.2-6.5-6.2s-6.6,2.7-6.6,6.2,2.5,6.2,6.4,6.2h0Z"/>
+      <path class="cls-4" d="M463.6,38.3v4.5h-8.9v14.4c0,4.8,1.2,7,4.9,7s3.7,0,3.7,0v9.5s-1.6.7-7.9.7-7.3-1.4-9.4-3.4c-2.3-2.4-3.4-6.2-3.4-11.8v-16.3h-5.3v-4.5h26.3Z"/>
+      <rect class="cls-4" x="449.8" y="36.9" width="8.5" height="1.4"/>
+      <rect class="cls-4" x="439.2" y="35.3" width="8" height="1.6" transform="translate(3.1 99.8) rotate(-12.9)"/>
+      <path class="cls-4" d="M452.8,30.9c-1.1-1.6,0-4.7,1-5.4.9.2,1.5,1.5,1.2,3-.3,1.5-1.3,2.5-2.2,2.4Z"/>
+      <path class="cls-4" d="M453,16.5c.7.1,1.3.5,1.8,1.1.4.6.6,1.4.5,2.1l-2.1,12.1c-.1.7-.5,1.3-1.1,1.8-.6.4-1.4.6-2.1.5l-2.5-.4,3.1-17.5,2.5.4Z"/>
+      <path class="cls-4" d="M456.8,37.7h-1.4v-6.8c0-1.7-.6-1.8-1.4-1.8v-1.4c1.8,0,2.8,1.1,2.8,3.2v6.8Z"/>
+    </g>
+  </g>
+  <g>
+    <path class="cls-1" d="M20.3,117.6c1.2,1.6,3.3,2.9,6.1,2.9s5.7-1.9,5.7-4.5-2.9-3.6-5.8-4.4c-3.2-.8-6.6-1.7-6.6-5.2s2.4-5.1,6.6-5.1,5.4,1.3,6.6,2.9l-.9.8c-1.1-1.6-3.2-2.6-5.8-2.6s-5.4,1.8-5.4,4,2.7,3.2,5.5,3.9c3.3.8,6.9,1.8,6.9,5.7s-2.2,5.6-6.9,5.6-5.2-.9-7.1-3.1l1-.9Z"/>
+    <path class="cls-1" d="M58.8,121.1v-3c-1.6,1.8-4.3,3.4-7,3.4-3.8,0-6-1.7-6-6.2v-13.5h1.2v13.5c0,4,2,5.2,5,5.2s5.5-1.6,6.8-3.5v-15.2h1.2v19.3h-1.2Z"/>
+    <path class="cls-1" d="M74.6,128.4h-1.2v-26.7h1.2v3.2c1.3-2,3.9-3.7,7-3.7,5.2,0,8.6,4,8.6,10.1s-3.4,10.2-8.6,10.2-5.4-1.5-7-3.8v10.7ZM81.6,102.4c-3,0-5.8,1.8-7,3.8v10.4c1.2,2,4,3.9,7,3.9,4.7,0,7.3-4,7.3-9.1s-2.6-9-7.3-9Z"/>
+    <path class="cls-1" d="M103.8,128.4h-1.2v-26.7h1.2v3.2c1.3-2,3.9-3.7,7-3.7,5.2,0,8.6,4,8.6,10.1s-3.4,10.2-8.6,10.2-5.4-1.5-7-3.8v10.7ZM110.8,102.4c-3,0-5.8,1.8-7,3.8v10.4c1.2,2,4,3.9,7,3.9,4.7,0,7.3-4,7.3-9.1s-2.6-9-7.3-9Z"/>
+    <path class="cls-1" d="M130.8,111.4c0-5.7,3.6-10.1,9-10.1s9,4.4,9,10.1-3.5,10.2-9,10.2-9-4.5-9-10.2ZM147.5,111.4c0-4.7-2.7-9-7.7-9s-7.7,4.4-7.7,9,2.8,9.1,7.7,9.1,7.7-4.4,7.7-9.1Z"/>
+    <path class="cls-1" d="M161.2,121.1v-19.3h1.2v3.5c1.7-2.3,3.8-3.9,6.6-3.9v1.4c-.4,0-.6,0-1,0-2,0-4.8,2-5.7,3.8v14.5h-1.2Z"/>
+    <path class="cls-1" d="M180.2,117.7v-14.8h-3.2v-1.1h3.2v-5.3h1.2v5.3h3.9v1.1h-3.9v14.8c0,1.6.6,2.8,2.1,2.8s1.8-.5,2.3-1l.7.9c-.8.7-1.6,1.2-3,1.2-2.2,0-3.3-1.5-3.3-3.9Z"/>
+    <path class="cls-1" d="M231.9,121.1c-1-.9-2.4-2.2-3.8-3.6-1.8,2.3-4.4,4.1-8,4.1s-7.8-2.4-7.8-7.2,2.9-6.4,6-8.2c-1.4-2.1-2.3-4.2-2.3-6.2,0-3.5,2.7-6,6-6s5.2,1.7,5.2,4.9-3.6,5.8-7,7.7c1.3,1.8,2.7,3.4,3.8,4.6,1.4,1.6,2.7,2.9,4,4.2,1.7-2.6,2.8-5.5,3.2-6.8l1.3.5c-.8,2.1-1.8,4.9-3.4,7.3,1.5,1.5,3.2,3,5.1,4.7h-2.1ZM227.1,116.5c-1.8-1.8-3.4-3.5-4.2-4.5-1.3-1.5-2.7-3.1-3.9-4.8-2.8,1.7-5.3,3.6-5.3,7.2s3.1,6,6.4,6,5.3-1.7,7-3.8ZM219.4,105.5c3.2-1.7,6.3-3.3,6.3-6.6s-1.6-3.7-3.8-3.7-4.6,2-4.6,4.8.9,3.7,2.1,5.5Z"/>
+    <path class="cls-1" d="M262.1,117.6c1.2,1.6,3.3,2.9,6.1,2.9s5.7-1.9,5.7-4.5-2.9-3.6-5.8-4.4c-3.2-.8-6.6-1.7-6.6-5.2s2.4-5.1,6.6-5.1,5.4,1.3,6.6,2.9l-.9.8c-1.1-1.6-3.2-2.6-5.8-2.6s-5.4,1.8-5.4,4,2.7,3.2,5.5,3.9c3.3.8,6.9,1.8,6.9,5.7s-2.2,5.6-6.9,5.6-5.2-.9-7.1-3.1l1-.9Z"/>
+    <path class="cls-1" d="M286.5,111.4c0-5.7,3.6-10.1,9-10.1s9,4.4,9,10.1-3.5,10.2-9,10.2-9-4.5-9-10.2ZM303.2,111.4c0-4.7-2.7-9-7.7-9s-7.7,4.4-7.7,9,2.8,9.1,7.7,9.1,7.7-4.4,7.7-9.1Z"/>
+    <path class="cls-1" d="M316.9,121.1v-26.7h1.2v26.7h-1.2Z"/>
+    <path class="cls-1" d="M344.6,121.1v-3c-1.6,1.8-4.3,3.4-7,3.4-3.8,0-6-1.7-6-6.2v-13.5h1.2v13.5c0,4,2,5.2,5,5.2s5.5-1.6,6.8-3.5v-15.2h1.2v19.3h-1.2Z"/>
+    <path class="cls-1" d="M359.5,117.7v-14.8h-3.2v-1.1h3.2v-5.3h1.2v5.3h3.9v1.1h-3.9v14.8c0,1.6.6,2.8,2.1,2.8s1.8-.5,2.3-1l.7.9c-.8.7-1.6,1.2-3,1.2-2.2,0-3.3-1.5-3.3-3.9Z"/>
+    <path class="cls-1" d="M375.6,97.3c0-.6.6-1.2,1.2-1.2s1.2.5,1.2,1.2-.5,1.2-1.2,1.2-1.2-.5-1.2-1.2ZM376.1,121.1v-19.3h1.2v19.3h-1.2Z"/>
+    <path class="cls-1" d="M389.8,111.4c0-5.7,3.6-10.1,9-10.1s9,4.4,9,10.1-3.5,10.2-9,10.2-9-4.5-9-10.2ZM406.4,111.4c0-4.7-2.7-9-7.7-9s-7.7,4.4-7.7,9,2.8,9.1,7.7,9.1,7.7-4.4,7.7-9.1Z"/>
+    <path class="cls-1" d="M433.2,121.1v-13.5c0-4-2-5.2-5-5.2s-5.5,1.7-6.8,3.6v15.1h-1.2v-19.3h1.2v3c1.4-1.8,4.3-3.5,7-3.5,3.8,0,6,1.8,6,6.3v13.5h-1.2Z"/>
+    <path class="cls-1" d="M447.2,117.6c1.2,1.6,3.3,2.9,6.1,2.9s5.7-1.9,5.7-4.5-2.9-3.6-5.8-4.4c-3.2-.8-6.6-1.7-6.6-5.2s2.4-5.1,6.6-5.1,5.4,1.3,6.6,2.9l-.9.8c-1.1-1.6-3.2-2.6-5.8-2.6s-5.4,1.8-5.4,4,2.7,3.2,5.5,3.9c3.3.8,6.9,1.8,6.9,5.7s-2.2,5.6-6.9,5.6-5.2-.9-7.1-3.1l1-.9Z"/>
+  </g>
+</svg>