/* ============================================================
   KI•POWERBOOST Newsletter – Plattform

   Gleiche Design-DNA wie KI Talk Notes und der Blog auf
   niklasvolland.de: Rot #E60000 traegt die Struktur, DM Sans
   fuer Titel und Meta, Lora fuer den Fliesstext, Caveat als
   Handschrift-Akzent. Gleiches Card-Muster (roter Gradient-
   Strich oben der beim Hover einfaehrt, Anheben mit rotem
   Schatten, rote Meta-Versalien), gleiche Radien und Easing.

   Unterschied zu den Notes: Light Mode. Die Flaeche ist hell,
   dunkel sind nur gesetzte Akzente – das Hero-Bild und der
   Prompt-Block. Rot bleibt exakt gleich, damit beide Auftritte
   erkennbar zusammengehoeren.

   Aenderungen hier wirken auf ALLE Seiten.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-alt: #fbfaf9;
  --bg-surface: #f4f2f0;
  --bg-card: #ffffff;
  --ink: #0e0e0e;

  --border: rgba(14, 14, 14, 0.09);
  --border-light: rgba(14, 14, 14, 0.14);
  --border-strong: rgba(14, 14, 14, 0.24);

  --text: #0e0e0e;
  --text-secondary: #5c5854;
  --text-muted: #8c8681;

  --red: #e60000;
  --red-dim: rgba(230, 0, 0, 0.06);
  --red-glow: rgba(230, 0, 0, 0.12);
  --gold: #fdb602;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --serif: 'Lora', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --col: 38rem;
  --margin-col: 10rem;
  --gutter: 3rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

/* height:auto ist hier kein Detail: Bilder tragen width/height im
   Markup. Ohne diese Zeile begrenzt max-width nur die Breite, die
   Hoehe bleibt beim Attributwert – das Bild wird gestaucht. */
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* Feines Raster hinter dem Kopf der Startseite. Nimmt das Motiv
   aus dem Header-Bild auf und blendet nach unten weich aus. */

.brand-grid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 620px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14, 14, 14, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 14, 14, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center -22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}

/* Warmer roter Schimmer ganz oben – das Gegenstueck zum
   page-glow der Notes, nur hell gedacht. */

.page-glow {
  position: fixed;
  top: -30vh;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(230, 0, 0, 0.045), transparent 70%);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text);
}

.nav-brand img { height: 20px; width: auto; display: block; }

.nav-brand-label {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  padding-left: 0.85rem;
  border-left: 1px solid var(--border-light);
  white-space: nowrap;
}

.nav-brand-label .hand {
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--red);
  letter-spacing: 0;
}

.nav-links { display: flex; align-items: center; gap: 0.5rem; }

.nav-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav-link:hover { color: var(--red); background: var(--red-dim); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--red);
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  margin-left: 0.5rem;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(230, 0, 0, 0.26);
}

/* ---------- Kopf der Startseite ---------- */

.hero { padding: 4rem 0 3.5rem; text-align: center; }

.hero-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
  margin-bottom: 3rem;
  box-shadow: 0 30px 80px rgba(14, 14, 14, 0.16);
  aspect-ratio: 3876 / 1479;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-kicker {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.hero h1 .hand {
  font-family: var(--hand);
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0;
}

.hero-claim {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(230, 0, 0, 0.28); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-light);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* ---------- Übersicht: Cards ----------
   Exakt das Card-Muster vom Blog und den Notes, hell uebersetzt. */

.issues { padding-bottom: 5rem; }

.issues-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.issues-head h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.issues-count {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.card-grid { display: grid; gap: 1.25rem; }

.card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 2.25rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Roter Gradient-Strich oben, faehrt beim Hover ein. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(230, 0, 0, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-light);
  box-shadow: 0 20px 60px rgba(230, 0, 0, 0.09);
}

.card:hover::before { transform: scaleX(1); }

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.9rem;
}

.card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.card-meta .muted { color: var(--text-muted); }

