Dashboard: Seite E-Mail mit dem Mediakit der Mail-Strecke

Neuer Punkt E-Mail in der Leiste. Zeigt E-Mails/Mediakit.html in voller
Länge, dazu Anleitung, PDF und neuer Tab. Mediakit am Bildschirm ohne
Druck-Abstände.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Dashboard/app.js

@@ -12,8 +12,9 @@ import * as formate from "./seiten/formate.js";
 import * as dok from "./seiten/dokumente.js";
 import * as webinar from "./seiten/webinar.js";
 import * as aufgaben from "./seiten/aufgaben.js";
+import * as email from "./seiten/email.js";
 
-const SEITEN = { start, plan, roadmap, aufgaben, formate, webinar, dok };
+const SEITEN = { start, plan, roadmap, aufgaben, formate, webinar, email, dok };
 
 export const S = {
   plan: null, roadmap: null, kanaele: null, webinar: null, aufgaben: null, dokumente: [], stand: null,

Dashboard/index.html

@@ -19,6 +19,7 @@
     <a href="#/aufgaben" data-seite="aufgaben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg><span>Aufgaben</span></a>
     <a href="#/formate" data-seite="formate"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg><span>Formate</span></a>
     <a href="#/webinar" data-seite="webinar"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg><span>Webinar</span></a>
+    <a href="#/email" data-seite="email"><svg viewBox="0 0 24 24" aria-hidden="true"><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><span>E-Mail</span></a>
     <a href="#/dok" data-seite="dok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg><span>Dokumente</span></a>
   </nav>
   <div class="leiste-fuss">

Dashboard/seiten/email.js

@@ -0,0 +1,32 @@
+// E-Mail: das Mediakit der Mail-Strecke zum Webinar (E-Mails/Mediakit.html),
+// eingebettet in voller Länge. Der Rahmen wächst mit dem Inhalt mit, damit
+// nur die Seite scrollt und nicht zusätzlich der Rahmen.
+
+import { dokLink } from "../hilfen.js";
+
+const MEDIAKIT = "/E-Mails/Mediakit.html";
+
+export function zeichnen(main) {
+  main.innerHTML = `
+    <header class="seitenkopf">
+      <div><h1>E-Mail</h1>
+        <div class="unter">Mediakit und alle Mails der Strecke zum Webinar am 8. Dezember.</div></div>
+      <div class="knoepfe-kopf">
+        <a class="knopf" href="${dokLink("E-Mails/README.md")}">Anleitung</a>
+        <a class="knopf" href="/E-Mails/Mediakit.pdf" target="_blank" rel="noopener">PDF</a>
+        <a class="knopf" href="${MEDIAKIT}" target="_blank" rel="noopener">In neuem Tab</a>
+      </div>
+    </header>
+    <iframe class="mediakit" src="${MEDIAKIT}" title="Mediakit Mail-Strecke"></iframe>`;
+
+  const rahmen = main.querySelector("iframe.mediakit");
+  const anpassen = () => {
+    try {
+      rahmen.style.height = rahmen.contentDocument.documentElement.scrollHeight + "px";
+    } catch { /* fremder Ursprung: dann bleibt die Mindesthöhe */ }
+  };
+  rahmen.addEventListener("load", () => {
+    anpassen();
+    try { new ResizeObserver(anpassen).observe(rahmen.contentDocument.body); } catch { /* egal */ }
+  });
+}

Dashboard/stil.css

@@ -307,6 +307,11 @@ h2.abschnitt .klein { font-weight: 500; font-size: 14px; margin-left: 10px; }
 .schritt.erledigt .kurz { text-decoration: line-through; color: var(--grau); }
 .schritt.später, .schritt.entfällt { color: var(--grau-2); }
 
+/* ---------------------------------------------------------------- E-Mail */
+
+.knoepfe-kopf { display: flex; flex-wrap: wrap; gap: 8px; }
+.mediakit { display: block; width: 100%; min-height: 80vh; border: 1px solid var(--rand); border-radius: 6px; background: #fff; }
+
 /* ---------------------------------------------------------------- Dokumente */
 
 .dok-rahmen { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }

E-Mails/Mediakit.html

@@ -27,7 +27,9 @@
   .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 { min-height: 250mm; display: flex; flex-direction: column; justify-content: space-between; }
+  .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: 4px solid var(--gold); padding-top: 14px; }
   .titelblatt .fakten b { display: block; font-family: Manrope, sans-serif; font-size: 22px; }
@@ -76,7 +78,7 @@
 <!-- Titelblatt -->
 <section class="titelblatt">
   <div>
-    <img src="bilder/logo-hivegrid.png" alt="HiveGrid" style="width:130px;mix-blend-mode:multiply">
+    <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>