HiveGrid-Marketing/E-Mails/mails/k11.html

<!doctype html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light">
<title>K11 · Morgen Abend, 18 Uhr</title>
<!--
  Gebaut nach der Muster-Mail k03.html. Bausteine sind unten mit
  „BAUSTEIN: …“ markiert, Erklärung in ../README.md.

  Betreff:      Morgen Abend, 18 Uhr
  Vorschautext: Letzte Einladung: morgen um 18 Uhr zeige ich dir unser Büro am Bildschirm.
  An:           nur Segment „W0812 noch nicht angemeldet“, Mo 07.12., 7 Uhr
  Geändert ggü. PDF: „Eine Stunde, Google Meet, du brauchst nur einen Browser“ →
                     „Eine Stunde, live, du brauchst nur einen Browser“ (Aufgabe 1.6)
                     „[Seite zum Termin: webinar.hivegrid.de]“ gestrichen, Satz endet mit „:“,
                     danach Button „Platz sichern →“ (utm_content=k11)
                     „Das Heft dazu, falls du es noch nicht hast: [Heft-Link]“ → Heft-Kasten
                     Liste: Absatz „Es geht um drei Dinge. …“ als nummerierte Liste
                     (1 bis 3), Einleitungssatz bleibt als Absatz davor

  Platzhalter: {{HEFT_LINK}} und {{ABMELDEN}} ersetzen, [Vorname] über die
  Personalisierung von Mailjet (Eigenschaft anrede). Bilder liegen in ../bilder/.
