Layout kompakt: kleinere Cover, Hub dreispaltig, Projekt-Übersichten zweispaltig; HANDOFF: Versand-PDF Coding Agents auf VM 300

HANDOFF.md

@@ -67,7 +67,7 @@ Nächster Schritt nur mit Auftrag: Host-Deploy (Allowlist, Versand-PDFs laut AE-
 
 ## Offene Reste (nur mit Auftrag)
 - Host: `private/allowlist.txt`, `private/books/<slug>.pdf`, `/etc/ki-buch-archive/fulfill.env`, nginx-Snippet, systemd-Unit. SMTP-Daten hat nur der Betreiber.
-- AE-Archiv-09: In diesem Workspace keine Versand-PDFs. Menschen erledigt 01.11. (Host-Datei war A4, getauscht gegen A4 164 S.; siehe Abschnitt 7). Offen: Vorhang (Host 30.10., Quelle Print 220 S.); Coding Agents liegt nicht auf dem Host (Quelle `ccd78ad` 01.11.: A4 248 S. / Print 291 S., Release-Candidate ohne ISBN; Stand-Check 01.11. abends). Auf dem Host Alt-Datei-Typ (A4 vs Print) messen, dann tauschen. Empfehlung A.
+- AE-Archiv-09: In diesem Workspace keine Versand-PDFs. Menschen erledigt 01.11. (Host-Datei war A4, getauscht gegen A4 164 S.; siehe Abschnitt 7). Offen: Vorhang (Host 30.10., Quelle Print 220 S.). Coding Agents erledigt 01.11. abends: `private/books/coding-agents-praxis.pdf` auf VM 300 = Buch `ccd78ad` `dist/coding-agents-praxis.pdf` (A4, 248 S., 8.719.658 Bytes, SHA256 `32b23a45249fbc3c…`, Owner martin, 644; Hash Host = Quelle geprüft). Abgelegt ist die A4-Fassung, nicht Print (291 S.). Bei ISBN-Vergabe neu bauen und erneut tauschen. Auf dem Host Alt-Datei-Typ (A4 vs Print) messen, dann tauschen. Empfehlung A.
 - AE-Archiv-08: Inventar-Sub-Agent DeepSeek 401; Fakten in der Hauptsession grok-4.6. Empfehlung A (gelten lassen).
 - AE-Archiv-10: Der Handoff nannte den Tag `pre-companion-update-2026-10-31`, der nie angelegt wurde. A: Zeile streichen, so umgesetzt in `41cb87b` (Empfehlung). B: Tag rückwirkend auf `3ee30db` setzen. C: anderer Name.
 - 45-Tage-Review EIT; echte CLI-Nachprüfung Claude/Copilot/Codex.
@@ -75,6 +75,7 @@ Nächster Schritt nur mit Auftrag: Host-Deploy (Allowlist, Versand-PDFs laut AE-
 - Urteil statt Output: Companion-Abgleich später.
 
 - Coding Agents Re-Sync 01.11. (Branch `coding-agents-update-2-2026-11-01`): Buch `b1f9eb5`→`ccd78ad` nur redaktionell (5.13→5.8, pnpm-Coverage Kap. 10, Leitsatz-Boxen 16/19/21). Templates/Checklisten/Anhang A+B unverändert → kein Neupacken, companion bleibt 0.1.4, Changelog C-007. Flyer-Text passt, kein Neubau.
+- Layout kompakt 01.11. (Branch `layout-kompakt-2026-11-01`, nicht gemergt): `body.page-wide` auf Hub + drei Projekt-Übersichten (70rem). Hub: Buchkarten 3-spaltig, Cover 4,5rem. Übersicht: `.book-head` (Cover 7,5rem + Hero + Flyer-Hook + Prüfstatus rechts), `.page-cols` (Neuigkeiten links, Bereiche rechts), Downloads 3-spaltig. `.flyer-teaser` entfällt. Unterseiten unverändert 48rem.
 
 ## Nicht still
 - Kein erfundener Produkt-Review, `last_reviewed` nicht vordatieren.

css/styles.css

@@ -716,77 +716,192 @@ table.data code {
   color: var(--teal);
 }
 
-/* Flyer-Teaser (Buchseiten) und Cover in Hub-Karten */
+/* Breites Layout (Hub und Projekt-Übersichten): kleine Cover, mehr Spalten */
 
-.flyer-teaser {
-  display: grid;
-  grid-template-columns: 6.5rem 1fr;
-  gap: 1.25rem;
-  align-items: center;
-  margin: 0 0 2rem;
-  padding: 1.25rem 1.35rem;
-  background: linear-gradient(135deg, var(--surface) 0%, var(--teal-soft) 100%);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+.page-wide .site-header__inner,
+.page-wide .site-main,
+.page-wide .site-footer__inner {
+  width: min(100% - 2rem, 70rem);
 }
 
-.flyer-teaser__cover img,
-.card__cover img {
+.page-wide .hero .lede,
+.page-wide > .site-main > .callout {
+  max-width: 46rem;
+}
+
+.btn--sm {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.88rem;
+}
+
+.card__cover img,
+.book-head__cover img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(26, 31, 46, 0.18), 0 6px 16px rgba(26, 31, 46, 0.18);
+  box-shadow: 0 1px 2px rgba(26, 31, 46, 0.18), 0 4px 12px rgba(26, 31, 46, 0.16);
   transition: transform 0.15s ease;
 }
 
-.flyer-teaser__cover:hover img,
-.card__cover:hover img {
+.card__cover:hover img,
+.book-head__cover:hover img {
   transform: translateY(-2px) rotate(-1deg);
 }
 
-.flyer-teaser__kicker {
-  margin: 0 0 0.3rem;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--teal);
+/* Hub: kompakte Buchkarten, ab ~60rem dreispaltig */
+
+@media (min-width: 40rem) {
+  .page-wide .card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.flyer-teaser__hook {
-  margin: 0 0 0.85rem;
-  font-size: 1.05rem;
+@media (min-width: 60rem) {
+  .page-wide .card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.card--book {
+  display: grid;
+  grid-template-columns: 4.5rem minmax(0, 1fr);
+  grid-template-rows: auto auto 1fr;
+  gap: 0 1rem;
+  padding: 1.1rem 1.15rem;
+}
+
+.card--book .card__body {
+  display: contents;
+}
+
+.card--book .card__cover {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  align-self: start;
+}
+
+.card--book h2 {
+  grid-column: 2;
+  font-size: 1.08rem;
+  line-height: 1.25;
+}
+
+.card--book p {
+  grid-column: 2;
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+.card--book .card__meta {
+  grid-column: 1 / -1;
+  align-self: end;
+  margin-top: 0.9rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+  gap: 0.4rem 0.5rem;
+}
+
+.card--book .card__meta .btn {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.88rem;
+}
+
+/* Projekt-Übersicht: Kopf mit kleinem Cover, Text und Prüfstatus */
+
+.book-head {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  gap: 1rem 1.5rem;
+  align-items: start;
+  margin: 0 0 2rem;
+}
+
+.book-head .hero {
+  margin-bottom: 0.75rem;
+}
+
+.book-head__hook {
+  margin: 0 0 0.75rem;
+  max-width: 46rem;
+  padding-left: 0.75rem;
+  border-left: 3px solid var(--teal);
+  font-size: 0.98rem;
   line-height: 1.45;
   color: var(--navy);
 }
 
-.flyer-teaser__actions {
+.book-head__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin: 0;
 }
 
-.card--book {
+.book-head .status-card {
+  grid-column: 1 / -1;
+  margin: 0;
+}
+
+@media (min-width: 40rem) {
+  .book-head {
+    grid-template-columns: 7rem minmax(0, 1fr);
+  }
+}
+
+@media (min-width: 62rem) {
+  .book-head {
+    grid-template-columns: 7.5rem minmax(0, 1fr) 19rem;
+  }
+  .book-head .status-card {
+    grid-column: 3;
+  }
+}
+
+/* Projekt-Übersicht: Neuigkeiten links, Bereiche und Downloads rechts */
+
+.page-cols {
   display: grid;
-  grid-template-columns: 5rem 1fr;
-  gap: 1.1rem;
-  align-items: start;
+  gap: 0 2.5rem;
+}
+
+@media (min-width: 62rem) {
+  .page-cols {
+    grid-template-columns: minmax(0, 1fr) 21rem;
+    align-items: start;
+  }
+  .page-cols__side .link-grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+  .page-wide .download-list {
+    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
+    margin-top: 0;
+  }
+  .page-wide .download-card {
+    grid-template-columns: 1fr;
+    align-content: space-between;
+  }
+}
+
+.page-wide .site-main > .prose,
+.page-wide .site-main > .callout,
+.page-wide .reviewed-line,
+.page-wide .lesevertrag {
+  max-width: 52rem;
 }
 
 @media (max-width: 30rem) {
-  .flyer-teaser {
-    grid-template-columns: 4.5rem 1fr;
-    gap: 0.9rem;
-    padding: 1rem;
+  .book-head {
+    grid-template-columns: 4.25rem minmax(0, 1fr);
+    gap: 0.85rem 1rem;
   }
-  .flyer-teaser__hook {
-    font-size: 0.98rem;
+  .book-head__hook {
+    font-size: 0.93rem;
   }
   .card--book {
-    grid-template-columns: 3.75rem 1fr;
-    gap: 0.85rem;
+    grid-template-columns: 3.75rem minmax(0, 1fr);
+    gap: 0 0.85rem;
   }
 }

index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Mitmach-Material und Vorlagen zu den KI-Praxisbüchern – ZIP-Downloads für PDF-Leser.">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
-<body>
+<body class="page-wide">
   <header class="site-header">
     <div class="site-header__inner">
       <a class="site-brand" href="/">KI-Buch-Archive</a>

projects/coding-agents-praxis/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Begleit-Service zum Buch Coding Agents in der Praxis: Stand &amp; Drift, Errata, Vorlagen, Checklisten, Hilfe und Feedback. Stand August 2026.">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
-<body>
+<body class="page-wide">
   <header class="site-header">
     <div class="site-header__inner">
       <a class="site-brand" href="/">KI-Buch-Archive</a>
@@ -32,34 +32,47 @@
       <a href="/projects/coding-agents-praxis/changelog/">Changelog</a>
     </nav>
 
-    <header class="hero">
-      <h1>Coding Agents in der Praxis</h1>
-      <p class="lede">
-        Begleit-Service zur 1.&nbsp;Auflage 2026 (Martin Richardt).
-        Stand-Hinweise, Errata, aktuelle Vorlagen und Checklisten sowie kurze Hilfe –
-        ehrlich und ohne Hype. Vendor-agnostisch. Kein Shop.
-      </p>
-    </header>
-
-    <aside class="status-card status-card--ok" aria-label="Prüfstatus">
-      <p class="status-card__title">Letzte inhaltliche Prüfung</p>
-      <dl>
-        <dt>Datum</dt>
-        <dd>2026-11-01</dd>
-        <dt>Buchstand</dt>
-        <dd>August 2026</dd>
-        <dt>Service</dt>
-        <dd>companion-0.1.4</dd>
-        <dt>Material</dt>
-        <dd>material-2026-10-31 · Stack-Orientierung (Anhang&nbsp;B)</dd>
-        <dt>Ampel</dt>
-        <dd><span class="tag tag--ok">aktuell</span></dd>
-      </dl>
-      <p class="status-card__foot">
-        <a href="/projects/coding-agents-praxis/stand/">Details: Aktueller Stand &amp; Drift →</a>
-      </p>
-    </aside>
+    <div class="book-head">
+      <a class="book-head__cover" href="/projects/coding-agents-praxis/flyer/" aria-label="Flyer zum Buch">
+        <img src="/assets/covers/coding-agents-praxis.jpg" width="600" height="900" alt="Cover: Coding Agents in der Praxis">
+      </a>
+      <div class="book-head__main">
+      <header class="hero">
+        <h1>Coding Agents in der Praxis</h1>
+        <p class="lede">
+          Begleit-Service zur 1.&nbsp;Auflage 2026 (Martin Richardt).
+          Stand-Hinweise, Errata, aktuelle Vorlagen und Checklisten sowie kurze Hilfe –
+          ehrlich und ohne Hype. Vendor-agnostisch. Kein Shop.
+        </p>
+      </header>
+        <p class="book-head__hook">Ein Coding-Agent ist nicht „die KI, die programmieren kann“, sondern LLM + Harness. Das Buch zeigt, wie Entwickler und Teams ihn zuverlässig einsetzen.</p>
+        <p class="book-head__actions">
+          <a class="btn btn--sm btn--primary" href="/projects/coding-agents-praxis/flyer/">Flyer ansehen</a>
+          <a class="btn btn--sm btn--secondary" href="/downloads/coding-agents-praxis/flyer-coding-agents-praxis.pdf" download>PDF (A5)</a>
+        </p>
+      </div>
+      <aside class="status-card status-card--ok" aria-label="Prüfstatus">
+        <p class="status-card__title">Letzte inhaltliche Prüfung</p>
+        <dl>
+          <dt>Datum</dt>
+          <dd>2026-11-01</dd>
+          <dt>Buchstand</dt>
+          <dd>August 2026</dd>
+          <dt>Service</dt>
+          <dd>companion-0.1.4</dd>
+          <dt>Material</dt>
+          <dd>material-2026-10-31 · Stack-Orientierung (Anhang&nbsp;B)</dd>
+          <dt>Ampel</dt>
+          <dd><span class="tag tag--ok">aktuell</span></dd>
+        </dl>
+        <p class="status-card__foot">
+          <a href="/projects/coding-agents-praxis/stand/">Details: Aktueller Stand &amp; Drift →</a>
+        </p>
+      </aside>
+    </div>
 
+    <div class="page-cols">
+    <div class="page-cols__main">
     <div class="prose">
       <p>
         Die <strong>Konzepte</strong> im Buch (Agent = LLM + Harness, Context is King,
@@ -80,19 +93,6 @@
       </p>
     </div>
 
-    <aside class="flyer-teaser" aria-label="Flyer zum Buch">
-      <a class="flyer-teaser__cover" href="/projects/coding-agents-praxis/flyer/">
-        <img src="/assets/covers/coding-agents-praxis.jpg" width="600" height="900" alt="Cover: Coding Agents in der Praxis" loading="lazy">
-      </a>
-      <div class="flyer-teaser__body">
-        <p class="flyer-teaser__kicker">Das Buch auf einen Blick</p>
-        <p class="flyer-teaser__hook">Ein Coding-Agent ist nicht „die KI, die programmieren kann“, sondern LLM + Harness. Das Buch zeigt, wie Entwickler und Teams ihn zuverlässig einsetzen.</p>
-        <p class="flyer-teaser__actions">
-          <a class="btn btn--primary" href="/projects/coding-agents-praxis/flyer/">Flyer ansehen →</a>
-          <a class="btn btn--secondary" href="/downloads/coding-agents-praxis/flyer-coding-agents-praxis.pdf" download>PDF (A5)</a>
-        </p>
-      </div>
-    </aside>
 
     <p class="section-label">1. November</p>
     <article class="entry">
@@ -117,7 +117,9 @@
         <a href="/projects/coding-agents-praxis/changelog/#C-005">Begleit-Service 0.1.4 →</a>
       </p>
     </article>
+    </div>
 
+    <div class="page-cols__side">
     <p class="section-label">Bereiche</p>
     <ul class="link-grid">
       <li>
@@ -157,6 +159,8 @@
         </a>
       </li>
     </ul>
+    </div>
+    </div>
 
     <p class="section-label">Downloads</p>
     <div class="download-list">
@@ -200,6 +204,7 @@
         <a class="btn btn--primary" href="/downloads/coding-agents-praxis/stack-orientierung.md" download>Markdown herunterladen</a>
       </article>
     </div>
+
     <p class="reviewed-line">
       Manifest &amp; SHA256:
       <a href="/downloads/coding-agents-praxis/MANIFEST.txt">MANIFEST.txt</a>

projects/ki-hinterm-vorhang/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Begleit-Service zum Sachbuch Die KI hinter dem Vorhang: Stand &amp; Drift, Errata, Lese-/Denk-Checkliste, Ampel-Matrix, Hilfe und Feedback. Stand Oktober 2026.">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
-<body>
+<body class="page-wide">
   <header class="site-header">
     <div class="site-header__inner">
       <a class="site-brand" href="/">KI-Buch-Archive</a>
@@ -32,34 +32,47 @@
       <a href="/projects/ki-hinterm-vorhang/changelog/">Changelog</a>
     </nav>
 
-    <header class="hero">
-      <h1>Die KI hinter dem Vorhang</h1>
-      <p class="lede">
-        Begleit-Service zur 1.&nbsp;Auflage 2026 (Martin Richardt).
-        Stand-Hinweise, Errata, Lese- und Denk-Checkliste sowie Ampel-Matrix –
-        ehrlich und ohne Hype. Sachbuch, kein Coding-Workbook. Kein Shop.
-      </p>
-    </header>
-
-    <aside class="status-card status-card--ok" aria-label="Prüfstatus">
-      <p class="status-card__title">Letzte inhaltliche Prüfung</p>
-      <dl>
-        <dt>Datum</dt>
-        <dd>2026-11-01</dd>
-        <dt>Buchstand</dt>
-        <dd>Oktober 2026</dd>
-        <dt>Service</dt>
-        <dd>companion-0.1.12</dd>
-        <dt>Material</dt>
-        <dd>material-2026-11-01 · Checklisten &amp; Kernbegriffe</dd>
-        <dt>Ampel</dt>
-        <dd><span class="tag tag--ok">aktuell</span></dd>
-      </dl>
-      <p class="status-card__foot">
-        <a href="/projects/ki-hinterm-vorhang/stand/">Details: Aktueller Stand &amp; Drift →</a>
-      </p>
-    </aside>
+    <div class="book-head">
+      <a class="book-head__cover" href="/projects/ki-hinterm-vorhang/flyer/" aria-label="Flyer zum Buch">
+        <img src="/assets/covers/ki-hinterm-vorhang.jpg" width="600" height="900" alt="Cover: Die KI hinter dem Vorhang">
+      </a>
+      <div class="book-head__main">
+      <header class="hero">
+        <h1>Die KI hinter dem Vorhang</h1>
+        <p class="lede">
+          Begleit-Service zur 1.&nbsp;Auflage 2026 (Martin Richardt).
+          Stand-Hinweise, Errata, Lese- und Denk-Checkliste sowie Ampel-Matrix –
+          ehrlich und ohne Hype. Sachbuch, kein Coding-Workbook. Kein Shop.
+        </p>
+      </header>
+        <p class="book-head__hook">Hinter dem Chatfenster steckt selten eine denkende Maschine – und doch wirkt die Antwort oft erstaunlich klug. Das Buch erklärt, warum beides stimmen kann.</p>
+        <p class="book-head__actions">
+          <a class="btn btn--sm btn--primary" href="/projects/ki-hinterm-vorhang/flyer/">Flyer ansehen</a>
+          <a class="btn btn--sm btn--secondary" href="/downloads/ki-hinterm-vorhang/flyer-ki-hinterm-vorhang.pdf" download>PDF (A5)</a>
+        </p>
+      </div>
+      <aside class="status-card status-card--ok" aria-label="Prüfstatus">
+        <p class="status-card__title">Letzte inhaltliche Prüfung</p>
+        <dl>
+          <dt>Datum</dt>
+          <dd>2026-11-01</dd>
+          <dt>Buchstand</dt>
+          <dd>Oktober 2026</dd>
+          <dt>Service</dt>
+          <dd>companion-0.1.12</dd>
+          <dt>Material</dt>
+          <dd>material-2026-11-01 · Checklisten &amp; Kernbegriffe</dd>
+          <dt>Ampel</dt>
+          <dd><span class="tag tag--ok">aktuell</span></dd>
+        </dl>
+        <p class="status-card__foot">
+          <a href="/projects/ki-hinterm-vorhang/stand/">Details: Aktueller Stand &amp; Drift →</a>
+        </p>
+      </aside>
+    </div>
 
+    <div class="page-cols">
+    <div class="page-cols__main">
     <div class="prose">
       <p>
         Die <strong>Konzepte</strong> im Buch (Next-Token-Prediction, Modell vs.&nbsp;System/Harness,
@@ -74,19 +87,6 @@
       </p>
     </div>
 
-    <aside class="flyer-teaser" aria-label="Flyer zum Buch">
-      <a class="flyer-teaser__cover" href="/projects/ki-hinterm-vorhang/flyer/">
-        <img src="/assets/covers/ki-hinterm-vorhang.jpg" width="600" height="900" alt="Cover: Die KI hinter dem Vorhang" loading="lazy">
-      </a>
-      <div class="flyer-teaser__body">
-        <p class="flyer-teaser__kicker">Das Buch auf einen Blick</p>
-        <p class="flyer-teaser__hook">Hinter dem Chatfenster steckt selten eine denkende Maschine – und doch wirkt die Antwort oft erstaunlich klug. Das Buch erklärt, warum beides stimmen kann.</p>
-        <p class="flyer-teaser__actions">
-          <a class="btn btn--primary" href="/projects/ki-hinterm-vorhang/flyer/">Flyer ansehen →</a>
-          <a class="btn btn--secondary" href="/downloads/ki-hinterm-vorhang/flyer-ki-hinterm-vorhang.pdf" download>PDF (A5)</a>
-        </p>
-      </div>
-    </aside>
 
     <p class="section-label">1. November</p>
     <article class="entry">
@@ -273,7 +273,9 @@
         <a href="/projects/ki-hinterm-vorhang/changelog/#seit-10-august">Liste der Änderungen mit Erklärung →</a>
       </p>
     </article>
+    </div>
 
+    <div class="page-cols__side">
     <p class="section-label">Bereiche</p>
     <ul class="link-grid">
       <li>
@@ -313,6 +315,8 @@
         </a>
       </li>
     </ul>
+    </div>
+    </div>
 
     <p class="section-label">Downloads</p>
     <div class="download-list">
@@ -364,6 +368,7 @@
         <a class="btn btn--primary" href="/downloads/ki-hinterm-vorhang/kernbegriffe.md" download>Markdown herunterladen</a>
       </article>
     </div>
+
     <p class="reviewed-line">
       Alle vier Dateien gebündelt:
       <a href="/downloads/ki-hinterm-vorhang/checklisten.zip" download>checklisten.zip</a>

projects/was-bleibt-vom-menschen/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Begleit-Service zum Sachbuch Was bleibt vom Menschen?: Stand &amp; Drift, Errata, drei Fragen, Prüfbedingungen, sechs Hebel, Hilfe und Feedback. Stand Oktober 2026.">
   <link rel="stylesheet" href="/css/styles.css">
 </head>
-<body>
+<body class="page-wide">
   <header class="site-header">
     <div class="site-header__inner">
       <a class="site-brand" href="/">KI-Buch-Archive</a>
@@ -32,34 +32,47 @@
       <a href="/projects/was-bleibt-vom-menschen/changelog/">Changelog</a>
     </nav>
 
-    <header class="hero">
-      <h1>Was bleibt vom Menschen?</h1>
-      <p class="lede">
-        Begleit-Service zur 1.&nbsp;Auflage 2026, Vorabexemplar (Martin Richardt).
-        Stand-Hinweise, Errata, drei Fragen an ein System, Prüfbedingungen
-        und sechs Hebel – ehrlich und ohne Hype. Sachbuch, kein Coding-Workbook. Kein Shop.
-      </p>
-    </header>
-
-    <aside class="status-card status-card--ok" aria-label="Prüfstatus">
-      <p class="status-card__title">Letzte inhaltliche Prüfung</p>
-      <dl>
-        <dt>Datum</dt>
-        <dd>2026-11-01</dd>
-        <dt>Buchstand</dt>
-        <dd>Oktober 2026</dd>
-        <dt>Service</dt>
-        <dd>companion-0.1.2</dd>
-        <dt>Material</dt>
-        <dd>material-2026-10-31 · Checklisten &amp; Kernbegriffe</dd>
-        <dt>Ampel</dt>
-        <dd><span class="tag tag--ok">aktuell</span></dd>
-      </dl>
-      <p class="status-card__foot">
-        <a href="/projects/was-bleibt-vom-menschen/stand/">Details: Aktueller Stand &amp; Drift →</a>
-      </p>
-    </aside>
+    <div class="book-head">
+      <a class="book-head__cover" href="/projects/was-bleibt-vom-menschen/flyer/" aria-label="Flyer zum Buch">
+        <img src="/assets/covers/was-bleibt-vom-menschen.jpg" width="600" height="900" alt="Cover: Was bleibt vom Menschen?">
+      </a>
+      <div class="book-head__main">
+      <header class="hero">
+        <h1>Was bleibt vom Menschen?</h1>
+        <p class="lede">
+          Begleit-Service zur 1.&nbsp;Auflage 2026, Vorabexemplar (Martin Richardt).
+          Stand-Hinweise, Errata, drei Fragen an ein System, Prüfbedingungen
+          und sechs Hebel – ehrlich und ohne Hype. Sachbuch, kein Coding-Workbook. Kein Shop.
+        </p>
+      </header>
+        <p class="book-head__hook">Das Schreiben wird billig, das Prüfen wird zum Engpass. Was gewinnt an Wert, wenn kognitive Routinearbeit billig wird?</p>
+        <p class="book-head__actions">
+          <a class="btn btn--sm btn--primary" href="/projects/was-bleibt-vom-menschen/flyer/">Flyer ansehen</a>
+          <a class="btn btn--sm btn--secondary" href="/downloads/was-bleibt-vom-menschen/flyer-was-bleibt-vom-menschen.pdf" download>PDF (A5)</a>
+        </p>
+      </div>
+      <aside class="status-card status-card--ok" aria-label="Prüfstatus">
+        <p class="status-card__title">Letzte inhaltliche Prüfung</p>
+        <dl>
+          <dt>Datum</dt>
+          <dd>2026-11-01</dd>
+          <dt>Buchstand</dt>
+          <dd>Oktober 2026</dd>
+          <dt>Service</dt>
+          <dd>companion-0.1.2</dd>
+          <dt>Material</dt>
+          <dd>material-2026-10-31 · Checklisten &amp; Kernbegriffe</dd>
+          <dt>Ampel</dt>
+          <dd><span class="tag tag--ok">aktuell</span></dd>
+        </dl>
+        <p class="status-card__foot">
+          <a href="/projects/was-bleibt-vom-menschen/stand/">Details: Aktueller Stand &amp; Drift →</a>
+        </p>
+      </aside>
+    </div>
 
+    <div class="page-cols">
+    <div class="page-cols__main">
     <div class="prose">
       <p>
         Die <strong>Konzepte</strong> im Buch (Next-Token-Prediction, Modell vs.&nbsp;System/Hülle,
@@ -74,19 +87,6 @@
       </p>
     </div>
 
-    <aside class="flyer-teaser" aria-label="Flyer zum Buch">
-      <a class="flyer-teaser__cover" href="/projects/was-bleibt-vom-menschen/flyer/">
-        <img src="/assets/covers/was-bleibt-vom-menschen.jpg" width="600" height="900" alt="Cover: Was bleibt vom Menschen?" loading="lazy">
-      </a>
-      <div class="flyer-teaser__body">
-        <p class="flyer-teaser__kicker">Das Buch auf einen Blick</p>
-        <p class="flyer-teaser__hook">Das Schreiben wird billig, das Prüfen wird zum Engpass. Was gewinnt an Wert, wenn kognitive Routinearbeit billig wird?</p>
-        <p class="flyer-teaser__actions">
-          <a class="btn btn--primary" href="/projects/was-bleibt-vom-menschen/flyer/">Flyer ansehen →</a>
-          <a class="btn btn--secondary" href="/downloads/was-bleibt-vom-menschen/flyer-was-bleibt-vom-menschen.pdf" download>PDF (A5)</a>
-        </p>
-      </div>
-    </aside>
 
     <p class="section-label">1. November</p>
     <article class="entry">
@@ -127,7 +127,9 @@
         <a href="/projects/was-bleibt-vom-menschen/changelog/#C-001">Begleit-Service 0.1.0 →</a>
       </p>
     </article>
+    </div>
 
+    <div class="page-cols__side">
     <p class="section-label">Bereiche</p>
     <ul class="link-grid">
       <li>
@@ -167,6 +169,8 @@
         </a>
       </li>
     </ul>
+    </div>
+    </div>
 
     <p class="section-label">Downloads</p>
     <div class="download-list">
@@ -218,6 +222,7 @@
         <a class="btn btn--primary" href="/downloads/was-bleibt-vom-menschen/kernbegriffe.md" download>Markdown herunterladen</a>
       </article>
     </div>
+
     <p class="reviewed-line">
       Alle vier Dateien gebündelt:
       <a href="/downloads/was-bleibt-vom-menschen/checklisten.zip" download>checklisten.zip</a>