Files
HiveGrid-Marketing/webinar/slides/Praesentation.html
T
dejanandClaude Opus 5.5 686ee36b4f HiveGrid Marketing: Hub mit Strategie, Redaktionsplan, Dashboard, Produktionsvorgaben und Webinar
Stand 16.10.2026. Enthält das Marketing-Dashboard, die Daten in daten/,
die Produktionsvorgaben, Reels und das Webinar mit Skript, Sprechzettel
und Präsentation (HTML, PowerPoint, PDF).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-16 18:09:07 +02:00

1020 lines
123 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HiveGrid Webinar</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400;500;600&display=swap">
<style>
body { margin: 0; background: #3A3A40; font-family: 'Mona Sans', Arial, sans-serif; }
.kopf { color: #E5E5E5; padding: 16px 24px; font-size: 14px; }
.folie { max-width: 1440px; margin: 0 auto 32px; padding: 0 16px; }
.rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #FAFAFA; }
.rahmen > section { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
transform-origin: 0 0; box-sizing: border-box; overflow: hidden; }
section * { margin: 0; box-sizing: border-box; }
section h1 { font-size: 96px; font-weight: 600; line-height: 1.1; }
section h2 { font-size: 64px; font-weight: 600; line-height: 1.15; }
section h3 { font-size: 44px; font-weight: 600; line-height: 1.2; }
section p { font-size: 32px; line-height: 1.4; }
section img, section svg { display: block; flex: none; }
section aside { display: none; }
.notiz { color: #C8C8CC; font-size: 14px; line-height: 1.5; margin: 8px 0 0; white-space: pre-line; }
body.zeigen { background: #000; overflow: hidden; }
body.zeigen .kopf, body.zeigen .notiz { display: none; }
body.zeigen .folie { display: none; max-width: none; margin: 0; padding: 0; }
body.zeigen .folie.aktiv { display: flex; align-items: center; height: 100vh; }
body.zeigen .rahmen { width: min(100vw, 177.78vh); margin: 0 auto; }
body.zeigen .folie.wechsel { position: fixed; inset: 0; display: flex; align-items: center; }
</style></head><body>
<p class="kopf">HiveGrid Webinar, 30 Slides. Lokale Ansicht, gebaut aus quelle/.
Taste P: Präsentieren, Pfeiltasten: weiter und zurück, Esc: zurück zur Übersicht.</p>
<div class="folie" id="f1" data-sid="cover"><div class="rahmen"><section id="cover" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:space-between;gap:48px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 1080" width="760" height="1080" style="position:absolute;left:1160px;top:0px;width:760px;height:1080px"><polygon points="692.8,105.0 731.8,127.5 731.8,172.5 692.8,195.0 653.8,172.5 653.8,127.5" fill="#FFFFFF" fill-opacity="0.08" stroke="#D6D6D9" stroke-opacity="0.08" stroke-width="1.5"/><polygon points="779.4,105.0 818.4,127.5 818.4,172.5 779.4,195.0 740.5,172.5 740.5,127.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="389.7,180.0 428.7,202.5 428.7,247.5 389.7,270.0 350.7,247.5 350.7,202.5" fill="#FFFFFF" fill-opacity="0.08" stroke="#D6D6D9" stroke-opacity="0.08" stroke-width="1.5"/><polygon points="476.3,180.0 515.3,202.5 515.3,247.5 476.3,270.0 437.3,247.5 437.3,202.5" fill="#FFFFFF" fill-opacity="0.17" stroke="#D6D6D9" stroke-opacity="0.17" stroke-width="1.5"/><polygon points="562.9,180.0 601.9,202.5 601.9,247.5 562.9,270.0 523.9,247.5 523.9,202.5" fill="#FFFFFF" fill-opacity="0.24" stroke="#D6D6D9" stroke-opacity="0.24" stroke-width="1.5"/><polygon points="649.5,180.0 688.5,202.5 688.5,247.5 649.5,270.0 610.5,247.5 610.5,202.5" fill="#FFFFFF" fill-opacity="0.29" stroke="#D6D6D9" stroke-opacity="0.29" stroke-width="1.5"/><polygon points="736.1,180.0 775.1,202.5 775.1,247.5 736.1,270.0 697.2,247.5 697.2,202.5" fill="#FFFFFF" fill-opacity="0.32" stroke="#D6D6D9" stroke-opacity="0.32" stroke-width="1.5"/><polygon points="822.7,180.0 861.7,202.5 861.7,247.5 822.7,270.0 783.8,247.5 783.8,202.5" fill="#FFFFFF" fill-opacity="0.32" stroke="#D6D6D9" stroke-opacity="0.32" stroke-width="1.5"/><polygon points="259.8,255.0 298.8,277.5 298.8,322.5 259.8,345.0 220.8,322.5 220.8,277.5" fill="#FFFFFF" fill-opacity="0.07" stroke="#D6D6D9" stroke-opacity="0.07" stroke-width="1.5"/><polygon points="346.4,255.0 385.4,277.5 385.4,322.5 346.4,345.0 307.4,322.5 307.4,277.5" fill="#FFFFFF" fill-opacity="0.19" stroke="#D6D6D9" stroke-opacity="0.19" stroke-width="1.5"/><polygon points="433.0,255.0 472.0,277.5 472.0,322.5 433.0,345.0 394.0,322.5 394.0,277.5" fill="#FFFFFF" fill-opacity="0.30" stroke="#D6D6D9" stroke-opacity="0.30" stroke-width="1.5"/><polygon points="519.6,255.0 558.6,277.5 558.6,322.5 519.6,345.0 480.6,322.5 480.6,277.5" fill="#FFFFFF" fill-opacity="0.40" stroke="#D6D6D9" stroke-opacity="0.40" stroke-width="1.5"/><polygon points="606.2,255.0 645.2,277.5 645.2,322.5 606.2,345.0 567.2,322.5 567.2,277.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="692.8,255.0 731.8,277.5 731.8,322.5 692.8,345.0 653.8,322.5 653.8,277.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="779.4,255.0 818.4,277.5 818.4,322.5 779.4,345.0 740.5,322.5 740.5,277.5" fill="#FFFFFF" fill-opacity="0.55" stroke="#D6D6D9" stroke-opacity="0.55" stroke-width="1.5"/><polygon points="216.5,330.0 255.5,352.5 255.5,397.5 216.5,420.0 177.5,397.5 177.5,352.5" fill="#FFFFFF" fill-opacity="0.12" stroke="#D6D6D9" stroke-opacity="0.12" stroke-width="1.5"/><polygon points="303.1,330.0 342.1,352.5 342.1,397.5 303.1,420.0 264.1,397.5 264.1,352.5" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="389.7,330.0 428.7,352.5 428.7,397.5 389.7,420.0 350.7,397.5 350.7,352.5" fill="#FFFFFF" fill-opacity="0.39" stroke="#D6D6D9" stroke-opacity="0.39" stroke-width="1.5"/><polygon points="476.3,330.0 515.3,352.5 515.3,397.5 476.3,420.0 437.3,397.5 437.3,352.5" fill="#F1B729"/><polygon points="562.9,330.0 601.9,352.5 601.9,397.5 562.9,420.0 523.9,397.5 523.9,352.5" fill="#FFFFFF" fill-opacity="0.63" stroke="#D6D6D9" stroke-opacity="0.63" stroke-width="1.5"/><polygon points="649.5,330.0 688.5,352.5 688.5,397.5 649.5,420.0 610.5,397.5 610.5,352.5" fill="#FFFFFF" fill-opacity="0.72" stroke="#D6D6D9" stroke-opacity="0.72" stroke-width="1.5"/><polygon points="736.1,330.0 775.1,352.5 775.1,397.5 736.1,420.0 697.2,397.5 697.2,352.5" fill="#FFFFFF" fill-opacity="0.77" stroke="#D6D6D9" stroke-opacity="0.77" stroke-width="1.5"/><polygon points="822.7,330.0 861.7,352.5 861.7,397.5 822.7,420.0 783.8,397.5 783.8,352.5" fill="#FFFFFF" fill-opacity="0.77" stroke="#D6D6D9" stroke-opacity="0.77" stroke-width="1.5"/><polygon points="173.2,405.0 212.2,427.5 212.2,472.5 173.2,495.0 134.2,472.5 134.2,427.5" fill="#FFFFFF" fill-opacity="0.11" stroke="#D6D6D9" stroke-opacity="0.11" stroke-width="1.5"/><polygon points="259.8,405.0 298.8,427.5 298.8,472.5 259.8,495.0 220.8,472.5 220.8,427.5" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="346.4,405.0 385.4,427.5 385.4,472.5 346.4,495.0 307.4,472.5 307.4,427.5" fill="#FFFFFF" fill-opacity="0.41" stroke="#D6D6D9" stroke-opacity="0.41" stroke-width="1.5"/><polygon points="433.0,405.0 472.0,427.5 472.0,472.5 433.0,495.0 394.0,472.5 394.0,427.5" fill="#FFFFFF" fill-opacity="0.56" stroke="#D6D6D9" stroke-opacity="0.56" stroke-width="1.5"/><polygon points="519.6,405.0 558.6,427.5 558.6,472.5 519.6,495.0 480.6,472.5 480.6,427.5" fill="#FFFFFF" fill-opacity="0.70" stroke="#D6D6D9" stroke-opacity="0.70" stroke-width="1.5"/><polygon points="606.2,405.0 645.2,427.5 645.2,472.5 606.2,495.0 567.2,472.5 567.2,427.5" fill="#FFFFFF" fill-opacity="0.84" stroke="#D6D6D9" stroke-opacity="0.84" stroke-width="1.5"/><polygon points="692.8,405.0 731.8,427.5 731.8,472.5 692.8,495.0 653.8,472.5 653.8,427.5" fill="#FFFFFF" fill-opacity="0.95" stroke="#D6D6D9" stroke-opacity="0.95" stroke-width="1.5"/><polygon points="779.4,405.0 818.4,427.5 818.4,472.5 779.4,495.0 740.5,472.5 740.5,427.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="129.9,480.0 168.9,502.5 168.9,547.5 129.9,570.0 90.9,547.5 90.9,502.5" fill="#FFFFFF" fill-opacity="0.05" stroke="#D6D6D9" stroke-opacity="0.05" stroke-width="1.5"/><polygon points="216.5,480.0 255.5,502.5 255.5,547.5 216.5,570.0 177.5,547.5 177.5,502.5" fill="#FFFFFF" fill-opacity="0.21" stroke="#D6D6D9" stroke-opacity="0.21" stroke-width="1.5"/><polygon points="303.1,480.0 342.1,502.5 342.1,547.5 303.1,570.0 264.1,547.5 264.1,502.5" fill="#FFFFFF" fill-opacity="0.36" stroke="#D6D6D9" stroke-opacity="0.36" stroke-width="1.5"/><polygon points="389.7,480.0 428.7,502.5 428.7,547.5 389.7,570.0 350.7,547.5 350.7,502.5" fill="#FFFFFF" fill-opacity="0.52" stroke="#D6D6D9" stroke-opacity="0.52" stroke-width="1.5"/><polygon points="476.3,480.0 515.3,502.5 515.3,547.5 476.3,570.0 437.3,547.5 437.3,502.5" fill="#FFFFFF" fill-opacity="0.67" stroke="#D6D6D9" stroke-opacity="0.67" stroke-width="1.5"/><polygon points="562.9,480.0 601.9,502.5 601.9,547.5 562.9,570.0 523.9,547.5 523.9,502.5" fill="#F1B729"/><polygon points="649.5,480.0 688.5,502.5 688.5,547.5 649.5,570.0 610.5,547.5 610.5,502.5" fill="#FFFFFF" fill-opacity="0.98" stroke="#D6D6D9" stroke-opacity="0.98" stroke-width="1.5"/><polygon points="736.1,480.0 775.1,502.5 775.1,547.5 736.1,570.0 697.2,547.5 697.2,502.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="822.7,480.0 861.7,502.5 861.7,547.5 822.7,570.0 783.8,547.5 783.8,502.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="173.2,555.0 212.2,577.5 212.2,622.5 173.2,645.0 134.2,622.5 134.2,577.5" fill="#FFFFFF" fill-opacity="0.10" stroke="#D6D6D9" stroke-opacity="0.10" stroke-width="1.5"/><polygon points="259.8,555.0 298.8,577.5 298.8,622.5 259.8,645.0 220.8,622.5 220.8,577.5" fill="#FFFFFF" fill-opacity="0.25" stroke="#D6D6D9" stroke-opacity="0.25" stroke-width="1.5"/><polygon points="346.4,555.0 385.4,577.5 385.4,622.5 346.4,645.0 307.4,622.5 307.4,577.5" fill="#FFFFFF" fill-opacity="0.40" stroke="#D6D6D9" stroke-opacity="0.40" stroke-width="1.5"/><polygon points="433.0,555.0 472.0,577.5 472.0,622.5 433.0,645.0 394.0,622.5 394.0,577.5" fill="#FFFFFF" fill-opacity="0.55" stroke="#D6D6D9" stroke-opacity="0.55" stroke-width="1.5"/><polygon points="519.6,555.0 558.6,577.5 558.6,622.5 519.6,645.0 480.6,622.5 480.6,577.5" fill="#FFFFFF" fill-opacity="0.69" stroke="#D6D6D9" stroke-opacity="0.69" stroke-width="1.5"/><polygon points="606.2,555.0 645.2,577.5 645.2,622.5 606.2,645.0 567.2,622.5 567.2,577.5" fill="#FFFFFF" fill-opacity="0.82" stroke="#D6D6D9" stroke-opacity="0.82" stroke-width="1.5"/><polygon points="692.8,555.0 731.8,577.5 731.8,622.5 692.8,645.0 653.8,622.5 653.8,577.5" fill="#FFFFFF" fill-opacity="0.93" stroke="#D6D6D9" stroke-opacity="0.93" stroke-width="1.5"/><polygon points="779.4,555.0 818.4,577.5 818.4,622.5 779.4,645.0 740.5,622.5 740.5,577.5" fill="#FFFFFF" fill-opacity="0.97" stroke="#D6D6D9" stroke-opacity="0.97" stroke-width="1.5"/><polygon points="216.5,630.0 255.5,652.5 255.5,697.5 216.5,720.0 177.5,697.5 177.5,652.5" fill="#FFFFFF" fill-opacity="0.10" stroke="#D6D6D9" stroke-opacity="0.10" stroke-width="1.5"/><polygon points="303.1,630.0 342.1,652.5 342.1,697.5 303.1,720.0 264.1,697.5 264.1,652.5" fill="#FFFFFF" fill-opacity="0.24" stroke="#D6D6D9" stroke-opacity="0.24" stroke-width="1.5"/><polygon points="389.7,630.0 428.7,652.5 428.7,697.5 389.7,720.0 350.7,697.5 350.7,652.5" fill="#F1B729"/><polygon points="476.3,630.0 515.3,652.5 515.3,697.5 476.3,720.0 437.3,697.5 437.3,652.5" fill="#FFFFFF" fill-opacity="0.50" stroke="#D6D6D9" stroke-opacity="0.50" stroke-width="1.5"/><polygon points="562.9,630.0 601.9,652.5 601.9,697.5 562.9,720.0 523.9,697.5 523.9,652.5" fill="#FFFFFF" fill-opacity="0.60" stroke="#D6D6D9" stroke-opacity="0.60" stroke-width="1.5"/><polygon points="649.5,630.0 688.5,652.5 688.5,697.5 649.5,720.0 610.5,697.5 610.5,652.5" fill="#FFFFFF" fill-opacity="0.69" stroke="#D6D6D9" stroke-opacity="0.69" stroke-width="1.5"/><polygon points="736.1,630.0 775.1,652.5 775.1,697.5 736.1,720.0 697.2,697.5 697.2,652.5" fill="#FFFFFF" fill-opacity="0.74" stroke="#D6D6D9" stroke-opacity="0.74" stroke-width="1.5"/><polygon points="822.7,630.0 861.7,652.5 861.7,697.5 822.7,720.0 783.8,697.5 783.8,652.5" fill="#FFFFFF" fill-opacity="0.74" stroke="#D6D6D9" stroke-opacity="0.74" stroke-width="1.5"/><polygon points="259.8,705.0 298.8,727.5 298.8,772.5 259.8,795.0 220.8,772.5 220.8,727.5" fill="#FFFFFF" fill-opacity="0.05" stroke="#D6D6D9" stroke-opacity="0.05" stroke-width="1.5"/><polygon points="346.4,705.0 385.4,727.5 385.4,772.5 346.4,795.0 307.4,772.5 307.4,727.5" fill="#FFFFFF" fill-opacity="0.17" stroke="#D6D6D9" stroke-opacity="0.17" stroke-width="1.5"/><polygon points="433.0,705.0 472.0,727.5 472.0,772.5 433.0,795.0 394.0,772.5 394.0,727.5" fill="#FFFFFF" fill-opacity="0.28" stroke="#D6D6D9" stroke-opacity="0.28" stroke-width="1.5"/><polygon points="519.6,705.0 558.6,727.5 558.6,772.5 519.6,795.0 480.6,772.5 480.6,727.5" fill="#FFFFFF" fill-opacity="0.38" stroke="#D6D6D9" stroke-opacity="0.38" stroke-width="1.5"/><polygon points="606.2,705.0 645.2,727.5 645.2,772.5 606.2,795.0 567.2,772.5 567.2,727.5" fill="#FFFFFF" fill-opacity="0.45" stroke="#D6D6D9" stroke-opacity="0.45" stroke-width="1.5"/><polygon points="692.8,705.0 731.8,727.5 731.8,772.5 692.8,795.0 653.8,772.5 653.8,727.5" fill="#FFFFFF" fill-opacity="0.50" stroke="#D6D6D9" stroke-opacity="0.50" stroke-width="1.5"/><polygon points="779.4,705.0 818.4,727.5 818.4,772.5 779.4,795.0 740.5,772.5 740.5,727.5" fill="#FFFFFF" fill-opacity="0.52" stroke="#D6D6D9" stroke-opacity="0.52" stroke-width="1.5"/><polygon points="389.7,780.0 428.7,802.5 428.7,847.5 389.7,870.0 350.7,847.5 350.7,802.5" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="476.3,780.0 515.3,802.5 515.3,847.5 476.3,870.0 437.3,847.5 437.3,802.5" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="562.9,780.0 601.9,802.5 601.9,847.5 562.9,870.0 523.9,847.5 523.9,802.5" fill="#FFFFFF" fill-opacity="0.21" stroke="#D6D6D9" stroke-opacity="0.21" stroke-width="1.5"/><polygon points="649.5,780.0 688.5,802.5 688.5,847.5 649.5,870.0 610.5,847.5 610.5,802.5" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="736.1,780.0 775.1,802.5 775.1,847.5 736.1,870.0 697.2,847.5 697.2,802.5" fill="#FFFFFF" fill-opacity="0.29" stroke="#D6D6D9" stroke-opacity="0.29" stroke-width="1.5"/><polygon points="822.7,780.0 861.7,802.5 861.7,847.5 822.7,870.0 783.8,847.5 783.8,802.5" fill="#FFFFFF" fill-opacity="0.29" stroke="#D6D6D9" stroke-opacity="0.29" stroke-width="1.5"/><polygon points="692.8,855.0 731.8,877.5 731.8,922.5 692.8,945.0 653.8,922.5 653.8,877.5" fill="#FFFFFF" fill-opacity="0.05" stroke="#D6D6D9" stroke-opacity="0.05" stroke-width="1.5"/><polygon points="779.4,855.0 818.4,877.5 818.4,922.5 779.4,945.0 740.5,922.5 740.5,877.5" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/></svg>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<p style="font-size:24px;color:#6D6D71">Webinar, [Datum], [Uhrzeit] Uhr</p>
<p style="font-size:24px;color:#6D6D71">Gleich geht's los.</p>
</div>
<div style="display:flex;flex-direction:column;gap:40px">
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Automatisierung im Handwerk.</h1>
<p style="font-size:44px;line-height:1.3;color:#505057;width:1240px">Was sie in deinem Betrieb wirklich macht. Mit dem Branchenprogramm, das du schon hast.</p>
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:end">
<p style="font-size:32px">Mit Noah Geerkens und David [Nachname]</p>
<img src="bilder/logo.png" alt="HiveGrid" style="width:257px;height:48px;object-fit:contain">
</div>
<aside>David, vor dem Start
Kern: ankommen lassen.
- Hallo, schön, dass du da bist. Wir starten in zwei Minuten.
- Schreib in den Chat, mit welchem Branchenprogramm ihr arbeitet.
Offen: Titel, Datum, Uhrzeit, Davids Nachname.</aside>
</section>
</div><p class="notiz"><b>1, cover</b>
David, vor dem Start
Kern: ankommen lassen.
- Hallo, schön, dass du da bist. Wir starten in zwei Minuten.
- Schreib in den Chat, mit welchem Branchenprogramm ihr arbeitet.
Offen: Titel, Datum, Uhrzeit, Davids Nachname.</p></div><div class="folie" id="f2" data-sid="noah"><div class="rahmen"><section id="noah" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:center;gap:56px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px;width:860px">Vom Handwerker für Handwerker.</h2>
<div style="display:flex;flex-direction:column;gap:40px;width:760px">
<p style="font-size:32px;line-height:1.4;color:#505057">HiveGrid ist zusammen mit einem SHK-Betrieb entstanden, an dessen echten Abläufen.</p>
<div style="display:flex;flex-direction:column;gap:8px">
<p style="font-size:32px;font-weight:600">Noah Geerkens</p>
<p style="font-size:24px;color:#6D6D71">SHK-Betrieb in vierter Generation</p>
</div>
</div>
<svg aria-label="" data-waben="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080" width="960" height="1080" style="position:absolute;left:960px;top:0px;width:960px;height:1080px"><polygon points="129.3,22.5 168.2,45.0 168.2,90.0 129.3,112.5 90.3,90.0 90.3,45.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="207.2,22.5 246.2,45.0 246.2,90.0 207.2,112.5 168.2,90.0 168.2,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="285.1,22.5 324.1,45.0 324.1,90.0 285.1,112.5 246.2,90.0 246.2,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="363.1,22.5 402.1,45.0 402.1,90.0 363.1,112.5 324.1,90.0 324.1,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="441.0,22.5 480.0,45.0 480.0,90.0 441.0,112.5 402.1,90.0 402.1,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="519.0,22.5 557.9,45.0 557.9,90.0 519.0,112.5 480.0,90.0 480.0,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="596.9,22.5 635.9,45.0 635.9,90.0 596.9,112.5 557.9,90.0 557.9,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="674.9,22.5 713.8,45.0 713.8,90.0 674.9,112.5 635.9,90.0 635.9,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="752.8,22.5 791.8,45.0 791.8,90.0 752.8,112.5 713.8,90.0 713.8,45.0" fill="#FFFFFF" fill-opacity="0.14" stroke="#D6D6D9" stroke-opacity="0.14" stroke-width="1.5"/><polygon points="830.7,22.5 869.7,45.0 869.7,90.0 830.7,112.5 791.8,90.0 791.8,45.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,90.0 129.3,112.5 129.3,157.5 90.3,180.0 51.3,157.5 51.3,112.5" fill="#FFFFFF" fill-opacity="0.15" stroke="#D6D6D9" stroke-opacity="0.15" stroke-width="1.5"/><polygon points="168.2,90.0 207.2,112.5 207.2,157.5 168.2,180.0 129.3,157.5 129.3,112.5" fill="#FFFFFF" fill-opacity="0.47" stroke="#D6D6D9" stroke-opacity="0.47" stroke-width="1.5"/><polygon points="246.2,90.0 285.1,112.5 285.1,157.5 246.2,180.0 207.2,157.5 207.2,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="324.1,90.0 363.1,112.5 363.1,157.5 324.1,180.0 285.1,157.5 285.1,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="402.1,90.0 441.0,112.5 441.0,157.5 402.1,180.0 363.1,157.5 363.1,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="480.0,90.0 519.0,112.5 519.0,157.5 480.0,180.0 441.0,157.5 441.0,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="557.9,90.0 596.9,112.5 596.9,157.5 557.9,180.0 519.0,157.5 519.0,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="635.9,90.0 674.9,112.5 674.9,157.5 635.9,180.0 596.9,157.5 596.9,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="713.8,90.0 752.8,112.5 752.8,157.5 713.8,180.0 674.9,157.5 674.9,112.5" fill="#FFFFFF" fill-opacity="0.53" stroke="#D6D6D9" stroke-opacity="0.53" stroke-width="1.5"/><polygon points="791.8,90.0 830.7,112.5 830.7,157.5 791.8,180.0 752.8,157.5 752.8,112.5" fill="#FFFFFF" fill-opacity="0.47" stroke="#D6D6D9" stroke-opacity="0.47" stroke-width="1.5"/><polygon points="869.7,90.0 908.7,112.5 908.7,157.5 869.7,180.0 830.7,157.5 830.7,112.5" fill="#FFFFFF" fill-opacity="0.15" stroke="#D6D6D9" stroke-opacity="0.15" stroke-width="1.5"/><polygon points="51.3,157.5 90.3,180.0 90.3,225.0 51.3,247.5 12.3,225.0 12.3,180.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,157.5 168.2,180.0 168.2,225.0 129.3,247.5 90.3,225.0 90.3,180.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,157.5 869.7,180.0 869.7,225.0 830.7,247.5 791.8,225.0 791.8,180.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,157.5 947.7,180.0 947.7,225.0 908.7,247.5 869.7,225.0 869.7,180.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,225.0 129.3,247.5 129.3,292.5 90.3,315.0 51.3,292.5 51.3,247.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,225.0 207.2,247.5 207.2,292.5 168.2,315.0 129.3,292.5 129.3,247.5" fill="#F1B729"/><polygon points="791.8,225.0 830.7,247.5 830.7,292.5 791.8,315.0 752.8,292.5 752.8,247.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,225.0 908.7,247.5 908.7,292.5 869.7,315.0 830.7,292.5 830.7,247.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,292.5 90.3,315.0 90.3,360.0 51.3,382.5 12.3,360.0 12.3,315.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,292.5 168.2,315.0 168.2,360.0 129.3,382.5 90.3,360.0 90.3,315.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,292.5 869.7,315.0 869.7,360.0 830.7,382.5 791.8,360.0 791.8,315.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,292.5 947.7,315.0 947.7,360.0 908.7,382.5 869.7,360.0 869.7,315.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,360.0 129.3,382.5 129.3,427.5 90.3,450.0 51.3,427.5 51.3,382.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,360.0 207.2,382.5 207.2,427.5 168.2,450.0 129.3,427.5 129.3,382.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="791.8,360.0 830.7,382.5 830.7,427.5 791.8,450.0 752.8,427.5 752.8,382.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,360.0 908.7,382.5 908.7,427.5 869.7,450.0 830.7,427.5 830.7,382.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,427.5 90.3,450.0 90.3,495.0 51.3,517.5 12.3,495.0 12.3,450.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,427.5 168.2,450.0 168.2,495.0 129.3,517.5 90.3,495.0 90.3,450.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,427.5 869.7,450.0 869.7,495.0 830.7,517.5 791.8,495.0 791.8,450.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,427.5 947.7,450.0 947.7,495.0 908.7,517.5 869.7,495.0 869.7,450.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,495.0 129.3,517.5 129.3,562.5 90.3,585.0 51.3,562.5 51.3,517.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,495.0 207.2,517.5 207.2,562.5 168.2,585.0 129.3,562.5 129.3,517.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="791.8,495.0 830.7,517.5 830.7,562.5 791.8,585.0 752.8,562.5 752.8,517.5" fill="#F1B729"/><polygon points="869.7,495.0 908.7,517.5 908.7,562.5 869.7,585.0 830.7,562.5 830.7,517.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,562.5 90.3,585.0 90.3,630.0 51.3,652.5 12.3,630.0 12.3,585.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,562.5 168.2,585.0 168.2,630.0 129.3,652.5 90.3,630.0 90.3,585.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,562.5 869.7,585.0 869.7,630.0 830.7,652.5 791.8,630.0 791.8,585.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,562.5 947.7,585.0 947.7,630.0 908.7,652.5 869.7,630.0 869.7,585.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,630.0 129.3,652.5 129.3,697.5 90.3,720.0 51.3,697.5 51.3,652.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,630.0 207.2,652.5 207.2,697.5 168.2,720.0 129.3,697.5 129.3,652.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="791.8,630.0 830.7,652.5 830.7,697.5 791.8,720.0 752.8,697.5 752.8,652.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,630.0 908.7,652.5 908.7,697.5 869.7,720.0 830.7,697.5 830.7,652.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,697.5 90.3,720.0 90.3,765.0 51.3,787.5 12.3,765.0 12.3,720.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,697.5 168.2,720.0 168.2,765.0 129.3,787.5 90.3,765.0 90.3,720.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,697.5 869.7,720.0 869.7,765.0 830.7,787.5 791.8,765.0 791.8,720.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,697.5 947.7,720.0 947.7,765.0 908.7,787.5 869.7,765.0 869.7,720.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,765.0 129.3,787.5 129.3,832.5 90.3,855.0 51.3,832.5 51.3,787.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,765.0 207.2,787.5 207.2,832.5 168.2,855.0 129.3,832.5 129.3,787.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="791.8,765.0 830.7,787.5 830.7,832.5 791.8,855.0 752.8,832.5 752.8,787.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,765.0 908.7,787.5 908.7,832.5 869.7,855.0 830.7,832.5 830.7,787.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,832.5 90.3,855.0 90.3,900.0 51.3,922.5 12.3,900.0 12.3,855.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,832.5 168.2,855.0 168.2,900.0 129.3,922.5 90.3,900.0 90.3,855.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="830.7,832.5 869.7,855.0 869.7,900.0 830.7,922.5 791.8,900.0 791.8,855.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,832.5 947.7,855.0 947.7,900.0 908.7,922.5 869.7,900.0 869.7,855.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,900.0 129.3,922.5 129.3,967.5 90.3,990.0 51.3,967.5 51.3,922.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,900.0 207.2,922.5 207.2,967.5 168.2,990.0 129.3,967.5 129.3,922.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="246.2,900.0 285.1,922.5 285.1,967.5 246.2,990.0 207.2,967.5 207.2,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="324.1,900.0 363.1,922.5 363.1,967.5 324.1,990.0 285.1,967.5 285.1,922.5" fill="#F1B729"/><polygon points="402.1,900.0 441.0,922.5 441.0,967.5 402.1,990.0 363.1,967.5 363.1,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="480.0,900.0 519.0,922.5 519.0,967.5 480.0,990.0 441.0,967.5 441.0,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="557.9,900.0 596.9,922.5 596.9,967.5 557.9,990.0 519.0,967.5 519.0,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="635.9,900.0 674.9,922.5 674.9,967.5 635.9,990.0 596.9,967.5 596.9,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="713.8,900.0 752.8,922.5 752.8,967.5 713.8,990.0 674.9,967.5 674.9,922.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="791.8,900.0 830.7,922.5 830.7,967.5 791.8,990.0 752.8,967.5 752.8,922.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,900.0 908.7,922.5 908.7,967.5 869.7,990.0 830.7,967.5 830.7,922.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,967.5 90.3,990.0 90.3,1035.0 51.3,1057.5 12.3,1035.0 12.3,990.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="129.3,967.5 168.2,990.0 168.2,1035.0 129.3,1057.5 90.3,1035.0 90.3,990.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="207.2,967.5 246.2,990.0 246.2,1035.0 207.2,1057.5 168.2,1035.0 168.2,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="285.1,967.5 324.1,990.0 324.1,1035.0 285.1,1057.5 246.2,1035.0 246.2,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="363.1,967.5 402.1,990.0 402.1,1035.0 363.1,1057.5 324.1,1035.0 324.1,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="441.0,967.5 480.0,990.0 480.0,1035.0 441.0,1057.5 402.1,1035.0 402.1,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="519.0,967.5 557.9,990.0 557.9,1035.0 519.0,1057.5 480.0,1035.0 480.0,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="596.9,967.5 635.9,990.0 635.9,1035.0 596.9,1057.5 557.9,1035.0 557.9,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="674.9,967.5 713.8,990.0 713.8,1035.0 674.9,1057.5 635.9,1035.0 635.9,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="752.8,967.5 791.8,990.0 791.8,1035.0 752.8,1057.5 713.8,1035.0 713.8,990.0" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="830.7,967.5 869.7,990.0 869.7,1035.0 830.7,1057.5 791.8,1035.0 791.8,990.0" fill="#FFFFFF" fill-opacity="0.46" stroke="#D6D6D9" stroke-opacity="0.46" stroke-width="1.5"/><polygon points="908.7,967.5 947.7,990.0 947.7,1035.0 908.7,1057.5 869.7,1035.0 869.7,990.0" fill="#FFFFFF" fill-opacity="0.06" stroke="#D6D6D9" stroke-opacity="0.06" stroke-width="1.5"/><polygon points="90.3,1035.0 129.3,1057.5 129.3,1102.5 90.3,1125.0 51.3,1102.5 51.3,1057.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,1035.0 207.2,1057.5 207.2,1102.5 168.2,1125.0 129.3,1102.5 129.3,1057.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="246.2,1035.0 285.1,1057.5 285.1,1102.5 246.2,1125.0 207.2,1102.5 207.2,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="324.1,1035.0 363.1,1057.5 363.1,1102.5 324.1,1125.0 285.1,1102.5 285.1,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="402.1,1035.0 441.0,1057.5 441.0,1102.5 402.1,1125.0 363.1,1102.5 363.1,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="480.0,1035.0 519.0,1057.5 519.0,1102.5 480.0,1125.0 441.0,1102.5 441.0,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="557.9,1035.0 596.9,1057.5 596.9,1102.5 557.9,1125.0 519.0,1102.5 519.0,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="635.9,1035.0 674.9,1057.5 674.9,1102.5 635.9,1125.0 596.9,1102.5 596.9,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="713.8,1035.0 752.8,1057.5 752.8,1102.5 713.8,1125.0 674.9,1102.5 674.9,1057.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="791.8,1035.0 830.7,1057.5 830.7,1102.5 791.8,1125.0 752.8,1102.5 752.8,1057.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,1035.0 908.7,1057.5 908.7,1102.5 869.7,1125.0 830.7,1102.5 830.7,1057.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/></svg>
<svg aria-label="Rahmen um das Foto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 730" width="600" height="730" style="position:absolute;left:1140px;top:175px;width:600px;height:730px"><path d="M50,24 H550 L576,50 V680 L550,706 H50 L24,680 V50 Z" fill="#FAFAFA"/><path d="M50,24 H550 L576,50 V680 L550,706 H50 L24,680 V50 Z" fill="none" stroke="#24242B" stroke-opacity="0.55" stroke-width="2.5"/><path d="M50,24 H98 M24,50 V98 M550,24 H502 M576,50 V98 M50,706 H98 M24,680 V632 M550,706 H502 M576,680 V632" fill="none" stroke="#F1B729" stroke-width="5"/></svg>
<img src="bilder/noah-karte.png" alt="Noah Geerkens" style="position:absolute;left:1180px;top:215px;width:520px;height:650px;object-fit:cover;border-radius:8px">
<div style="position:absolute;left:128px;bottom:64px;width:150px;height:32px;display:flex;flex-direction:row;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
</div>
<aside>Noah
Kern: HiveGrid ist in einem echten SHK-Betrieb entstanden.
- Ich bin Noah Geerkens.
- Mit meiner Schwester führe ich unseren SHK-Betrieb in vierter Generation.
- HiveGrid haben wir an unseren eigenen Abläufen gebaut.
- [Kurz erzählen, wie es angefangen hat.]
Achtung: „Im Alltag erprobt“ nur sagen, wenn der Betrieb bis dahin mit HiveGrid arbeitet.</aside>
</section>
</div><p class="notiz"><b>2, noah</b>
Noah
Kern: HiveGrid ist in einem echten SHK-Betrieb entstanden.
- Ich bin Noah Geerkens.
- Mit meiner Schwester führe ich unseren SHK-Betrieb in vierter Generation.
- HiveGrid haben wir an unseren eigenen Abläufen gebaut.
- [Kurz erzählen, wie es angefangen hat.]
Achtung: „Im Alltag erprobt“ nur sagen, wenn der Betrieb bis dahin mit HiveGrid arbeitet.</p></div><div class="folie" id="f3" data-sid="problem"><div class="rahmen"><section id="problem" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;justify-content:space-between;gap:48px">
<svg aria-label="" data-waben="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 375" width="960" height="375" style="position:absolute;left:960px;top:0px;width:960px;height:375px"><polygon points="90.3,-45.0 129.3,-22.5 129.3,22.5 90.3,45.0 51.3,22.5 51.3,-22.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="168.2,-45.0 207.2,-22.5 207.2,22.5 168.2,45.0 129.3,22.5 129.3,-22.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="246.2,-45.0 285.1,-22.5 285.1,22.5 246.2,45.0 207.2,22.5 207.2,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="324.1,-45.0 363.1,-22.5 363.1,22.5 324.1,45.0 285.1,22.5 285.1,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="402.1,-45.0 441.0,-22.5 441.0,22.5 402.1,45.0 363.1,22.5 363.1,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="480.0,-45.0 519.0,-22.5 519.0,22.5 480.0,45.0 441.0,22.5 441.0,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="557.9,-45.0 596.9,-22.5 596.9,22.5 557.9,45.0 519.0,22.5 519.0,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="635.9,-45.0 674.9,-22.5 674.9,22.5 635.9,45.0 596.9,22.5 596.9,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="713.8,-45.0 752.8,-22.5 752.8,22.5 713.8,45.0 674.9,22.5 674.9,-22.5" fill="#FFFFFF" fill-opacity="1.00" stroke="#D6D6D9" stroke-opacity="1.00" stroke-width="1.5"/><polygon points="791.8,-45.0 830.7,-22.5 830.7,22.5 791.8,45.0 752.8,22.5 752.8,-22.5" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="869.7,-45.0 908.7,-22.5 908.7,22.5 869.7,45.0 830.7,22.5 830.7,-22.5" fill="#FFFFFF" fill-opacity="0.23" stroke="#D6D6D9" stroke-opacity="0.23" stroke-width="1.5"/><polygon points="51.3,22.5 90.3,45.0 90.3,90.0 51.3,112.5 12.3,90.0 12.3,45.0" fill="#FFFFFF" fill-opacity="0.04" stroke="#D6D6D9" stroke-opacity="0.04" stroke-width="1.5"/><polygon points="129.3,22.5 168.2,45.0 168.2,90.0 129.3,112.5 90.3,90.0 90.3,45.0" fill="#FFFFFF" fill-opacity="0.33" stroke="#D6D6D9" stroke-opacity="0.33" stroke-width="1.5"/><polygon points="207.2,22.5 246.2,45.0 246.2,90.0 207.2,112.5 168.2,90.0 168.2,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="285.1,22.5 324.1,45.0 324.1,90.0 285.1,112.5 246.2,90.0 246.2,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="363.1,22.5 402.1,45.0 402.1,90.0 363.1,112.5 324.1,90.0 324.1,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="441.0,22.5 480.0,45.0 480.0,90.0 441.0,112.5 402.1,90.0 402.1,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="519.0,22.5 557.9,45.0 557.9,90.0 519.0,112.5 480.0,90.0 480.0,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="596.9,22.5 635.9,45.0 635.9,90.0 596.9,112.5 557.9,90.0 557.9,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="674.9,22.5 713.8,45.0 713.8,90.0 674.9,112.5 635.9,90.0 635.9,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="752.8,22.5 791.8,45.0 791.8,90.0 752.8,112.5 713.8,90.0 713.8,45.0" fill="#FFFFFF" fill-opacity="0.73" stroke="#D6D6D9" stroke-opacity="0.73" stroke-width="1.5"/><polygon points="830.7,22.5 869.7,45.0 869.7,90.0 830.7,112.5 791.8,90.0 791.8,45.0" fill="#FFFFFF" fill-opacity="0.33" stroke="#D6D6D9" stroke-opacity="0.33" stroke-width="1.5"/><polygon points="908.7,22.5 947.7,45.0 947.7,90.0 908.7,112.5 869.7,90.0 869.7,45.0" fill="#FFFFFF" fill-opacity="0.04" stroke="#D6D6D9" stroke-opacity="0.04" stroke-width="1.5"/><polygon points="90.3,90.0 129.3,112.5 129.3,157.5 90.3,180.0 51.3,157.5 51.3,112.5" fill="#FFFFFF" fill-opacity="0.11" stroke="#D6D6D9" stroke-opacity="0.11" stroke-width="1.5"/><polygon points="168.2,90.0 207.2,112.5 207.2,157.5 168.2,180.0 129.3,157.5 129.3,112.5" fill="#FFFFFF" fill-opacity="0.35" stroke="#D6D6D9" stroke-opacity="0.35" stroke-width="1.5"/><polygon points="246.2,90.0 285.1,112.5 285.1,157.5 246.2,180.0 207.2,157.5 207.2,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="324.1,90.0 363.1,112.5 363.1,157.5 324.1,180.0 285.1,157.5 285.1,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="402.1,90.0 441.0,112.5 441.0,157.5 402.1,180.0 363.1,157.5 363.1,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="480.0,90.0 519.0,112.5 519.0,157.5 480.0,180.0 441.0,157.5 441.0,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="557.9,90.0 596.9,112.5 596.9,157.5 557.9,180.0 519.0,157.5 519.0,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="635.9,90.0 674.9,112.5 674.9,157.5 635.9,180.0 596.9,157.5 596.9,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="713.8,90.0 752.8,112.5 752.8,157.5 713.8,180.0 674.9,157.5 674.9,112.5" fill="#FFFFFF" fill-opacity="0.48" stroke="#D6D6D9" stroke-opacity="0.48" stroke-width="1.5"/><polygon points="791.8,90.0 830.7,112.5 830.7,157.5 791.8,180.0 752.8,157.5 752.8,112.5" fill="#FFFFFF" fill-opacity="0.35" stroke="#D6D6D9" stroke-opacity="0.35" stroke-width="1.5"/><polygon points="869.7,90.0 908.7,112.5 908.7,157.5 869.7,180.0 830.7,157.5 830.7,112.5" fill="#FFFFFF" fill-opacity="0.11" stroke="#D6D6D9" stroke-opacity="0.11" stroke-width="1.5"/><polygon points="129.3,157.5 168.2,180.0 168.2,225.0 129.3,247.5 90.3,225.0 90.3,180.0" fill="#FFFFFF" fill-opacity="0.12" stroke="#D6D6D9" stroke-opacity="0.12" stroke-width="1.5"/><polygon points="207.2,157.5 246.2,180.0 246.2,225.0 207.2,247.5 168.2,225.0 168.2,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="285.1,157.5 324.1,180.0 324.1,225.0 285.1,247.5 246.2,225.0 246.2,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="363.1,157.5 402.1,180.0 402.1,225.0 363.1,247.5 324.1,225.0 324.1,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="441.0,157.5 480.0,180.0 480.0,225.0 441.0,247.5 402.1,225.0 402.1,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="519.0,157.5 557.9,180.0 557.9,225.0 519.0,247.5 480.0,225.0 480.0,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="596.9,157.5 635.9,180.0 635.9,225.0 596.9,247.5 557.9,225.0 557.9,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="674.9,157.5 713.8,180.0 713.8,225.0 674.9,247.5 635.9,225.0 635.9,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="752.8,157.5 791.8,180.0 791.8,225.0 752.8,247.5 713.8,225.0 713.8,180.0" fill="#FFFFFF" fill-opacity="0.26" stroke="#D6D6D9" stroke-opacity="0.26" stroke-width="1.5"/><polygon points="830.7,157.5 869.7,180.0 869.7,225.0 830.7,247.5 791.8,225.0 791.8,180.0" fill="#FFFFFF" fill-opacity="0.12" stroke="#D6D6D9" stroke-opacity="0.12" stroke-width="1.5"/><polygon points="168.2,225.0 207.2,247.5 207.2,292.5 168.2,315.0 129.3,292.5 129.3,247.5" fill="#FFFFFF" fill-opacity="0.07" stroke="#D6D6D9" stroke-opacity="0.07" stroke-width="1.5"/><polygon points="246.2,225.0 285.1,247.5 285.1,292.5 246.2,315.0 207.2,292.5 207.2,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="324.1,225.0 363.1,247.5 363.1,292.5 324.1,315.0 285.1,292.5 285.1,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="402.1,225.0 441.0,247.5 441.0,292.5 402.1,315.0 363.1,292.5 363.1,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="480.0,225.0 519.0,247.5 519.0,292.5 480.0,315.0 441.0,292.5 441.0,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="557.9,225.0 596.9,247.5 596.9,292.5 557.9,315.0 519.0,292.5 519.0,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="635.9,225.0 674.9,247.5 674.9,292.5 635.9,315.0 596.9,292.5 596.9,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="713.8,225.0 752.8,247.5 752.8,292.5 713.8,315.0 674.9,292.5 674.9,247.5" fill="#FFFFFF" fill-opacity="0.09" stroke="#D6D6D9" stroke-opacity="0.09" stroke-width="1.5"/><polygon points="791.8,225.0 830.7,247.5 830.7,292.5 791.8,315.0 752.8,292.5 752.8,247.5" fill="#FFFFFF" fill-opacity="0.07" stroke="#D6D6D9" stroke-opacity="0.07" stroke-width="1.5"/></svg>
<div style="position:relative;display:flex;flex-direction:column;gap:32px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px">„Ich kriege das, was in meinem Kopf ist, nicht in die Ausführung.“</h2>
<p style="font-size:32px;line-height:1.4;color:#505057;width:1240px">Die Leute wollen ja. Aber das Wissen liegt an einem anderen Ort als die Arbeit.</p>
<p style="font-size:24px;color:#6D6D71">Noah Geerkens</p>
</div>
<div style="display:flex;flex-direction:column;gap:24px">
<p style="font-size:24px;color:#6D6D71">Wo das Wissen bei uns lag</p>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:start">
<div style="display:flex;flex-direction:column;gap:20px">
<div style="position:relative;width:104px;height:104px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="104" height="104" style="position:absolute;left:0px;top:0px;width:104px;height:104px"><path d="M18.5,0.5 H85.5 L103.5,18.5 V85.5 L85.5,103.5 H18.5 L0.5,85.5 V18.5 Z" fill="#FFFFFF" stroke="#DCDCDE" stroke-width="1"/></svg>
<svg aria-label="Datenbank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:26px;top:26px;width:52px;height:52px"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
</div>
<p style="font-size:32px;white-space:nowrap">Branchenprogramm</p>
</div>
<div style="display:flex;flex-direction:column;gap:20px">
<div style="position:relative;width:104px;height:104px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="104" height="104" style="position:absolute;left:0px;top:0px;width:104px;height:104px"><path d="M18.5,0.5 H85.5 L103.5,18.5 V85.5 L85.5,103.5 H18.5 L0.5,85.5 V18.5 Z" fill="#FFFFFF" stroke="#DCDCDE" stroke-width="1"/></svg>
<svg aria-label="Mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:26px;top:26px;width:52px;height:52px"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
</div>
<p style="font-size:32px;white-space:nowrap">Mails</p>
</div>
<div style="display:flex;flex-direction:column;gap:20px">
<div style="position:relative;width:104px;height:104px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="104" height="104" style="position:absolute;left:0px;top:0px;width:104px;height:104px"><path d="M18.5,0.5 H85.5 L103.5,18.5 V85.5 L85.5,103.5 H18.5 L0.5,85.5 V18.5 Z" fill="#FFFFFF" stroke="#DCDCDE" stroke-width="1"/></svg>
<img src="bilder/whatsapp.png" alt="WhatsApp" style="position:absolute;left:22px;top:22px;width:60px;height:60px;object-fit:contain">
</div>
<p style="font-size:32px;white-space:nowrap">WhatsApp</p>
</div>
<div style="display:flex;flex-direction:column;gap:20px">
<div style="position:relative;width:104px;height:104px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="104" height="104" style="position:absolute;left:0px;top:0px;width:104px;height:104px"><path d="M18.5,0.5 H85.5 L103.5,18.5 V85.5 L85.5,103.5 H18.5 L0.5,85.5 V18.5 Z" fill="#FFFFFF" stroke="#DCDCDE" stroke-width="1"/></svg>
<img src="bilder/excel.png" alt="Excel" style="position:absolute;left:22px;top:24px;width:60px;height:56px;object-fit:contain">
</div>
<p style="font-size:32px;white-space:nowrap">Excel</p>
</div>
<div style="display:flex;flex-direction:column;gap:20px">
<div style="position:relative;width:104px;height:104px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="104" height="104" style="position:absolute;left:0px;top:0px;width:104px;height:104px"><path d="M18.5,0.5 H85.5 L103.5,18.5 V85.5 L85.5,103.5 H18.5 L0.5,85.5 V18.5 Z" fill="#FFFFFF" stroke="#DCDCDE" stroke-width="1"/></svg>
<svg aria-label="Notizzettel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:26px;top:26px;width:52px;height:52px"><path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"/><path d="M15 3v6h6"/></svg>
</div>
<p style="font-size:32px;white-space:nowrap">Zettel im Auto</p>
</div>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Einstieg</p>
</div>
<aside>Noah
Kern: Das Wissen liegt woanders als die Arbeit.
- Ein Satz hat mich lange beschäftigt: „Ich kriege das, was in meinem Kopf ist, nicht in die Ausführung.“
- Die Leute wollen ja. Aber das Wissen liegt woanders.
- Bei uns: Branchenprogramm, Mails, WhatsApp-Gruppe, Excel, Zettel im Auto.</aside>
</section>
</div><p class="notiz"><b>3, problem</b>
Noah
Kern: Das Wissen liegt woanders als die Arbeit.
- Ein Satz hat mich lange beschäftigt: „Ich kriege das, was in meinem Kopf ist, nicht in die Ausführung.“
- Die Leute wollen ja. Aber das Wissen liegt woanders.
- Bei uns: Branchenprogramm, Mails, WhatsApp-Gruppe, Excel, Zettel im Auto.</p></div><div class="folie" id="f4" data-sid="wechseln"><div class="rahmen"><section id="wechseln" data-transition="fade" style="background:#F1B729;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:end;gap:40px">
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Du musst nicht wechseln.</h1>
<p style="font-size:44px;line-height:1.3;width:1240px">Dein Branchenprogramm bleibt der Kern. HiveGrid legt sich drumherum und verbindet, was du schon hast.</p>
<aside>Noah
Kern: Du musst nicht wechseln.
- Jedes Jahr kommt neue Software für Handwerker.
- Fast alle wollen, dass du umstellst.
- Wechseln? Da hängen Jahre an Daten drin.
- Wir wollten bleiben und mehr rausholen.
- HiveGrid legt sich um dein Branchenprogramm.</aside>
</section>
</div><p class="notiz"><b>4, wechseln</b>
Noah
Kern: Du musst nicht wechseln.
- Jedes Jahr kommt neue Software für Handwerker.
- Fast alle wollen, dass du umstellst.
- Wechseln? Da hängen Jahre an Daten drin.
- Wir wollten bleiben und mehr rausholen.
- HiveGrid legt sich um dein Branchenprogramm.</p></div><div class="folie" id="f5" data-sid="bleibt"><div class="rahmen"><section id="bleibt" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:56px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px">Was bleibt, was dazukommt.</h2>
<div style="display:flex;flex-direction:column;gap:48px">
<div style="display:flex;flex-direction:column;gap:20px">
<p style="font-size:32px;font-weight:600;color:#505057">Bleibt im Branchenprogramm</p>
<div style="display:flex;flex-direction:row;gap:26px">
<div style="position:relative;width:312px;height:156px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 156" width="312" height="156" style="position:absolute;left:0px;top:0px;width:312px;height:156px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V137.5 L293.5,155.5 H18.5 L0.5,137.5 V18.5 Z" fill="#EFEFF0"/></svg>
<svg aria-label="Rechnungen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M8 12h5"/><path d="M16 9.5a4 4 0 1 0 0 5.2"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25;color:#505057">Rechnungen</p>
</div>
<div style="position:relative;width:312px;height:156px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 156" width="312" height="156" style="position:absolute;left:0px;top:0px;width:312px;height:156px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V137.5 L293.5,155.5 H18.5 L0.5,137.5 V18.5 Z" fill="#EFEFF0"/></svg>
<svg aria-label="Buchhaltung" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25;color:#505057">Buchhaltung</p>
</div>
<div style="position:relative;width:312px;height:156px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 156" width="312" height="156" style="position:absolute;left:0px;top:0px;width:312px;height:156px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V137.5 L293.5,155.5 H18.5 L0.5,137.5 V18.5 Z" fill="#EFEFF0"/></svg>
<svg aria-label="Lager" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z"/><path d="M6 18h12"/><path d="M6 14h12"/><rect width="12" height="12" x="6" y="10"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25;color:#505057">Lager</p>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:20px">
<p style="font-size:32px;font-weight:600">Kommt mit HiveGrid dazu</p>
<div style="display:flex;flex-direction:row;gap:26px">
<div style="position:relative;width:312px;height:200px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 200" width="312" height="200" style="position:absolute;left:0px;top:0px;width:312px;height:200px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V181.5 L293.5,199.5 H18.5 L0.5,181.5 V18.5 Z" fill="#F1B729"/></svg>
<svg aria-label="Leads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><path d="m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15"/><path d="m5 8 4 4"/><path d="m12 15 4 4"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25">Anfragen und Vertrieb</p>
</div>
<div style="position:relative;width:312px;height:200px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 200" width="312" height="200" style="position:absolute;left:0px;top:0px;width:312px;height:200px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V181.5 L293.5,199.5 H18.5 L0.5,181.5 V18.5 Z" fill="#F1B729"/></svg>
<svg aria-label="Pipelines" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><rect x="7" y="7" width="3" height="9"/><rect x="14" y="7" width="3" height="5"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25">Projekte und Abwicklung</p>
</div>
<div style="position:relative;width:312px;height:200px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 200" width="312" height="200" style="position:absolute;left:0px;top:0px;width:312px;height:200px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V181.5 L293.5,199.5 H18.5 L0.5,181.5 V18.5 Z" fill="#F1B729"/></svg>
<svg aria-label="Automationen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><rect x="3" y="3" width="8" height="8" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25">Automationen</p>
</div>
<div style="position:relative;width:312px;height:200px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 200" width="312" height="200" style="position:absolute;left:0px;top:0px;width:312px;height:200px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V181.5 L293.5,199.5 H18.5 L0.5,181.5 V18.5 Z" fill="#F1B729"/></svg>
<svg aria-label="Team-Chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25">Team-Chat und Personal</p>
</div>
<div style="position:relative;width:312px;height:200px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 200" width="312" height="200" style="position:absolute;left:0px;top:0px;width:312px;height:200px"><path d="M18.5,0.5 H293.5 L311.5,18.5 V181.5 L293.5,199.5 H18.5 L0.5,181.5 V18.5 Z" fill="#F1B729"/></svg>
<svg aria-label="Passwort-Safe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:44px;height:44px"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<p style="position:absolute;left:28px;top:92px;width:256px;font-size:32px;line-height:1.25">Passwort-Safe</p>
</div>
</div>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Einstieg</p>
</div>
<aside>Noah
Kern: Rechnungen, Buchhaltung und Lager bleiben im Branchenprogramm.
- Damit das gleich klar ist: Das macht HiveGrid nicht.
- Und das mit Absicht.
Achtung: nicht weiter rechtfertigen.</aside>
</section>
</div><p class="notiz"><b>5, bleibt</b>
Noah
Kern: Rechnungen, Buchhaltung und Lager bleiben im Branchenprogramm.
- Damit das gleich klar ist: Das macht HiveGrid nicht.
- Und das mit Absicht.
Achtung: nicht weiter rechtfertigen.</p></div><div class="folie" id="f6" data-sid="heute"><div class="rahmen"><section id="heute" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;justify-content:space-between;gap:64px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px">Was heute kommt.</h2>
<div style="display:flex;flex-direction:row;gap:32px;align-items:start">
<div style="flex:1;display:flex;flex-direction:column;gap:28px;border-top:2px solid #24242B;padding:32px 0 0 0">
<div style="position:relative;width:96px;height:96px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" width="56" height="56" style="position:absolute;left:0px;top:0px;width:96px;height:96px"><path d="M3 28 L15.5 6.4 L40.5 6.4 L53 28 L40.5 49.6 L15.5 49.6 Z" fill="#FCE48A" stroke="#24242B" stroke-width="1.3" stroke-linejoin="round"/></svg>
<svg aria-label="Pipelines" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:40px;height:40px"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><rect x="7" y="7" width="3" height="9"/><rect x="14" y="7" width="3" height="5"/></svg>
</div>
<p style="font-size:32px;line-height:1.3">Von der Anfrage zum Auftrag</p>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:28px;border-top:2px solid #24242B;padding:32px 0 0 0">
<div style="position:relative;width:96px;height:96px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" width="56" height="56" style="position:absolute;left:0px;top:0px;width:96px;height:96px"><path d="M3 28 L15.5 6.4 L40.5 6.4 L53 28 L40.5 49.6 L15.5 49.6 Z" fill="#FCE48A" stroke="#24242B" stroke-width="1.3" stroke-linejoin="round"/></svg>
<svg aria-label="Automationen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:40px;height:40px"><rect x="3" y="3" width="8" height="8" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>
</div>
<p style="font-size:32px;line-height:1.3">Das Herzstück: Automatisierung</p>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:28px;border-top:2px solid #24242B;padding:32px 0 0 0">
<div style="position:relative;width:96px;height:96px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" width="56" height="56" style="position:absolute;left:0px;top:0px;width:96px;height:96px"><path d="M3 28 L15.5 6.4 L40.5 6.4 L53 28 L40.5 49.6 L15.5 49.6 Z" fill="#FCE48A" stroke="#24242B" stroke-width="1.3" stroke-linejoin="round"/></svg>
<svg aria-label="Team-Chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:40px;height:40px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<p style="font-size:32px;line-height:1.3">Alles drumherum: Chat, Personal, Passwörter</p>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:28px;border-top:2px solid #24242B;padding:32px 0 0 0">
<div style="position:relative;width:96px;height:96px">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" width="56" height="56" style="position:absolute;left:0px;top:0px;width:96px;height:96px"><path d="M3 28 L15.5 6.4 L40.5 6.4 L53 28 L40.5 49.6 L15.5 49.6 Z" fill="#FCE48A" stroke="#24242B" stroke-width="1.3" stroke-linejoin="round"/></svg>
<svg aria-label="Überraschung" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:28px;top:28px;width:40px;height:40px"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
</div>
<p style="font-size:32px;line-height:1.3">Zum Schluss: eine Überraschung</p>
</div>
</div>
<p style="font-size:32px;color:#505057">Fragen jederzeit in den Chat. Wir beantworten sie am Ende.</p>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Einstieg</p>
</div>
<aside>Noah
Kern: drei Teile, am Ende eine Überraschung.
- Wie aus einer Anfrage ein Auftrag wird.
- Das Herzstück: Automatisierung.
- Alles, was sonst im Betrieb verstreut ist.
- Am Ende gibt es eine Überraschung, nur für alle, die dabei sind.
- Fragen jederzeit in den Chat.</aside>
</section>
</div><p class="notiz"><b>6, heute</b>
Noah
Kern: drei Teile, am Ende eine Überraschung.
- Wie aus einer Anfrage ein Auftrag wird.
- Das Herzstück: Automatisierung.
- Alles, was sonst im Betrieb verstreut ist.
- Am Ende gibt es eine Überraschung, nur für alle, die dabei sind.
- Fragen jederzeit in den Chat.</p></div><div class="folie" id="f7" data-sid="teil1"><div class="rahmen"><section id="teil1" data-transition="fade" style="background:#24242B;color:#FAFAFA;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:end;gap:40px">
<img src="bilder/wabe-ecke.png" alt="" style="position:absolute;left:1160px;top:0px;width:760px;height:560px;object-fit:contain">
<p style="font-size:32px;color:#9D9DA0">Teil 1. CRM: Marketing und Vertrieb</p>
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Von der Anfrage bis zur <span style="color:#F1B729">Abnahme.</span></h1>
<aside>Noah, dann David
Kern: Von der Anfrage bis zur Abnahme ist es eine Akte.
- Anfragen kommen über alle Wege: Telefon, Website, auf der Baustelle.
- Die eine landet im Postfach, die andere auf einem Zettel.
- Und wenn das Angebot raus ist, fragt keiner nach.
Danach David mit den Screenshots.
Achtung: keine Newsletter versprechen.</aside>
</section>
</div><p class="notiz"><b>7, teil1</b>
Noah, dann David
Kern: Von der Anfrage bis zur Abnahme ist es eine Akte.
- Anfragen kommen über alle Wege: Telefon, Website, auf der Baustelle.
- Die eine landet im Postfach, die andere auf einem Zettel.
- Und wenn das Angebot raus ist, fragt keiner nach.
Danach David mit den Screenshots.
Achtung: keine Newsletter versprechen.</p></div><div class="folie" id="f8" data-sid="anfrage"><div class="rahmen"><section id="anfrage" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Jeder Weg führt an dieselbe Stelle.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Ein Formular für die Website, den Flyer oder den Firmenwagen. Jede Anfrage landet in HiveGrid.</p>
</div>
<img src="screenshots/S01.png" alt="HiveGrid, Formular „Beratung und Vor-Ort-Termin“ im Embed Studio mit öffentlichem Link und QR-Code" style="width:1120px;height:700px;object-fit:cover;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>David
Kern: Jeder Weg führt an dieselbe Stelle.
- Ein Formular für die Website, den Flyer oder den Firmenwagen.
- Jede Anfrage landet in HiveGrid.
- Nichts geht verloren.</aside>
</section>
</div><p class="notiz"><b>8, anfrage</b>
David
Kern: Jeder Weg führt an dieselbe Stelle.
- Ein Formular für die Website, den Flyer oder den Firmenwagen.
- Jede Anfrage landet in HiveGrid.
- Nichts geht verloren.</p></div><div class="folie" id="f9" data-sid="arbeitsliste"><div class="rahmen"><section id="arbeitsliste" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Was liegen bleibt, fällt auf.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Formular, Buchung oder Anruf: Alles landet in einer Liste, sortiert nach Dringlichkeit.</p>
</div>
<img src="screenshots/S02.png" alt="HiveGrid, Lead-Liste mit der Spalte Nächste Aktion" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>David
Kern: Was liegen bleibt, fällt auf.
- Formular, Buchung, Anruf: Alles landet in einer Liste.
- Das Überfällige steht oben.
- Bei jeder Anfrage steht, was als Nächstes dran ist.</aside>
</section>
</div><p class="notiz"><b>9, arbeitsliste</b>
David
Kern: Was liegen bleibt, fällt auf.
- Formular, Buchung, Anruf: Alles landet in einer Liste.
- Das Überfällige steht oben.
- Bei jeder Anfrage steht, was als Nächstes dran ist.</p></div><div class="folie" id="f10" data-sid="konvertieren"><div class="rahmen"><section id="konvertieren" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Aus der Anfrage wird ein Projekt.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Kontakt, Firma und Projekt entstehen in einem Schritt. Niemand tippt etwas zweimal ab.</p>
</div>
<img src="screenshots/S03.png" alt="HiveGrid, Dialog Lead zu Projekt konvertieren, Schritt Projektziel" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>David
Kern: Niemand tippt etwas zweimal ab.
- Passt die Anfrage, wird daraus ein Projekt.
- Kontakt und Firma legt HiveGrid gleich mit an.</aside>
</section>
</div><p class="notiz"><b>10, konvertieren</b>
David
Kern: Niemand tippt etwas zweimal ab.
- Passt die Anfrage, wird daraus ein Projekt.
- Kontakt und Firma legt HiveGrid gleich mit an.</p></div><div class="folie" id="f11" data-sid="pipelines"><div class="rahmen"><section id="pipelines" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Bekommen wir den Auftrag?</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Die Vertriebs-Pipeline. Jede Karte ist ein Projekt, jede Spalte ein Schritt im Verkauf.</p>
</div>
<img src="screenshots/S04.png" alt="HiveGrid, Vertriebs-Pipeline als Karten" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>Noah
Kern: Bekommen wir den Auftrag?
- Jede Karte ist ein Projekt.
- Jede Spalte ist ein Schritt im Verkauf.
- Mit eigenem Vertrieb bleibt so kein Angebot liegen.</aside>
</section>
</div><p class="notiz"><b>11, pipelines</b>
Noah
Kern: Bekommen wir den Auftrag?
- Jede Karte ist ein Projekt.
- Jede Spalte ist ein Schritt im Verkauf.
- Mit eigenem Vertrieb bleibt so kein Angebot liegen.</p></div><div class="folie" id="f12" data-sid="abwicklung"><div class="rahmen"><section id="abwicklung" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Wie bringen wir ihn sauber durch?</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Die Projekt-Pipeline. Es bleibt dieselbe Akte. Kunde, Adresse, Notizen und Dateien kommen mit.</p>
</div>
<img src="screenshots/S05.png" alt="HiveGrid, Auftrags-Pipeline als Karten" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>Noah
Kern: Wie bringen wir ihn sauber durch?
- Früher hatte der Vertrieb seine Liste und die Montage ihre.
- Hier ist es dieselbe Akte.
- Kleiner Betrieb? Dann reicht oft dieses Board.</aside>
</section>
</div><p class="notiz"><b>12, abwicklung</b>
Noah
Kern: Wie bringen wir ihn sauber durch?
- Früher hatte der Vertrieb seine Liste und die Montage ihre.
- Hier ist es dieselbe Akte.
- Kleiner Betrieb? Dann reicht oft dieses Board.</p></div><div class="folie" id="f13" data-sid="uebergabe"><div class="rahmen"><section id="uebergabe" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Gewonnen. Was geht mit in die Abwicklung?</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Du wählst Notizen, Dateien, Aufgaben und Termine aus. Die Montage fängt nicht bei null an.</p>
</div>
<img src="screenshots/S06.png" alt="HiveGrid, Dialog Übergabe auswählen" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 1: CRM, Marketing und Vertrieb</p>
</div>
<aside>David, dann Noah
Kern: Beim Wechsel in die Abwicklung geht alles Wichtige mit.
- David: Ich ziehe das Projekt auf „Gewonnen“. HiveGrid fragt, was mitgeht.
- Noah: Für mich der wichtigste Moment.
Achtung: Vertrieb und Abwicklung sind nur im Demo-Betrieb verbunden. Nicht sagen: „in zwei Klicks eingestellt“.
Übergang David: Bis hier war alles Handarbeit. Was davon muss eigentlich ein Mensch machen?</aside>
</section>
</div><p class="notiz"><b>13, uebergabe</b>
David, dann Noah
Kern: Beim Wechsel in die Abwicklung geht alles Wichtige mit.
- David: Ich ziehe das Projekt auf „Gewonnen“. HiveGrid fragt, was mitgeht.
- Noah: Für mich der wichtigste Moment.
Achtung: Vertrieb und Abwicklung sind nur im Demo-Betrieb verbunden. Nicht sagen: „in zwei Klicks eingestellt“.
Übergang David: Bis hier war alles Handarbeit. Was davon muss eigentlich ein Mensch machen?</p></div><div class="folie" id="f14" data-sid="teil2"><div class="rahmen"><section id="teil2" data-transition="fade" style="background:#24242B;color:#FAFAFA;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:end;gap:40px">
<img src="bilder/wabe-ecke.png" alt="" style="position:absolute;left:1160px;top:0px;width:760px;height:560px;object-fit:contain">
<p style="font-size:32px;color:#9D9DA0">Teil 2. Herzstück Automatisierung</p>
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Was davon muss eigentlich ein <span style="color:#F1B729">Mensch</span> machen?</h1>
<aside>Noah
Kern: Automatisierung ist eingebaut. Ohne Agentur.
- Von Automatisierung hört man ständig.
- Was das im eigenen Betrieb heißt, hat mir keiner gezeigt.
- Bei uns: Gerechnet war das Angebot schnell. Gescheitert ist es am Nachfassen.
- [Eigene Erfahrung mit Zapier und n8n.]</aside>
</section>
</div><p class="notiz"><b>14, teil2</b>
Noah
Kern: Automatisierung ist eingebaut. Ohne Agentur.
- Von Automatisierung hört man ständig.
- Was das im eigenen Betrieb heißt, hat mir keiner gezeigt.
- Bei uns: Gerechnet war das Angebot schnell. Gescheitert ist es am Nachfassen.
- [Eigene Erfahrung mit Zapier und n8n.]</p></div><div class="folie" id="f15" data-sid="vorlagen"><div class="rahmen"><section id="vorlagen" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Eingebaut, mit fertigen Vorlagen.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Du brauchst kein Zusatzprogramm und keine Agentur. Für SHK-Betriebe gibt es fertige Vorlagen.</p>
</div>
<img src="screenshots/S07.png" alt="HiveGrid, Vorlagen für Automationen" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 2: Automatisierung</p>
</div>
<aside>David
Kern: kein Zusatzprogramm, keine Agentur.
- Eine Automation ist eine Regel: Wenn das passiert, dann mach das.
- Das ist in HiveGrid eingebaut.
- Und du fängst mit fertigen Vorlagen an.
Achtung: keine KI im Editor versprechen.</aside>
</section>
</div><p class="notiz"><b>15, vorlagen</b>
David
Kern: kein Zusatzprogramm, keine Agentur.
- Eine Automation ist eine Regel: Wenn das passiert, dann mach das.
- Das ist in HiveGrid eingebaut.
- Und du fängst mit fertigen Vorlagen an.
Achtung: keine KI im Editor versprechen.</p></div><div class="folie" id="f16" data-sid="nachfassen"><div class="rahmen"><section id="nachfassen" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Wenn das passiert, dann mach das.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Kommt ein Projekt auf „Angebot versendet“, steht drei Tage später die Aufgabe zum Nachfassen da. Der Chef weiß Bescheid.</p>
</div>
<img src="screenshots/S08.png" alt="HiveGrid, Automation Angebot nachfassen im Editor" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 2: Automatisierung</p>
</div>
<aside>David
Kern: Die Automation hängt an der Pipeline.
- Projekt kommt auf „Angebot versendet“.
- Drei Tage später steht die Aufgabe „Angebot nachfassen“ da.
- Der Chef bekommt Bescheid.
- Die Notiz daneben erklärt, was die Automation macht.
Achtung: Die Benachrichtigung kommt nur in HiveGrid an, nicht per Mail oder aufs Handy.</aside>
</section>
</div><p class="notiz"><b>16, nachfassen</b>
David
Kern: Die Automation hängt an der Pipeline.
- Projekt kommt auf „Angebot versendet“.
- Drei Tage später steht die Aufgabe „Angebot nachfassen“ da.
- Der Chef bekommt Bescheid.
- Die Notiz daneben erklärt, was die Automation macht.
Achtung: Die Benachrichtigung kommt nur in HiveGrid an, nicht per Mail oder aufs Handy.</p></div><div class="folie" id="f17" data-sid="ohneangst"><div class="rahmen"><section id="ohneangst" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:40px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Nichts läuft, ohne dass du es einschaltest.</h2>
<div style="display:flex;flex-direction:column">
<div style="display:flex;flex-direction:row;gap:24px;align-items:stretch">
<div style="width:48px;display:flex;flex-direction:column;align-items:center">
<div style="width:48px;height:48px;border:2px solid #24242B;border-radius:24px;display:flex;align-items:center;justify-content:center"><p style="font-size:24px;font-weight:600;line-height:1">1</p></div>
<div style="width:2px;flex:1;min-height:28px;background:#CECECF"></div>
</div>
<p style="flex:1;font-size:32px;line-height:1.3;padding:4px 0 40px 0">Startet als Entwurf</p>
</div>
<div style="display:flex;flex-direction:row;gap:24px;align-items:stretch">
<div style="width:48px;display:flex;flex-direction:column;align-items:center">
<div style="width:48px;height:48px;border:2px solid #24242B;border-radius:24px;display:flex;align-items:center;justify-content:center"><p style="font-size:24px;font-weight:600;line-height:1">2</p></div>
<div style="width:2px;flex:1;min-height:28px;background:#CECECF"></div>
</div>
<p style="flex:1;font-size:32px;line-height:1.3;padding:4px 0 40px 0">Probelauf ohne Wirkung</p>
</div>
<div style="display:flex;flex-direction:row;gap:24px;align-items:stretch">
<div style="width:48px;display:flex;flex-direction:column;align-items:center">
<div style="width:48px;height:48px;border:2px solid #24242B;border-radius:24px;display:flex;align-items:center;justify-content:center"><p style="font-size:24px;font-weight:600;line-height:1">3</p></div>
<div style="width:2px;flex:1;min-height:28px;background:#CECECF"></div>
</div>
<p style="flex:1;font-size:32px;line-height:1.3;padding:4px 0 40px 0">Läuft erst, wenn du sie einschaltest</p>
</div>
<div style="display:flex;flex-direction:row;gap:24px;align-items:stretch">
<div style="width:48px;display:flex;flex-direction:column;align-items:center">
<div style="width:48px;height:48px;border:2px solid #24242B;border-radius:24px;display:flex;align-items:center;justify-content:center"><p style="font-size:24px;font-weight:600;line-height:1">4</p></div>
<div style="width:2px;flex:1;min-height:28px;background:#CECECF"></div>
</div>
<p style="flex:1;font-size:32px;line-height:1.3;padding:4px 0 40px 0">Jeder Schritt sichtbar</p>
</div>
<div style="display:flex;flex-direction:row;gap:24px;align-items:start">
<div style="width:48px;height:48px;border:2px solid #24242B;border-radius:24px;display:flex;align-items:center;justify-content:center"><p style="font-size:24px;font-weight:600;line-height:1">5</p></div>
<p style="flex:1;font-size:32px;line-height:1.3;padding:4px 0 0 0">Aufgaben 24 Stunden rückgängig</p>
</div>
</div>
</div>
<img src="screenshots/S09.png" alt="HiveGrid, Lauf einer Automation mit Rückgängig-Zeitfenster" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 2: Automatisierung</p>
</div>
<aside>Noah, dann David
Kern: Nichts läuft, ohne dass du es einschaltest.
- Noah: Meine größte Sorge war: Die Automation macht Unsinn, und keiner merkt es.
- David: Jede Automation startet als Entwurf.
- Vorher testen, ohne dass etwas passiert.
- Danach ist jeder Lauf sichtbar.
- Aufgaben lassen sich 24 Stunden lang zurücknehmen. Eine Mail holt keiner zurück, dafür ist der Test da.
Achtung: nicht sagen, dass sich alles zurückdrehen lässt.</aside>
</section>
</div><p class="notiz"><b>17, ohneangst</b>
Noah, dann David
Kern: Nichts läuft, ohne dass du es einschaltest.
- Noah: Meine größte Sorge war: Die Automation macht Unsinn, und keiner merkt es.
- David: Jede Automation startet als Entwurf.
- Vorher testen, ohne dass etwas passiert.
- Danach ist jeder Lauf sichtbar.
- Aufgaben lassen sich 24 Stunden lang zurücknehmen. Eine Mail holt keiner zurück, dafür ist der Test da.
Achtung: nicht sagen, dass sich alles zurückdrehen lässt.</p></div><div class="folie" id="f18" data-sid="stoerung"><div class="rahmen"><section id="stoerung" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Die Automation kann auch entscheiden.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Ist es eine Störung, entsteht eine dringende Aufgabe für morgen. Ist es eine Wartung, eine normale in drei Tagen.</p>
</div>
<img src="screenshots/S10.png" alt="HiveGrid, Automation mit Ja-Nein-Zweig für Störung oder Wartung" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 2: Automatisierung</p>
</div>
<aside>David
Kern: Die Automation kann entscheiden.
- Störung: dringende Aufgabe für morgen.
- Wartung: normale Aufgabe in drei Tagen.
- Der Notdienst geht nicht mehr unter.</aside>
</section>
</div><p class="notiz"><b>18, stoerung</b>
David
Kern: Die Automation kann entscheiden.
- Störung: dringende Aufgabe für morgen.
- Wartung: normale Aufgabe in drei Tagen.
- Der Notdienst geht nicht mehr unter.</p></div><div class="folie" id="f19" data-sid="branche"><div class="rahmen"><section id="branche" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Auch dein Branchenprogramm kann eine Automation starten.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Entsteht dort ein neues Projekt, läuft in HiveGrid ein Ablauf los. Heute mit KWP und PDS.</p>
<div style="display:flex;flex-direction:row;gap:56px;align-items:center;padding:16px 0 0 0">
<img src="bilder/kwp.png" alt="KWP" style="width:96px;height:96px;object-fit:contain">
<img src="bilder/pds.png" alt="PDS" style="width:152px;height:77px;object-fit:contain">
</div>
</div>
<img src="screenshots/S11.png" alt="HiveGrid, Auslöser Projekt wurde angelegt, ausgelöst durch PDS" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 2: Automatisierung</p>
</div>
<aside>David, dann Noah
Kern: Auch KWP oder PDS können eine Automation starten.
- David: Entsteht dort ein neues Projekt, läuft in HiveGrid ein Ablauf los.
- Noah: Das Branchenprogramm bleibt. Aber es redet jetzt mit dem Rest.
- Noah: So wachsen wir, ohne dass das Büro im selben Tempo mitwächst.
Achtung: keine gesparten Stunden oder Stellen nennen. Logos von KWP und PDS freigeben lassen.
Übergang Noah: Bisher ging es um Kunden und Aufträge. Aber ein Betrieb besteht aus Leuten.</aside>
</section>
</div><p class="notiz"><b>19, branche</b>
David, dann Noah
Kern: Auch KWP oder PDS können eine Automation starten.
- David: Entsteht dort ein neues Projekt, läuft in HiveGrid ein Ablauf los.
- Noah: Das Branchenprogramm bleibt. Aber es redet jetzt mit dem Rest.
- Noah: So wachsen wir, ohne dass das Büro im selben Tempo mitwächst.
Achtung: keine gesparten Stunden oder Stellen nennen. Logos von KWP und PDS freigeben lassen.
Übergang Noah: Bisher ging es um Kunden und Aufträge. Aber ein Betrieb besteht aus Leuten.</p></div><div class="folie" id="f20" data-sid="teil3"><div class="rahmen"><section id="teil3" data-transition="fade" style="background:#24242B;color:#FAFAFA;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:end;gap:40px">
<img src="bilder/wabe-ecke.png" alt="" style="position:absolute;left:1160px;top:0px;width:760px;height:560px;object-fit:contain">
<p style="font-size:32px;color:#9D9DA0">Teil 3. Das Drumherum</p>
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Ein Betrieb besteht aus <span style="color:#F1B729">Leuten.</span></h1>
<aside>Noah, dann David
Kern: alles an einem Ort, Datenschutz eingebaut.
- Bei uns lief alles über eine WhatsApp-Gruppe.
- Fotos, Urlaub, Material, alles durcheinander.
- Für Mitteilungen eine extra App, der Urlaub in Excel.
- Das Passwort fürs Großhändler-Portal klebte am Bildschirm.</aside>
</section>
</div><p class="notiz"><b>20, teil3</b>
Noah, dann David
Kern: alles an einem Ort, Datenschutz eingebaut.
- Bei uns lief alles über eine WhatsApp-Gruppe.
- Fotos, Urlaub, Material, alles durcheinander.
- Für Mitteilungen eine extra App, der Urlaub in Excel.
- Das Passwort fürs Großhändler-Portal klebte am Bildschirm.</p></div><div class="folie" id="f21" data-sid="chat"><div class="rahmen"><section id="chat" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;justify-content:space-between;align-items:start">
<div style="width:1021px;display:flex;flex-direction:column;gap:40px">
<div style="display:flex;flex-direction:column;gap:16px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Ein Chat pro Projekt.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Aus Nachrichten werden Aufgaben. Auch am Handy, ohne Netz.</p>
</div>
<img src="screenshots/S12.png" alt="HiveGrid, Projektchat mit Menü Aufgabe erstellen" style="width:1021px;height:638px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
</div>
<div style="width:363px;height:792px;background:#24242B;border-radius:60px;padding:14px;flex-shrink:0">
<div style="width:335px;height:764px;background:#FAFAFA;border-radius:47px;overflow:hidden;display:flex;flex-direction:column">
<div style="height:40px;flex-shrink:0;display:flex;justify-content:center;align-items:center">
<div style="width:96px;height:26px;border-radius:13px;background:#24242B"></div>
</div>
<img src="screenshots/S13.png" alt="HiveGrid, Chat-Liste in der App fürs Handy" style="width:335px;height:700px;object-fit:cover;object-position:top;display:block">
<div style="height:24px;flex-shrink:0;background:#FAFAFA"></div>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>David
Kern: Jedes Projekt hat seinen eigenen Chat.
- Die WhatsApp-Gruppe braucht es nicht mehr.
- Aus „Mach das mal“ wird mit einem Klick eine Aufgabe.
- Mit Frist und Namen, direkt im Projekt.
Achtung: Die Version fürs Handy ist noch nicht fertig. Stand vor dem Webinar prüfen.</aside>
</section>
</div><p class="notiz"><b>21, chat</b>
David
Kern: Jedes Projekt hat seinen eigenen Chat.
- Die WhatsApp-Gruppe braucht es nicht mehr.
- Aus „Mach das mal“ wird mit einem Klick eine Aufgabe.
- Mit Frist und Namen, direkt im Projekt.
Achtung: Die Version fürs Handy ist noch nicht fertig. Stand vor dem Webinar prüfen.</p></div><div class="folie" id="f22" data-sid="ankuendigung"><div class="rahmen"><section id="ankuendigung" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Ankündigungen statt Schwarzes Brett.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Mit Lesebestätigung. Du siehst, wer sie gelesen hat.</p>
</div>
<img src="screenshots/S14.png" alt="HiveGrid, Ankündigung mit Lesebestätigungen" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>David
Kern: Mitteilungen an einem Ort, mit Lesebestätigung.
- Statt Zettel am Schwarzen Brett.
- Du siehst, wer sie bestätigt hat.
- Für schnelle Abstimmungen gibt es Umfragen.
Achtung: Ankündigungen schicken keine Benachrichtigung.</aside>
</section>
</div><p class="notiz"><b>22, ankuendigung</b>
David
Kern: Mitteilungen an einem Ort, mit Lesebestätigung.
- Statt Zettel am Schwarzen Brett.
- Du siehst, wer sie bestätigt hat.
- Für schnelle Abstimmungen gibt es Umfragen.
Achtung: Ankündigungen schicken keine Benachrichtigung.</p></div><div class="folie" id="f23" data-sid="plantafel"><div class="rahmen"><section id="plantafel" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Personal hängt an der Plantafel.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Ist ein Nachweis abgelaufen, steht es direkt beim Monteur. Und wer Urlaub hat, fällt beim Planen sofort auf.</p>
</div>
<img src="screenshots/S16.png" alt="HiveGrid, Plantafel mit Nachweis abgelaufen" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>David
Kern: Personal hängt an der Plantafel.
- Unterweisung abgelaufen? Steht direkt beim Monteur.
- HiveGrid erinnert 30 Tage vorher.
- Beim Urlaub siehst du sofort, ob der Monteur eingeplant ist.</aside>
</section>
</div><p class="notiz"><b>23, plantafel</b>
David
Kern: Personal hängt an der Plantafel.
- Unterweisung abgelaufen? Steht direkt beim Monteur.
- HiveGrid erinnert 30 Tage vorher.
- Beim Urlaub siehst du sofort, ob der Monteur eingeplant ist.</p></div><div class="folie" id="f24" data-sid="passwort"><div class="rahmen"><section id="passwort" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">Passwörter an einem Ort.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Nie offen sichtbar, nach 30 Sekunden wieder ausgeblendet. Du siehst, wer sie benutzt hat.</p>
</div>
<img src="screenshots/S17.png" alt="HiveGrid, Passwort-Safe mit Aktivitäten" style="width:1120px;height:700px;object-fit:contain;border:1px solid #CECECF;border-radius:12px;background:#FFFFFF;display:block">
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>David
Kern: Passwörter liegen geschützt an einem Ort.
- Nirgends offen sichtbar, nach 30 Sekunden wieder ausgeblendet.
- Du siehst, wer welches Passwort angesehen hat.
Achtung: nicht „Ende-zu-Ende verschlüsselt“ sagen.</aside>
</section>
</div><p class="notiz"><b>24, passwort</b>
David
Kern: Passwörter liegen geschützt an einem Ort.
- Nirgends offen sichtbar, nach 30 Sekunden wieder ausgeblendet.
- Du siehst, wer welches Passwort angesehen hat.
Achtung: nicht „Ende-zu-Ende verschlüsselt“ sagen.</p></div><div class="folie" id="f25" data-sid="einort"><div class="rahmen"><section id="einort" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:56px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px;width:1400px">Was vorher verteilt war, liegt an einem Ort.</h2>
<div style="display:flex;flex-direction:column">
<div style="display:flex;flex-direction:row;gap:32px;padding:0 0 12px 0">
<p style="font-size:24px;color:#6D6D71;width:520px">Vorher</p>
<p style="font-size:24px;color:#6D6D71;flex:1">In HiveGrid</p>
</div>
<div style="display:flex;flex-direction:row;gap:32px;align-items:center;border-top:1px solid #CECECF;padding:18px 0 18px 0">
<div style="width:520px;display:flex;flex-direction:row;gap:20px;align-items:center">
<img src="bilder/whatsapp.png" alt="WhatsApp" style="width:40px;height:40px;object-fit:contain">
<p style="font-size:32px;color:#6D6D71">WhatsApp</p>
</div>
<div style="flex:1;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Team-Chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<p style="font-size:32px">Ein Chat pro Projekt. Aus Nachrichten werden Aufgaben.</p>
</div>
</div>
<div style="display:flex;flex-direction:row;gap:32px;align-items:center;border-top:1px solid #CECECF;padding:18px 0 18px 0">
<div style="width:520px;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Handy-App" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
<p style="font-size:32px;color:#6D6D71">Extra App für Mitteilungen</p>
</div>
<div style="flex:1;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Ankündigungen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
<p style="font-size:32px">Ankündigungen mit Lesebestätigung</p>
</div>
</div>
<div style="display:flex;flex-direction:row;gap:32px;align-items:center;border-top:1px solid #CECECF;padding:18px 0 18px 0">
<div style="width:520px;display:flex;flex-direction:row;gap:20px;align-items:center">
<img src="bilder/excel.png" alt="Excel" style="width:40px;height:38px;object-fit:contain">
<p style="font-size:32px;color:#6D6D71">Urlaubsliste in Excel</p>
</div>
<div style="flex:1;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Kalender" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
<p style="font-size:32px">Urlaub mit Blick auf die Plantafel</p>
</div>
</div>
<div style="display:flex;flex-direction:row;gap:32px;align-items:center;border-top:1px solid #CECECF;padding:18px 0 18px 0">
<div style="width:520px;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Liste" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>
<p style="font-size:32px;color:#6D6D71">Fristenliste</p>
</div>
<div style="flex:1;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Nachweise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
<p style="font-size:32px">Nachweise mit Erinnerung 30 Tage vorher</p>
</div>
</div>
<div style="display:flex;flex-direction:row;gap:32px;align-items:center;border-top:1px solid #CECECF;border-bottom:1px solid #CECECF;padding:18px 0 18px 0">
<div style="width:520px;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Notizzettel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#6D6D71" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"/><path d="M15 3v6h6"/></svg>
<p style="font-size:32px;color:#6D6D71">Passwort am Bildschirm</p>
</div>
<div style="flex:1;display:flex;flex-direction:row;gap:20px;align-items:center">
<svg aria-label="Passwort-Safe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<p style="font-size:32px">Passwort-Safe mit Protokoll</p>
</div>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>Noah
Kern: Was vorher verteilt war, liegt an einem Ort.
- Nicht mehr Gruppe, App, Liste und Zettel.
- David kann ergänzen: Wird ein Urlaub genehmigt, kann eine Automation eine Aufgabe „Vertretung klären“ anlegen. Nur sagen, nicht zeigen.
Achtung: keine Zeiterfassung, kein Sprache-zu-Text versprechen.</aside>
</section>
</div><p class="notiz"><b>25, einort</b>
Noah
Kern: Was vorher verteilt war, liegt an einem Ort.
- Nicht mehr Gruppe, App, Liste und Zettel.
- David kann ergänzen: Wird ein Urlaub genehmigt, kann eine Automation eine Aufgabe „Vertretung klären“ anlegen. Nur sagen, nicht zeigen.
Achtung: keine Zeiterfassung, kein Sprache-zu-Text versprechen.</p></div><div class="folie" id="f26" data-sid="datenschutz"><div class="rahmen"><section id="datenschutz" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:64px">
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px;width:1300px">Datenschutz musst du nicht selbst können.</h2>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px">
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<div style="height:48px;display:flex;flex-direction:row;align-items:center">
<svg aria-label="Flagge Deutschland" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" width="5" height="3" style="width:60px;height:36px"><rect x="0" y="0" width="5" height="1" fill="#000000"/><rect x="0" y="1" width="5" height="1" fill="#DD0000"/><rect x="0" y="2" width="5" height="1" fill="#FFCE00"/></svg>
</div>
<p style="font-size:32px;font-weight:600;line-height:1.2">Server in Deutschland</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Server und Daten liegen in Falkenstein, Sachsen.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<svg aria-label="Getrennt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:48px;height:48px"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><line x1="12" x2="12" y1="3" y2="21"/></svg>
<p style="font-size:32px;font-weight:600;line-height:1.2">Strikt getrennt</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Jeder Betrieb ist in der Datenbank von den anderen getrennt.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<svg aria-label="Schlüssel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:48px;height:48px"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r="0.5"/></svg>
<p style="font-size:32px;font-weight:600;line-height:1.2">Eigener Schlüssel</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Zugangsdaten zu deinen Programmen sind pro Betrieb verschlüsselt.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<svg aria-label="Schild" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:48px;height:48px"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
<p style="font-size:32px;font-weight:600;line-height:1.2">Virenprüfung</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Jede hochgeladene Datei wird geprüft.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<svg aria-label="Keine KI" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:48px;height:48px"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
<p style="font-size:32px;font-weight:600;line-height:1.2">Keine US-KI im Produkt</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Deine Daten trainieren keine KI.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;border-top:2px solid #24242B;padding:24px 0 0 0">
<svg aria-label="Einwilligung" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:48px;height:48px"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="m16 19 2 2 4-4"/></svg>
<p style="font-size:32px;font-weight:600;line-height:1.2">Werbemails nur mit Zustimmung</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Kampagnen gehen nur an Kontakte, die zugestimmt haben.</p>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Teil 3: Das Drumherum</p>
</div>
<aside>Noah
Kern: Datenschutz musst du nicht selbst können.
- Damit fühlen sich die meisten Betriebe allein gelassen. Wir auch.
- Deshalb ist er von Anfang an eingebaut.
Achtung: nicht „keine USA“, „100 Prozent in Deutschland“ oder „DSGVO-zertifiziert“ sagen. Vor der App sitzt Cloudflare.</aside>
</section>
</div><p class="notiz"><b>26, datenschutz</b>
Noah
Kern: Datenschutz musst du nicht selbst können.
- Damit fühlen sich die meisten Betriebe allein gelassen. Wir auch.
- Deshalb ist er von Anfang an eingebaut.
Achtung: nicht „keine USA“, „100 Prozent in Deutschland“ oder „DSGVO-zertifiziert“ sagen. Vor der App sitzt Cloudflare.</p></div><div class="folie" id="f27" data-sid="geschenk"><div class="rahmen"><section id="geschenk" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;justify-content:space-between;align-items:start;gap:96px">
<div style="flex:1;display:flex;flex-direction:column;gap:32px">
<p style="font-size:24px;color:#6D6D71">Die Überraschung</p>
<h2 style="font-size:80px;font-weight:600;line-height:1.1;letter-spacing:-1px">Dein Angebot aus dem Webinar.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Nur für alle, die heute dabei sind.</p>
<p style="font-size:32px;line-height:1.4;font-weight:600">[Was es gibt: HiveGrid zum günstigeren Preis oder zuerst eine Demo mit deinem Branchenprogramm]</p>
<p style="font-size:32px;line-height:1.4;color:#505057">Gilt bis [Datum].</p>
</div>
<div style="position:relative;width:560px;height:440px;flex-shrink:0">
<svg aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 440" width="560" height="440" style="position:absolute;left:0px;top:0px;width:560px;height:440px"><path d="M18.5,0.5 H541.5 L559.5,18.5 V421.5 L541.5,439.5 H18.5 L0.5,421.5 V18.5 Z" fill="#EFEFF0"/></svg>
<div style="position:absolute;left:48px;top:48px;right:48px;bottom:48px;display:flex;flex-direction:column;gap:24px">
<svg aria-label="Chat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#24242B" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:56px;height:56px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<p style="font-size:40px;font-weight:600;line-height:1.2">Der Link steht jetzt im Chat.</p>
<p style="font-size:32px;line-height:1.3;font-weight:600">[fester Link]</p>
<p style="font-size:24px;line-height:1.4;color:#6D6D71">Ein Klick, und er öffnet sich direkt im Browser.</p>
</div>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Zum Schluss</p>
</div>
<aside>Noah, dann David
Kern: Ein Angebot nur für die, die heute dabei sind.
- Noah: Versprochen ist versprochen. Hier ist die Überraschung.
- David: Weil du dabei bist, bekommst du [das Angebot].
- David: Der Link steht jetzt im Chat und öffnet sich im Browser.
- Noah: Das gilt nur bis [Datum].
Achtung: Angebot und Frist erst nennen, wenn sie feststehen. Link vorher testen.</aside>
</section>
</div><p class="notiz"><b>27, geschenk</b>
Noah, dann David
Kern: Ein Angebot nur für die, die heute dabei sind.
- Noah: Versprochen ist versprochen. Hier ist die Überraschung.
- David: Weil du dabei bist, bekommst du [das Angebot].
- David: Der Link steht jetzt im Chat und öffnet sich im Browser.
- Noah: Das gilt nur bis [Datum].
Achtung: Angebot und Frist erst nennen, wenn sie feststehen. Link vorher testen.</p></div><div class="folie" id="f28" data-sid="anmeldung"><div class="rahmen"><section id="anmeldung" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:row;gap:64px;align-items:start">
<div style="width:480px;display:flex;flex-direction:column;gap:24px">
<h2 style="font-size:44px;font-weight:600;line-height:1.2">So kommt das Angebot zu dir.</h2>
<p style="font-size:32px;line-height:1.4;color:#505057">Hinter dem Link läuft, was du heute gesehen hast: Formular, Lead, Automation, Mail.</p>
</div>
<div style="width:1120px;height:700px;background:#EFEFF0;border:1px solid #CECECF;border-radius:12px;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:16px">
<p style="font-size:24px;color:#6D6D71">Screenshot S18</p>
<p style="font-size:32px;font-weight:600;line-height:1.3">Automationen › „Webinar-Angebot“ › Bauen</p>
<p style="font-size:24px;line-height:1.4;color:#505057">Zu sehen: „Formular abgeschickt“, dann „E-Mail senden“ und „Aufgabe anlegen“.</p>
<p style="font-size:24px;color:#6D6D71">Querformat 16:10</p>
</div>
<div style="position:absolute;left:128px;right:128px;bottom:64px;height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center">
<img src="bilder/logo.png" alt="HiveGrid" style="width:150px;height:28px;object-fit:contain">
<p style="font-size:24px;color:#6D6D71">Zum Schluss</p>
</div>
<aside>David, dann Noah
Nur wenn das Angebot über ein HiveGrid-Formular läuft.
Kern: Hinter dem Link läuft, was wir heute gezeigt haben.
- David: Deine Anfrage landet bei uns als Lead. Eine Automation schickt dir die Mail.
- Noah: Erst mit deinem Branchenprogramm sehen? Buch dir eine Demo.
Für den Screenshot: Diese Automation gibt es noch nicht.
Achtung: die Strecke vorher testen.</aside>
</section>
</div><p class="notiz"><b>28, anmeldung</b>
David, dann Noah
Nur wenn das Angebot über ein HiveGrid-Formular läuft.
Kern: Hinter dem Link läuft, was wir heute gezeigt haben.
- David: Deine Anfrage landet bei uns als Lead. Eine Automation schickt dir die Mail.
- Noah: Erst mit deinem Branchenprogramm sehen? Buch dir eine Demo.
Für den Screenshot: Diese Automation gibt es noch nicht.
Achtung: die Strecke vorher testen.</p></div><div class="folie" id="f29" data-sid="fragen"><div class="rahmen"><section id="fragen" data-transition="fade" style="background:#24242B;color:#FAFAFA;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:end;gap:40px">
<p style="font-size:32px;color:#9D9DA0">Fragen aus dem Chat</p>
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Deine <span style="color:#F1B729">Fragen.</span></h1>
<p style="font-size:32px;line-height:1.4;color:#B5B5B7;width:1240px">Dein Angebot aus dem Webinar: Der Link steht im Chat.</p>
<aside>Beide
Kern: ehrlich antworten, auch wenn etwas noch nicht geht.
- Ich lese die Fragen aus dem Chat vor.
- Wechseln? Nein.
- Angebunden? KWP und PDS.
- Rechnungen, DATEV? Nein, bleibt im Branchenprogramm.
- Agentur, Zapier? Nein, eingebaut.
- Handy-App? Stand vor dem Webinar klären.
- Preis? Auf das Angebot verweisen.
Alle Antworten im Sprechzettel.</aside>
</section>
</div><p class="notiz"><b>29, fragen</b>
Beide
Kern: ehrlich antworten, auch wenn etwas noch nicht geht.
- Ich lese die Fragen aus dem Chat vor.
- Wechseln? Nein.
- Angebunden? KWP und PDS.
- Rechnungen, DATEV? Nein, bleibt im Branchenprogramm.
- Agentur, Zapier? Nein, eingebaut.
- Handy-App? Stand vor dem Webinar klären.
- Preis? Auf das Angebot verweisen.
Alle Antworten im Sprechzettel.</p></div><div class="folie" id="f30" data-sid="danke"><div class="rahmen"><section id="danke" data-transition="fade" style="background:#FAFAFA;color:#24242B;font-family:'Mona Sans', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:space-between;gap:48px">
<h1 style="font-size:120px;font-weight:600;line-height:1.05;letter-spacing:-2px">Danke, dass du dabei warst.</h1>
<div style="display:flex;flex-direction:column;width:1100px">
<div style="display:flex;flex-direction:row;gap:32px;border-top:1px solid #CECECF;padding:20px 0 20px 0">
<p style="font-size:32px;color:#6D6D71;width:320px">Webinar-Angebot</p>
<p style="font-size:32px;font-weight:600;flex:1">[fester Link]</p>
</div>
<div style="display:flex;flex-direction:row;gap:32px;border-top:1px solid #CECECF;border-bottom:1px solid #CECECF;padding:20px 0 20px 0">
<p style="font-size:32px;color:#6D6D71;width:320px">Gilt bis</p>
<p style="font-size:32px;font-weight:600;flex:1">[Datum]</p>
</div>
</div>
<img src="bilder/logo.png" alt="HiveGrid" style="width:257px;height:48px;object-fit:contain">
<aside>Noah
- Danke, dass du dabei warst.
- Der Link zum Angebot steht im Chat. Er gilt bis [Datum].
- [Falls es eine Aufzeichnung gibt: Die kommt per Mail.]
- Bis bald.</aside>
</section>
</div><p class="notiz"><b>30, danke</b>
Noah
- Danke, dass du dabei warst.
- Der Link zum Angebot steht im Chat. Er gilt bis [Datum].
- [Falls es eine Aufzeichnung gibt: Die kommt per Mail.]
- Bis bald.</p></div>
<script>
const folien = [...document.querySelectorAll('.folie')];
let aktiv = 0;
function skalieren() {
document.querySelectorAll('.rahmen').forEach(r => {
r.firstElementChild.style.transform = 'scale(' + (r.clientWidth / 1920) + ')';
});
}
// Nach diesen Slides schiebt sich die nächste von unten hoch (uebergaenge.json),
// sonst wird sie eingeblendet wie im Online-Deck.
const HOCH = ["noah"];
let laeuft = null;
function zeige(i) {
const alt = aktiv;
const neu = Math.max(0, Math.min(folien.length - 1, i));
const animiert = document.body.classList.contains('zeigen') && neu !== alt && Math.abs(neu - alt) === 1;
if (laeuft) return;
aktiv = neu;
if (!animiert) {
folien.forEach((f, j) => { f.classList.toggle('aktiv', j === aktiv); f.classList.remove('wechsel'); });
skalieren();
return;
}
const a = folien[alt], n = folien[neu];
a.classList.add('aktiv', 'wechsel'); n.classList.add('aktiv', 'wechsel');
skalieren();
const vor = neu > alt ? 1 : -1;
const hoch = HOCH.includes((vor > 0 ? a : n).dataset.sid);
const ra = a.querySelector('.rahmen'), rn = n.querySelector('.rahmen');
if (hoch) {
// genaue Höhe minus ein Pixel Überlappung, sonst blitzt an der Naht der schwarze Grund durch
const h = rn.getBoundingClientRect().height - 1;
const art = { duration: 800, easing: 'cubic-bezier(.65,0,.35,1)' };
laeuft = [
ra.animate([{ transform: 'translateY(0)' }, { transform: `translateY(${-vor * h}px)` }], art),
rn.animate([{ transform: `translateY(${vor * h}px)` }, { transform: 'translateY(0)' }], art),
];
} else {
n.style.zIndex = 1;
laeuft = [n.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 350, easing: 'ease-out' })];
}
laeuft[0].onfinish = () => {
a.classList.remove('aktiv', 'wechsel'); n.classList.remove('wechsel'); n.style.zIndex = '';
laeuft = null;
};
}
addEventListener('resize', skalieren);
addEventListener('keydown', e => {
if (e.key === 'p' || e.key === 'P') { document.body.classList.add('zeigen'); zeige(aktiv); }
else if (e.key === 'Escape') { document.body.classList.remove('zeigen'); skalieren(); }
else if (document.body.classList.contains('zeigen')) {
if (['ArrowRight', 'ArrowDown', ' ', 'PageDown'].includes(e.key)) zeige(aktiv + 1);
if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) zeige(aktiv - 1);
}
});
document.fonts.ready.then(skalieren);
skalieren();
</script>
</body></html>