-->
<style>
  body { margin: 0; padding: 0; background: #F4F3EF; }
  a { color: #8A6800; }
  @media (max-width: 620px) {
    .karte { width: 100% !important; border-radius: 0 !important; }
    .rand { padding-left: 22px !important; padding-right: 22px !important; }
    .spalte { display: block !important; width: 100% !important; padding: 0 0 12px 0 !important; }
    .text { font-size: 17px !important; }
  }
</style>
</head>
<body style="margin:0;padding:0;background:#F4F3EF;">

<!-- BAUSTEIN: Vorschautext (unsichtbar, in Mailjet als „Vorschautext“ eintragen) -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Letzte Einladung: morgen um 18 Uhr zeige ich dir unser Büro am Bildschirm.</div>

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#F4F3EF;">
<tr><td align="center" style="padding:28px 12px 40px;">

  <!-- BAUSTEIN: Kopf (Logo über der Karte) -->
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;">
    <tr><td align="center" style="padding:0 0 20px;">
      <img src="../bilder/logo-hivegrid.png" width="152" height="40" alt="HiveGrid" style="display:block;border:0;width:152px;height:40px;">
    </td></tr>
  </table>

  <!-- Karte -->
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;background:#FFFFFF;border:1px solid #E4E1D8;border-radius:14px;overflow:hidden;">

    <!-- BAUSTEIN: Banner -->
    <tr><td style="padding:0;">
      <img src="../bilder/banner/k11-morgen-abend-18-uhr.jpg" width="600" alt="Letzte Einladung: Morgen Abend, 18 Uhr. Dienstag, 8. Dezember, live im Browser, eine Stunde." style="display:block;border:0;width:100%;max-width:600px;height:auto;">
    </td></tr>

    <!-- BAUSTEIN: Terminleiste -->
    <tr><td class="rand" style="padding:0 40px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:4px solid #F1B729;border-bottom:1px solid #ECEAE3;">
        <tr>
          <td class="spalte" width="40%" valign="top" style="padding:14px 10px 14px 0;font-family:Arial,Helvetica,sans-serif;">
            <div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wann</div>
            <div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">Di, 8. Dezember, 18 Uhr</div>
          </td>
          <td class="spalte" width="32%" valign="top" style="padding:14px 10px;font-family:Arial,Helvetica,sans-serif;">
            <div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wo</div>
            <div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">Live im Browser</div>
          </td>
          <td class="spalte" width="28%" valign="top" style="padding:14px 0 14px 10px;font-family:Arial,Helvetica,sans-serif;">
            <div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Dauer</div>
            <div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">Eine Stunde</div>
          </td>
        </tr>
      </table>
    </td></tr>

    <!-- BAUSTEIN: Text -->
    <tr><td class="rand text" style="padding:30px 40px 0;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
      <p style="margin:0 0 18px;">Moin [Vorname],</p>
      <p style="margin:0 0 18px;">morgen Abend um 18 Uhr sitze ich vor dem Bildschirm und zeige, wie unser Büro um KWP herum verbunden ist. Das ist die letzte Einladung dazu.</p>
      <p style="margin:0 0 18px;">Es geht um drei Dinge.</p>
    </td></tr>

    <!-- BAUSTEIN: Liste -->
    <tr><td class="rand" style="padding:0 40px 14px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td width="34" valign="top" style="padding:2px 0 12px;"><div style="width:26px;height:26px;border-radius:13px;background:#F1B729;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;line-height:26px;text-align:center;color:#1A1A1A;">1</div></td>
          <td valign="top" style="padding:0 0 12px 8px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.6;color:#1A1A1A;">Wo wir sehen, welche Anfrage offen ist, wer dran ist und was als Nächstes ansteht, live am Bildschirm.</td>
        </tr>
        <tr>
          <td width="34" valign="top" style="padding:2px 0 12px;"><div style="width:26px;height:26px;border-radius:13px;background:#F1B729;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;line-height:26px;text-align:center;color:#1A1A1A;">2</div></td>
          <td valign="top" style="padding:0 0 12px 8px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.6;color:#1A1A1A;">Was dabei schiefging, vier echte Pannen.</td>
        </tr>
        <tr>
          <td width="34" valign="top" style="padding:2px 0 12px;"><div style="width:26px;height:26px;border-radius:13px;background:#F1B729;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;line-height:26px;text-align:center;color:#1A1A1A;">3</div></td>
          <td valign="top" style="padding:0 0 12px 8px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.6;color:#1A1A1A;">Und was davon in HiveGrid steckt, der Software, die daraus entstanden ist.</td>
        </tr>
      </table>
    </td></tr>

    <tr><td class="rand text" style="padding:0 40px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
      <p style="margin:0 0 6px;">Eine Stunde, live, du brauchst nur einen Browser. Fragen sind ausdrücklich erwünscht. Wenn du dabei sein willst, sichere dir hier deinen Platz, den Zugangslink bekommst du sofort:</p>
    </td></tr>

    <!-- BAUSTEIN: Button -->
    <tr><td align="center" class="rand" style="padding:18px 40px 26px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
        <td align="center" bgcolor="#F1B729" style="border-radius:6px;">
          <a href="https://webinar.hivegrid.de/?utm_source=mailjet&amp;utm_medium=email&amp;utm_campaign=webinar-0812&amp;utm_content=k11" style="display:inline-block;padding:16px 34px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;color:#1A1A1A;text-decoration:none;border-radius:6px;">Platz sichern &rarr;</a>
        </td>
      </tr></table>
    </td></tr>

    <tr><td class="rand text" style="padding:0 40px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
      <p style="margin:0 0 22px;">Bring deine drei Zahlen aus dem Heft mit, wer sie nicht hat, zählt morgen einfach zu. Wenn du nicht dabei bist, auch gut. Das ist meine letzte Einladung für den 8. Dezember.</p>
    </td></tr>

    <!-- BAUSTEIN: Heft-Kasten (ab K3 statt der Zeile „Das Heft dazu …: [Heft-Link]“) -->
    <tr><td class="rand" style="padding:0 40px 26px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#FFF6DA;border-radius:10px;">
        <tr>
          <td width="96" valign="middle" style="padding:16px 0 16px 18px;">
            <a href="{{HEFT_LINK}}"><img src="../bilder/heft-klein.png" width="78" height="108" alt="Heft „Jede Frage lief über meinen Tisch“" style="display:block;border:0;width:78px;height:108px;"></a>
          </td>
          <td valign="middle" style="padding:16px 18px;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.5;color:#1A1A1A;">
            Das Heft dazu, falls du es noch nicht hast:<br>
            <a href="{{HEFT_LINK}}" style="font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;color:#1A1A1A;text-decoration:underline;text-decoration-color:#F1B729;">„Jede Frage lief über meinen Tisch“ lesen &rarr;</a>
          </td>
        </tr>
      </table>
    </td></tr>

    <!-- BAUSTEIN: Gruß und Signatur -->
    <tr><td class="rand text" style="padding:0 40px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
      <p style="margin:0 0 12px;">Gruß Noah</p>
    </td></tr>
    <tr><td class="rand" style="padding:0 40px 24px;">
      <img src="../bilder/signatur-noah.png" width="360" height="88" alt="Noah Geerkens, Inhaber Geerkens GmbH, Rheinberg" style="display:block;border:0;width:360px;max-width:100%;height:auto;">
    </td></tr>

    <!-- BAUSTEIN: PS -->
    <tr><td class="rand" style="padding:0 40px 34px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
        <td style="border-top:1px solid #ECEAE3;padding-top:18px;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.6;color:#3A3A37;">
          <b style="color:#1A1A1A;">PS:</b> Dienstag, 8. Dezember, 18 Uhr, pünktlich, eine Stunde.
        </td>
      </tr></table>
    </td></tr>
  </table>

  <!-- BAUSTEIN: Fuß (außerhalb der Karte) -->
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;">
    <tr><td class="rand" align="center" style="padding:26px 30px 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.7;color:#6B6B66;">
      Du bekommst diese Mail, weil du dich für Noahs Mails zum Webinar am 8. Dezember eingetragen hast.<br>
      <a href="{{ABMELDEN}}" style="color:#6B6B66;text-decoration:underline;">Abmelden</a> &nbsp;·&nbsp;
      <a href="https://hivegrid.de/datenschutz" style="color:#6B6B66;text-decoration:underline;">Datenschutz</a><br>
      HiveGrid GmbH i. G. · Xantener Straße 235a · 47495 Rheinberg
    </td></tr>
  </table>

</td></tr>
</table>
</body>
</html>