Files
HiveGrid-Marketing/E-Mails/Mediakit.html
T
dejanandClaude Opus 5.5 be842e2d07 E-Mails: goldene Linie unter dem Banner und Balken am Zitat entfernt
Terminleiste nur noch mit feiner Linie unten, Zitate kursiv ohne Balken.
Vorschauen, Mediakit und Anleitung angepasst.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 20:49:35 +01:00

261 lines
21 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>Mediakit Mail-Strecke</title>
<!-- Übersicht für Philipp. Als PDF: ./quelle/mediakit.sh -->
<link rel="stylesheet" href="quelle/fonts/manrope.css">
<style>
@font-face { font-family: "Caveat"; font-weight: 500 700; src: url(quelle/fonts/caveat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Literata"; font-weight: 400 700; src: url(quelle/fonts/literata-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; src: url(quelle/fonts/literata-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
:root { --tinte: #1A1A1A; --gold: #F1B729; --gold-dunkel: #8A6800; --gold-hell: #FFF6DA; --grund: #F4F3EF; --linie: #ECEAE3; --grau: #6B6B66; }
* { box-sizing: border-box; }
@page { size: A4; margin: 14mm 14mm 16mm; }
body { margin: 0; background: #fff; color: var(--tinte); font-family: Literata, Georgia, serif; font-size: 14px; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
main { max-width: 820px; margin: 0 auto; padding: 32px 20px 60px; }
h1, h2, h3 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h1 { font-size: 44px; line-height: 1.05; }
h2 { font-size: 26px; margin: 0 0 6px; }
h3 { font-size: 15px; margin: 18px 0 8px; letter-spacing: 0; }
.kicker { font-family: Caveat, cursive; font-weight: 700; font-size: 26px; color: var(--gold-dunkel); }
.strich { background: linear-gradient(transparent 78%, var(--gold) 78%, var(--gold) 92%, transparent 92%); }
.klein { font-size: 12.5px; color: var(--grau); }
.abschnitt { break-before: page; padding-top: 4px; }
.abschnitt > p.einl { margin: 0 0 18px; color: #3A3A37; max-width: 640px; }
.label { font-family: Arial, sans-serif; font-size: 10.5px; font-weight: bold; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-dunkel); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--grund); padding: 1px 5px; border-radius: 3px; }
.titelblatt { display: flex; flex-direction: column; justify-content: space-between; }
@media print { .titelblatt { min-height: 250mm; } }
@media screen { .abschnitt { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--linie); } .einzeln { margin-top: 40px; } }
.titelblatt img.banner { width: 100%; border-radius: 10px; display: block; margin: 26px 0; }
.titelblatt .fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-top: 1px solid var(--linie); padding-top: 14px; }
.titelblatt .fakten b { display: block; font-family: Manrope, sans-serif; font-size: 22px; }
.aufbau { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.aufbau img { width: 300px; border: 1px solid var(--linie); border-radius: 8px; display: block; }
.aufbau ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.aufbau li { counter-increment: n; position: relative; padding: 0 0 12px 40px; }
.aufbau li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 13px; background: var(--gold); font: bold 13px/26px Arial, sans-serif; text-align: center; }
.aufbau li b { font-family: Manrope, sans-serif; }
.farben { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.farbe { border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; break-inside: avoid; }
.farbe .f { height: 64px; }
.farbe div:last-child { padding: 8px 10px; font-size: 12px; }
.farbe b { display: block; font-family: Manrope, sans-serif; font-size: 13px; }
.schriften { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.karte { border: 1px solid var(--linie); border-radius: 10px; padding: 16px 18px; break-inside: avoid; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.knopf { display: inline-block; background: var(--gold); color: var(--tinte); font: bold 16px Arial, sans-serif; padding: 16px 34px; border-radius: 6px; text-decoration: none; }
.muster { border: 1px solid var(--linie); border-radius: 10px; padding: 20px 24px; margin-bottom: 14px; break-inside: avoid; font-family: Georgia, serif; font-size: 16px; }
.muster .name { font-family: Manrope, sans-serif; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.banner-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.banner-raster figure { margin: 0; break-inside: avoid; }
.banner-raster img { width: 100%; display: block; border: 1px solid var(--linie); border-radius: 6px; }
.banner-raster figcaption { font-size: 11.5px; line-height: 1.4; margin-top: 5px; color: #3A3A37; }
.banner-raster figcaption code { font-size: 10.5px; }
.mails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
.mails figure { margin: 0; break-inside: avoid; }
.mails img { width: 100%; display: block; border: 1px solid var(--linie); border-radius: 6px; }
.mails figcaption { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
.mails figcaption b { font-family: Manrope, sans-serif; font-size: 12.5px; display: block; }
.einzeln { break-before: page; text-align: center; }
.einzeln img { max-height: 255mm; max-width: 100%; border: 1px solid var(--linie); border-radius: 6px; }
.einzeln h3 { text-align: left; }
</style>
</head>
<body>
<main>
<!-- Titelblatt -->
<section class="titelblatt">
<div>
<img src="quelle/logo/hivegrid.svg" alt="HiveGrid" style="width:150px;display:block;margin-left:-6px">
<div class="kicker" style="margin-top:40px">Für Philipp, zum Bauen in Mailjet</div>
<h1>Mediakit <span class="strich">Mail-Strecke</span></h1>
<p style="font-size:17px;margin:12px 0 0;max-width:620px">Alles, was du für die Mails zum Webinar am 8. Dezember brauchst: Bilder, Farben, Buttons, Bausteine und jede Mail fertig gebaut. Die Texte kommen aus Noahs PDF, der Look aus dem Heft „Jede Frage lief über meinen Tisch“.</p>
<img class="banner" src="bilder/banner/k02-jede-frage-lief-ueber-meinen-tisch.jpg" alt="">
</div>
<div class="fakten">
<div><span class="label">Mailjet</span><b>14 Mails</b><span class="klein">K1 bis K4, K7 bis K11, B4a bis B6</span></div>
<div><span class="label">WebinarGeek</span><b>4 Mails</b><span class="klein">B0 bis B3, macht Dejan</span></div>
<div><span class="label">Bilder</span><b>21 Dateien</b><span class="klein">18 Banner, Logo, Signatur, Heft</span></div>
</div>
</section>
<!-- Aufbau -->
<section class="abschnitt">
<div class="kicker">So ist jede Mail gebaut</div>
<h2>Aufbau, von oben nach unten</h2>
<p class="einl">Alle Mails folgen derselben Vorlage, die Muster-Mail ist K3 (<code>mails/k03.html</code>). Gebaut wie ein Brief von Noah: viel Text, ein Bild oben, ein klarer Button. Dazu Elemente aus dem Heft wie der goldene Marker, die Unterstreichung und die Skizzen.</p>
<div class="aufbau">
<img src="mails/vorschau/k03.png" alt="Muster-Mail K3">
<ol>
<li><b>Logo</b> über der Karte, mittig, 152 px breit. <span class="klein">logo-hivegrid.png</span></li>
<li><b>Banner</b> ganz oben in der Karte, 600 px. Je Mail ein eigenes, mit Titel und Zeichnung aus dem Heft.</li>
<li><b>Terminleiste</b> mit Wann, Wo und Dauer. In allen Einladungen und Erinnerungen, nicht in K1 und nicht nach dem Webinar.</li>
<li><b>Text</b> aus dem PDF in Georgia 17 px, beginnend mit „Moin [Vorname],“.</li>
<li><b>Zitat</b> kursiv und etwas größer, höchstens eins pro Mail. Der Satz steht im PDF schon so da.</li>
<li><b>Button</b> dort, wo im PDF der Platzhalter steht. Gold, mittig, mit Pfeil.</li>
<li><b>Heft-Kasten</b> ab K3, statt der Zeile „Das Heft dazu, falls du es noch nicht hast“.</li>
<li><b>Gruß und Signatur</b>: „Gruß Noah“, darunter das Bild mit Foto und Namen.</li>
<li><b>PS</b> nach einer feinen Linie.</li>
<li><b>Fuß</b> außerhalb der Karte: warum man die Mail bekommt, Abmelden, Datenschutz, Adresse.</li>
</ol>
</div>
</section>
<!-- Farben und Schrift -->
<section class="abschnitt">
<div class="kicker">Aus den Brand Guidelines und dem Heft</div>
<h2>Farben und Schrift</h2>
<p class="einl">Gold ist die Farbe für alles, was man anklicken oder sehen soll: Buttons, Linien, Kästen. Als Textfarbe auf Weiß ist Gold zu blass. Dafür gibt es das dunkle Gold.</p>
<div class="farben">
<div class="farbe"><div class="f" style="background:#F1B729"></div><div><b>Gold</b>#F1B729<br><span class="klein">Buttons, Linien, Flächen</span></div></div>
<div class="farbe"><div class="f" style="background:#1A1A1A"></div><div><b>Tinte</b>#1A1A1A<br><span class="klein">Text, Schrift auf Buttons</span></div></div>
<div class="farbe"><div class="f" style="background:#8A6800"></div><div><b>Gold dunkel</b>#8A6800<br><span class="klein">Links, kleine Beschriftungen</span></div></div>
<div class="farbe"><div class="f" style="background:#FFF6DA"></div><div><b>Gold hell</b>#FFF6DA<br><span class="klein">Heft-Kasten</span></div></div>
<div class="farbe"><div class="f" style="background:#F4F3EF"></div><div><b>Grund</b>#F4F3EF<br><span class="klein">außen um die Karte</span></div></div>
<div class="farbe"><div class="f" style="background:#FFFFFF"></div><div><b>Karte</b>#FFFFFF<br><span class="klein">Inhalt, Rand #E4E1D8</span></div></div>
<div class="farbe"><div class="f" style="background:#ECEAE3"></div><div><b>Linie</b>#ECEAE3<br><span class="klein">Trennlinien</span></div></div>
<div class="farbe"><div class="f" style="background:#6B6B66"></div><div><b>Grau</b>#6B6B66<br><span class="klein">Fuß</span></div></div>
</div>
<h3>Schrift</h3>
<div class="schriften">
<div class="karte">
<div class="label">In der Mail (Text)</div>
<p style="font-family:Georgia,serif;font-size:17px;line-height:1.65;margin:8px 0 6px">Georgia 17 px: in der Mitte stand KWP. Darin schreiben wir Angebote, Aufträge und Rechnungen.</p>
<p style="font-family:Arial,sans-serif;font-size:14px;margin:0"><b>Arial</b> für Buttons und kleine Beschriftungen</p>
<p class="klein" style="margin:8px 0 0">Läuft in jedem Mailprogramm. Georgia kommt Literata aus dem Heft am nächsten.</p>
</div>
<div class="karte">
<div class="label">In den Bildern (wie im Heft)</div>
<p style="font-family:Manrope,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;margin:8px 0 2px">Manrope für Titel</p>
<p style="font-family:Literata,serif;font-size:17px;margin:0 0 2px">Literata für Unterzeilen</p>
<p style="font-family:Caveat,cursive;font-weight:700;font-size:26px;margin:0;color:#8A6800">Caveat für die Handschrift</p>
<p class="klein" style="margin:8px 0 0">Nur in Bildern, weil viele Mailprogramme diese Schriften nicht anzeigen.</p>
</div>
</div>
<h3>Buttons</h3>
<div class="knoepfe">
<a class="knopf">Platz sichern →</a>
<a class="knopf">Heft lesen →</a>
<a class="knopf">Termin mit Haris aussuchen →</a>
<a class="knopf">Zum Webinar →</a>
</div>
<p class="klein" style="margin:10px 0 0">Fläche #F1B729 · Schrift #1A1A1A, Arial fett 16 px · Innenabstand 16 / 34 px · Ecken 6 px · mittig. Als Button-Baustein in Mailjet bauen, nicht als Bild: Bilder sind bei vielen Empfängern erst einmal ausgeblendet.</p>
</section>
<!-- Bausteine -->
<section class="abschnitt">
<div class="kicker">Zum Nachbauen</div>
<h2>Bausteine</h2>
<p class="einl">So sehen die Bausteine in der Mail aus. Die genauen Werte stehen in <code>README.md</code> unter „Gestaltung“, das HTML in <code>mails/k03.html</code>.</p>
<div class="muster"><div class="name">Terminleiste</div>
<table width="100%" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #ECEAE3"><tr>
<td style="padding:12px 10px 12px 0"><div class="label">Wann</div><b>Di, 8. Dezember, 18 Uhr</b></td>
<td style="padding:12px 10px"><div class="label">Wo</div><b>Live im Browser</b></td>
<td style="padding:12px 0 12px 10px"><div class="label">Dauer</div><b>Eine Stunde</b></td>
</tr></table>
</div>
<div class="muster"><div class="name">Zitat</div>
<div style="font-style:italic;font-size:20px;line-height:1.45">Die Brücke zwischen den Inseln war ein Mensch. Meistens ich.</div>
</div>
<div class="muster"><div class="name">Liste</div>
<div style="display:flex;gap:10px;margin-bottom:8px"><span style="flex:none;width:26px;height:26px;border-radius:13px;background:#F1B729;font:bold 14px/26px Arial;text-align:center">1</span>Wo wir sehen, welche Anfrage offen ist, wer dran ist und was als Nächstes ansteht, live am Bildschirm.</div>
<div style="display:flex;gap:10px"><span style="flex:none;width:26px;height:26px;border-radius:13px;background:#F1B729;font:bold 14px/26px Arial;text-align:center">2</span>Was dabei schiefging. Die Pannen, die dir keiner erzählt, der dir Automation verkauft.</div>
</div>
<div class="muster"><div class="name">Heft-Kasten</div>
<div style="background:#FFF6DA;border-radius:10px;padding:16px 18px;display:flex;gap:18px;align-items:center">
<img src="bilder/heft-klein.png" alt="" style="width:78px;mix-blend-mode:multiply">
<div>Das Heft dazu, falls du es noch nicht hast:<br><b style="font-family:Arial,sans-serif;font-size:15px;text-decoration:underline;text-decoration-color:#F1B729">„Jede Frage lief über meinen Tisch“ lesen →</b></div>
</div>
</div>
<div class="muster"><div class="name">Gruß, Signatur und PS</div>
<p style="margin:0 0 10px">Gruß Noah</p>
<img src="bilder/signatur-noah.png" alt="" style="width:360px;display:block">
<div style="border-top:1px solid #ECEAE3;margin-top:16px;padding-top:14px;color:#3A3A37"><b style="color:#1A1A1A">PS:</b> Am 8. Dezember um 18 Uhr fange ich mit genau diesen Kreuzen an.</div>
</div>
</section>
<!-- Banner -->
<section class="abschnitt">
<div class="kicker">bilder/banner/ und bilder/webinargeek/</div>
<h2>Die Banner</h2>
<p class="einl">Je Mail ein Banner, 1200 × 600 px, in der Mail 600 px breit. Den Alt-Text in Mailjet beim Bild eintragen. Er erscheint, solange die Bilder ausgeblendet sind.</p>
<div class="banner-raster">
<figure><img src="bilder/banner/k01-ich-war-nicht-der-chef.jpg" alt=""><figcaption><b>K1</b> · <code>k01-ich-war-nicht-der-chef.jpg</code><br>Alt: Wie es bei mir war: Ich war nicht der Chef, ich war der Engpass.</figcaption></figure>
<figure><img src="bilder/banner/k02-jede-frage-lief-ueber-meinen-tisch.jpg" alt=""><figcaption><b>K2</b> · <code>k02-jede-frage-lief-ueber-meinen-tisch.jpg</code><br>Alt: Das Heft aus unserem Betrieb: Jede Frage lief über meinen Tisch. 33 Seiten, 22 Minuten, ohne Anmeldung.</figcaption></figure>
<figure><img src="bilder/banner/k03-jedes-programm-war-eine-insel.jpg" alt=""><figcaption><b>K3</b> · <code>k03-jedes-programm-war-eine-insel.jpg</code><br>Alt: Warum das so war: Jedes Programm war eine Insel.</figcaption></figure>
<figure><img src="bilder/banner/k04-eine-anfrage-dreimal-getippt.jpg" alt=""><figcaption><b>K4</b> · <code>k04-eine-anfrage-dreimal-getippt.jpg</code><br>Alt: Rund 140 Anfragen im Monat: Eine Anfrage, dreimal getippt.</figcaption></figure>
<figure><img src="bilder/banner/k07-in-zehn-tagen.jpg" alt=""><figcaption><b>K7</b> · <code>k07-in-zehn-tagen.jpg</code><br>Alt: Das Programm am 8. Dezember: In zehn Tagen. Dienstag, 18 Uhr, live im Browser.</figcaption></figure>
<figure><img src="bilder/banner/k08-lebenslauf-einer-waermepumpe.jpg" alt=""><figcaption><b>K8</b> · <code>k08-lebenslauf-einer-waermepumpe.jpg</code><br>Alt: Ein Auftrag, netto 30.000 €: Lebenslauf einer Wärmepumpe.</figcaption></figure>
<figure><img src="bilder/banner/k09-klingt-gut-oder.jpg" alt=""><figcaption><b>K9</b> · <code>k09-klingt-gut-oder.jpg</code><br>Alt: Klingt gut, oder? Und dann wurde es ein Kartenhaus.</figcaption></figure>
<figure><img src="bilder/banner/k10-trotzdem-lief-alles-ueber-meinen-tisch.jpg" alt=""><figcaption><b>K10</b> · <code>k10-trotzdem-lief-alles-ueber-meinen-tisch.jpg</code><br>Alt: 13 Programme, ein Kopf: Trotzdem lief alles über meinen Tisch.</figcaption></figure>
<figure><img src="bilder/banner/k11-morgen-abend-18-uhr.jpg" alt=""><figcaption><b>K11</b> · <code>k11-morgen-abend-18-uhr.jpg</code><br>Alt: Letzte Einladung: Morgen Abend, 18 Uhr. Dienstag, 8. Dezember, live im Browser, eine Stunde.</figcaption></figure>
<figure><img src="bilder/banner/b4a-danke-fuer-gestern-abend.jpg" alt=""><figcaption><b>B4a</b> · <code>b4a-danke-fuer-gestern-abend.jpg</code><br>Alt: Nach dem Webinar: Danke für gestern Abend.</figcaption></figure>
<figure><img src="bilder/banner/b4b-wir-haben-ohne-dich-angefangen.jpg" alt=""><figcaption><b>B4b</b> · <code>b4b-wir-haben-ohne-dich-angefangen.jpg</code><br>Alt: Kein Vorwurf: Wir haben ohne dich angefangen.</figcaption></figure>
<figure><img src="bilder/banner/b4c-deine-drei-zahlen.jpg" alt=""><figcaption><b>B4c</b> · <code>b4c-deine-drei-zahlen.jpg</code><br>Alt: Was jetzt zählt: Deine drei Zahlen.</figcaption></figure>
<figure><img src="bilder/banner/b5-du-hast-zwei-wege.jpg" alt=""><figcaption><b>B5</b> · <code>b5-du-hast-zwei-wege.jpg</code><br>Alt: Wie es weitergeht: Du hast zwei Wege.</figcaption></figure>
<figure><img src="bilder/banner/b6-letzte-mail-vor-weihnachten.jpg" alt=""><figcaption><b>B6</b> · <code>b6-letzte-mail-vor-weihnachten.jpg</code><br>Alt: Seit 1948, vierte Generation: Letzte Mail vor Weihnachten.</figcaption></figure>
<figure><img src="bilder/webinargeek/b0-du-bist-dabei.jpg" alt=""><figcaption><b>B0 · WebinarGeek</b> · <code>b0-du-bist-dabei.jpg</code><br>Alt: Dein Platz ist sicher: Du bist dabei. Dienstag, 8. Dezember, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/webinargeek/b1-morgen-abend-18-uhr.jpg" alt=""><figcaption><b>B1 · WebinarGeek</b> · <code>b1-morgen-abend-18-uhr.jpg</code><br>Alt: Erinnerung: Morgen Abend, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/webinargeek/b2-heute-abend-18-uhr.jpg" alt=""><figcaption><b>B2 · WebinarGeek</b> · <code>b2-heute-abend-18-uhr.jpg</code><br>Alt: Heute ist es so weit: Heute Abend, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/webinargeek/b3-in-einer-stunde.jpg" alt=""><figcaption><b>B3 · WebinarGeek</b> · <code>b3-in-einer-stunde.jpg</code><br>Alt: Gleich geht's los: In einer Stunde.</figcaption></figure>
</div>
</section>
<!-- Alle Mails -->
<section class="abschnitt">
<div class="kicker">mails/ und mails/vorschau/</div>
<h2>Alle Mails auf einen Blick</h2>
<p class="einl">So soll jede Mail aussehen. Auf den folgenden Seiten steht jede Mail einzeln in voller Länge.</p>
<div class="mails" id="uebersicht"></div>
</section>
<div id="einzeln"></div>
</main>
<script>
// Liste der Mails, daraus entstehen die Übersicht und die Einzelseiten.
const MAILS = [
["k01", "K1 · Ich war nicht der Chef", "Verteiler · Di 17.11., 7:00"],
["k02", "K2 · Jede Frage lief über meinen Tisch", "Verteiler · Do 19.11., 7:00"],
["k03", "K3 · Jedes Programm war eine Insel", "Verteiler · Di 24.11., 7:00"],
["k04", "K4 · Eine Anfrage, dreimal getippt", "Verteiler · Do 26.11., 7:00"],
["k07", "K7 · In zehn Tagen", "Verteiler · Sa 28.11., 8:00"],
["k08", "K8 · Lebenslauf einer Wärmepumpe", "Verteiler · Di 01.12., 7:00"],
["k09", "K9 · Klingt gut, oder?", "Verteiler · Do 03.12., 7:00"],
["k10", "K10 · Trotzdem lief alles über meinen Tisch", "Verteiler · Sa 05.12., 8:00"],
["k11", "K11 · Morgen Abend, 18 Uhr", "noch nicht angemeldet · Mo 07.12., 7:00"],
["b4a", "B4a · Danke für gestern Abend", "teilgenommen · Mi 09.12., 9:00"],
["b4b", "B4b · Wir haben ohne dich angefangen", "nicht erschienen · Mi 09.12., 9:00"],
["b4c", "B4c · Deine drei Zahlen", "Reserve, nur ohne Teilnahmedaten"],
["b5", "B5 · Du hast zwei Wege", "Angemeldet · Fr 11.12., 9:00"],
["b6", "B6 · Letzte Mail vor Weihnachten", "Angemeldet · Di 15.12., 9:00"],
["b0", "B0 · Du bist dabei", "WebinarGeek · sofort nach der Anmeldung"],
["b1", "B1 · Morgen Abend, 18 Uhr", "WebinarGeek · 24 Std. vorher"],
["b2", "B2 · Heute Abend, 18 Uhr", "WebinarGeek · 9 Std. vorher"],
["b3", "B3 · In einer Stunde", "WebinarGeek · 1 Std. vorher"],
];
document.getElementById("uebersicht").innerHTML = MAILS.map(([id, name, an]) =>
`<figure><img src="mails/vorschau/${id}.png" alt=""><figcaption><b>${name}</b>${an}<br><code>mails/${id}.html</code></figcaption></figure>`).join("");
document.getElementById("einzeln").innerHTML = MAILS.map(([id, name, an]) =>
`<section class="einzeln"><h3>${name} <span class="klein">· ${an} · mails/${id}.html</span></h3><img src="mails/vorschau/${id}.png" alt=""></section>`).join("");
</script>
</body>
</html>