HiveGrid-Marketing/E-Mails/mails/b0.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>B0 · Du bist dabei: 8. Dezember, 18 Uhr</title>
<!--
  B0, Bestätigung nach der Anmeldung (Teil 2: Nur nach der Anmeldung).
  Gebaut wie die Muster-Mail k03.html, Bausteine sind unten mit
  „BAUSTEIN: …“ markiert.

  Betreff:      Du bist dabei: 8. Dezember, 18 Uhr
  Vorschautext: Dein Platz ist sicher, hier ist der Zugangslink für den 8. Dezember.
  Versand:      WebinarGeek, Bestätigung sofort nach der Anmeldung
  Geändert ggü. PDF:
    - „live über Google Meet“ → „live“ (Webinar läuft über WebinarGeek; „Browser“ steht im Absatz danach)
    - „[Zugangslink Google Meet]“ gestrichen, Satz endet mit dem Doppelpunkt,
      danach Button „Zum Webinar →“ ({{ZUGANGSLINK}}) mit Zeile zum Kopieren
    - „… 33 Seiten, 22 Minuten: [Heft-Link]“ → Heft-Kasten (Satz im Kasten,
      Link „Heft lesen →“, weil der Titel im Satz davor steht)

  Platzhalter: {{ZUGANGSLINK}} und {{HEFT_LINK}} ersetzen, [Vorname] über die
  Personalisierung von WebinarGeek. 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) -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Dein Platz ist sicher, hier ist der Zugangslink für den 8. Dezember.</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/webinargeek/b0-du-bist-dabei.jpg" width="600" alt="Dein Platz ist sicher: Du bist dabei. Dienstag, 8. Dezember, 18 Uhr." 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-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 6px;">danke für deine Anmeldung. Dein Platz ist sicher: Dienstag, 8. Dezember, 18 Uhr, live, eine Stunde. Hier kommst du am Dienstag um 18 Uhr direkt rein, leg dir den Link irgendwo hin, wo du ihn wiederfindest:</p>
    </td></tr>

    <!-- BAUSTEIN: Button (statt „[Zugangslink Google Meet]“) -->
    <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="{{ZUGANGSLINK}}" 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;">Zum Webinar &rarr;</a>
        </td>
      </tr></table>
      <p style="margin:10px 0 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#6B6B66;text-align:center;">Oder diesen Link kopieren: {{ZUGANGSLINK}}</p>
    </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;">Am Tag davor und am Dienstag selbst erinnere ich dich noch einmal, du musst nichts weiter tun. Du brauchst nur einen Browser, kein Programm.</p>
    </td></tr>

    <!-- BAUSTEIN: Heft-Kasten (statt der Zeile „Falls du das Heft …: [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;">
            Falls du das Heft „Jede Frage lief über meinen Tisch“ noch nicht gelesen hast, hier ist es noch einmal, 33 Seiten, 22 Minuten:<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;">Heft lesen &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 18px;">Fang auf Seite zwei an. Da steht, wie es bei mir war: Jede Frage kam bei mir an, vom Angebot bis zum Montagetermin. Wenn du dich da wiedererkennst, lohnt sich der Rest.</p>
      <p style="margin:0 0 18px;">Bis zum Termin gehen meine Mails weiter, je eine Stelle aus unserem Betrieb. Lies, was dich trifft, den Rest lass liegen.</p>
    </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> Trag dir Dienstag, den 8. Dezember, 18 Uhr ein, wir fangen pünktlich an.
        </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 das Webinar am 8. Dezember angemeldet hast.<br>
      <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>