.card h3 {
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}

.card p { color: var(--text-secondary); font-size: 1rem; }

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
}

.card-more .arrow { transition: transform 0.35s var(--ease); }
.card:hover .card-more .arrow { transform: translateX(4px); }

.card-empty {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Marginalien-Raster der Ausgaben-Seite ----------
   Bereichs-Label links, Inhalt in der Lesespalte. */

.grid {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, var(--col));
  gap: var(--gutter);
  align-items: start;
}

.doc-head { padding: 3.5rem 0 3rem; }

.doc-sig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  text-align: right;
}

.doc-portrait {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--border);
}

.doc-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

.doc-week {
  font-family: var(--sans);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

.doc-week .kw {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.3rem;
}

.doc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.1rem;
}

.doc-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.doc-meta .muted { color: var(--text-muted); }

.doc-head h1 {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---------- Vorab-Hinweis ----------
   Steht nur auf der Vorschau-Adresse. Dunkel gesetzt, damit
   sofort klar ist: diese Seite ist noch nicht oeffentlich. */

.preview-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--ink);
  color: #f0f0f0;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.preview-banner .lock {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(230, 0, 0, 0.16);
  color: #ff4444;
}

.preview-banner strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.preview-banner span.when { color: #9a9a9a; }

/* ---------- Sektionen ---------- */

.section { padding: 3.25rem 0; border-top: 1px solid var(--border); }

.section-label {
  position: sticky;
  top: 2rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  text-align: right;
  line-height: 1.5;
  padding-top: 0.4rem;
}

.section-body > * + * { margin-top: 1.25rem; }

.section-body h2 {
  font-family: var(--sans);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
}

.section-body h2:first-child { margin-top: 0; }

.section-body p { color: var(--text-secondary); }
.section-body strong { color: var(--text); font-weight: 600; }

/* Buttons ausnehmen: sonst gewinnt diese Regel (0-1-1) gegen
   .btn-primary (0-1-0) und der Text steht rot auf rot. */
.section-body a:not(.btn) { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- AI-Stories ---------- */

.story + .story {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.story-title {
  font-family: var(--sans);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}

.story-title .emoji {
  font-size: 1.1rem;
  margin-right: 0.45rem;
  vertical-align: 0.06em;
}

.story-why {
  margin-top: 1.1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.story-why .label {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.3rem;
}

.story-why p { font-size: 1rem; color: var(--text-secondary); }

.src {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}

.src .arrow { transition: transform 0.35s var(--ease); }
.src:hover .arrow { transform: translate(3px, -3px); }

/* ---------- Schritte ---------- */

.steps { list-style: none; counter-reset: step; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
}

.steps li + li { margin-top: 1.75rem; }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red);
  background: var(--red-dim);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.step-text { display: block; color: var(--text-secondary); }

/* ---------- Prompt-Block ----------
   Dunkel gesetzt: Material zum Weiterverwenden, klar abgesetzt. */

.copy-block {
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 1.5rem;
}

.copy-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.copy-block-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff4444;
}

.copy-btn {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.copy-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.copy-btn.done { background: var(--red); border-color: var(--red); color: #fff; }

.copy-block pre {
  margin: 0;
  padding: 1.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #e4e4e4;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

/* ---------- Callout ---------- */

.callout {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
}

.callout-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.45rem;
}

.callout p { font-size: 1rem; }

/* ---------- Tool ---------- */

.tool-name {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.tool-list { list-style: none; }

.tool-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-secondary);
}

.tool-list li + li { margin-top: 0.7rem; }

.tool-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.sub-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* ---------- Podcast ---------- */

.pod-title {
  font-family: var(--sans);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}

.pod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

/* ---------- Abschluss-Block ---------- */

.outro {
  margin-top: 3.5rem;
  padding: 2.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.outro h2 {
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.outro p {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  color: var(--text-secondary);
}

/* ---------- Navigation zurück ---------- */

.back-nav { padding: 2.5rem 0; border-top: 1px solid var(--border); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.back-link:hover { color: var(--red); }
.back-link .arrow { transition: transform 0.35s var(--ease); }
.back-link:hover .arrow { transform: translateX(-4px); }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer-links { display: flex; gap: 1.5rem; }

.footer a { color: var(--text-muted); text-decoration: none; transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--red); }

/* ---------- Bewegung beim Laden ---------- */

.rise { opacity: 0; transform: translateY(14px); animation: rise 0.7s var(--ease) forwards; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.14s; }
.rise-3 { animation-delay: 0.23s; }
.rise-4 { animation-delay: 0.32s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Schmalere Viewports ---------- */

@media (max-width: 62rem) {
  :root { --margin-col: 7rem; --gutter: 2rem; }
}

@media (max-width: 52rem) {
  .wrap { padding: 0 1.25rem; }

  .grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

  .section-label {
    position: static;
    text-align: left;
    padding-top: 0;
    margin-bottom: 0.5rem;
  }

  .doc-sig {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
    margin-bottom: 1.5rem;
  }

  .doc-portrait { width: 56px; height: 56px; }
  .doc-week { font-size: 2rem; }
  .doc-week .kw { margin-bottom: 0.1rem; }

  .hero { padding: 2.5rem 0 2.5rem; }
  .hero-image { margin-bottom: 2rem; border-radius: var(--radius-lg); }

  .card { padding: 1.5rem 1.5rem; }
  .card h3 { font-size: 1.1875rem; }

  .nav { padding: 1.25rem 0; }
  .nav-brand-label { display: none; }

  .outro { padding: 1.75rem 1.25rem; }

  .steps li { padding-left: 2.75rem; }
  .steps li::before { width: 1.9rem; height: 1.9rem; font-size: 0.6875rem; }

  .footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Bestätigungsseite (/bestaetigt/)

   Der Moment nach dem Klick in der Bestätigungsmail. Gleiche
   Bausteine wie überall, nur dichter gesetzt: Bestätigung oben,
   darunter die Angebote als Karten im bekannten Card-Muster.
   ============================================================ */

.confirm { padding: 3.5rem 0 3rem; text-align: center; }

.confirm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: 0 14px 40px rgba(230, 0, 0, 0.26);
}

.confirm-kicker {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

.confirm h1 {
  font-family: var(--sans);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}

.confirm h1 .hand {
  font-family: var(--hand);
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0;
}

.confirm-lede {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

/* Die Portraet-Zeile ist zugleich der erste Weg zur Website:
   persoenlich statt als weiterer Button. */
.confirm-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  text-decoration: none;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.confirm-portrait:hover {
  border-color: var(--border-light);
  background: var(--bg-card);
}

.confirm-portrait img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink);
  border: 1px solid var(--border);
}

.confirm-portrait span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.confirm-portrait strong {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.confirm-portrait em {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  color: var(--red);
}

.confirm-portrait .arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

.confirm-portrait:hover .arrow { transform: translateX(3px); }

/* ---------- Abschnitte der Bestätigungsseite ---------- */

.block { padding: 2.75rem 0; border-top: 1px solid var(--border); }

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.block-head h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.block-head span {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ---------- Angebots-Karten ----------
   Gleiches Muster wie die Ausgaben-Cards: roter Gradient-Strich
   oben der beim Hover einfaehrt, Anheben mit rotem Schatten. */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.offer-grid-single { grid-template-columns: minmax(0, 1fr); }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.9rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.offer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(230, 0, 0, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.offer:hover {
  transform: translateY(-6px);
  border-color: var(--border-light);
  box-shadow: 0 20px 60px rgba(230, 0, 0, 0.09);
}

.offer:hover::before { transform: scaleX(1); }

.offer-kicker {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}

.offer-title {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.offer-text { color: var(--text-secondary); font-size: 1rem; }

.offer-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
}

.offer-more .arrow { transition: transform 0.35s var(--ease); }
.offer:hover .offer-more .arrow { transform: translateX(4px); }

/* Die Academy ist das einzige bezahlte Angebot hier – sie bekommt
   Gewicht ueber die dunkle Flaeche, nicht ueber mehr Rot. */
.offer-featured {
  background: var(--ink);
  border-color: transparent;
}

.offer-featured .offer-title { color: #f4f4f4; }
.offer-featured .offer-text { color: #a8a8a8; }
.offer-featured .offer-kicker,
.offer-featured .offer-more { color: #ff4444; }
.offer-featured:hover { box-shadow: 0 24px 64px rgba(14, 14, 14, 0.28); }

/* ---------- Panel (Podcast) ---------- */

.panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.9rem;
}

.panel-title {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.panel-text { color: var(--text-secondary); margin-bottom: 1.4rem; }

/* ---------- Plattform- und Social-Buttons ---------- */

.pf-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.pf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 0.6rem 1.15rem;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pf:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 10px 26px rgba(230, 0, 0, 0.1);
}

.pf .ic { flex: none; }

@media (max-width: 52rem) {
  .confirm { padding: 2.25rem 0 2rem; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .offer { padding: 1.5rem 1.5rem; }
  .panel { padding: 1.5rem 1.25rem; }
  .block { padding: 2rem 0; }
  .block-head { flex-direction: column; gap: 0.25rem; }
}

/* ============================================================
   Anmelde-Popup

   Natives <dialog>: bringt Escape, Fokus-Falle und Backdrop mit,
   dafuer braucht es kein eigenes JavaScript. Die Buttons bleiben
   Links auf /anmelden/ – ohne JavaScript greift der Link.
   ============================================================ */

.signup-modal {
  /* inset + margin:auto zentriert den Dialog. Ohne das haengt er
     oben links, sobald eine eigene Breite gesetzt ist. */
  inset: 0;
  margin: auto;
  width: min(600px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  box-shadow: 0 40px 100px rgba(14, 14, 14, 0.3);
  /* Auf niedrigen Fenstern greift max-height – dann muss der Dialog
     scrollen koennen, sonst wird der Button abgeschnitten. */
  overflow-y: auto;
  overflow-x: hidden;
}

.signup-modal::backdrop {
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(3px);
}

.signup-modal[open] { animation: modal-in 0.35s var(--ease); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Hoehe am Formular ohne Kopfbild gemessen, jeweils in der echten
   Modalbreite: bei 600px endet der Button auf 470px, darueber stehen
   68px Eigenabstand des Formulars – 540px ergibt unten denselben
   Abstand wie oben. Schmal bricht mehr um: 640px Inhalt + 82px.
   Aendert sich das Formular in Brevo, muss das hier nachgezogen
   werden, sonst kippt die Symmetrie wieder. */
.signup-modal iframe {
  display: block;
  width: 100%;
  height: 540px;
  border: 0;
}

.signup-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.signup-modal-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .signup-modal[open] { animation: none; }
}

@media (max-width: 52rem) {
  .signup-modal { border-radius: var(--radius-lg); }
  .signup-modal iframe { height: 725px; }
}

/* ---------- Bilder in Ausgaben ----------
   Stehen im Lesefluss, volle Breite der Lesespalte. Breite und Hoehe
   kommen aus der JSON ins Markup, damit der Platz vor dem Laden steht
   und beim Nachladen nichts springt. Die nativen Seitenverhaeltnisse
   bleiben – einheitlich zuschneiden wuerde Bildern wie dem sehr
   breiten LawZero-Banner den Inhalt nehmen. */

.shot { margin: 1.5rem 0 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.shot figcaption {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Direkt nach einer Ueberschrift darf das Bild naeher heran. */
.section-body h2 + .shot,
.story-title + .shot,
.tool-name + .shot,
.pod-title + .shot { margin-top: 1.1rem; }