/* ============================================================
   Gour-Med · main.css
   Layout + Components.
   Reset → Type → Header → Hero → Cards → Sections → Footer →
   Newsletter Popup → Search Overlay → Utility → Responsive.
   ============================================================ */

/* ── Reset ──────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Global type rules — Papa 2026-05-15 2nd pass: NO global UPPERCASE
 * on headings. Times in mixed-case ist klassischer (Vogue/Falstaff-
 * Konvention) und lesbarer für 45+ Audience. Specifische Eyebrows +
 * Rubric-Tags behalten ihre eigenen text-transform-Regeln. ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.005em;
  margin: 0;
}
h1 { letter-spacing: -0.008em; }

/* Long-form override — Artikel-Hero-Headlines bleiben Mixed-Case */
.gm-headline--longform,
.gm-headline--longform h1,
.gm-headline--longform h2 {
  text-transform: none;
  letter-spacing: var(--tr-display);
}

blockquote, q, cite, .gm-quote, [data-role="quote"] {
  font-family: var(--font-serif);
  font-style: italic;
}

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

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes gm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Eyebrow / Kicker ───────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}
.eyebrow--muted { color: var(--color-muted); }
.eyebrow--ink   { color: var(--color-ink); }
.eyebrow--gold  { color: var(--color-gold); }

/* ── Container ──────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}

/* Brand-strip CSS 2026-05-16 entfernt (User Round-9: "kein Rot drin,
 * nur der Spruch"). Der Spruch lebt jetzt nur INNERHALB des Headers
 * über .gm-header__tagline. */

/* ── Header ─────────────────────────────────────────── */
.gm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  padding: 18px 48px;
  /* CSS-Grid 3-Spalten: Logo links | Tagline/Nav mittig | Actions rechts.
   * Tagline und Nav teilen sich die Mittelspalte (overlap via grid-row:1)
   * — nur eines ist via opacity sichtbar. Dadurch ECHTE Zentrierung
   * unabhängig von Logo/Actions-Breiten. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  transition: padding 320ms var(--ease-out);
}
.gm-header.is-narrow {
  padding: 12px 32px;
}
/* Mobile: hide middle column (tagline + nav), show logo + burger + pill only.
 * Tagline overflow-bug fix: at <700px tagline was 232px wide in a 0px grid
 * column, overflowing onto the logo. Cleanest is just hide it on mobile. */
@media (max-width: 700px) {
  .gm-header {
    padding: 14px 16px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .gm-header__tagline { display: none !important; }
  .gm-header__logo img { height: 28px; }
  .gm-header .btn-pill {
    padding: 8px 14px;
    font-size: 11px;
  }
}
.gm-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.gm-header.is-narrow .gm-header__logo img { height: 32px; }

/* Tagline (Top-State Brand-Anker, v4 2026-05-15 2nd pass).
 * Sitzt zentral in der Header-Zeile zwischen Logo und Actions. Beim
 * Scroll (header.is-narrow ab 80px) fadet die Tagline aus und die
 * Rubrik-Nav fadet ein. NN/g sticky-header research: 300-400ms
 * Transition ist UX-Sweet-Spot.
 *
 * Typografie: Times-italic (font-serif) für editorial-Charakter + kleiner
 * Weinrot-Dot links als Brand-Akzent (Papa-Regel: Markenfarbe als Akzent,
 * nicht als Schrift — der Dot ist ein 6px-Spot, kein Text). */
.gm-header__tagline {
  /* Default = SUBPAGES: tagline hidden, Rubrik-Nav übernimmt vom Anfang an.
   * Nur body.is-home toggled die Tagline ein (Top-State des Homepage-Hero). */
  display: none;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--color-ink-soft);
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.gm-header__tagline-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 6px;
}

.gm-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  gap: 32px;
  /* Default (Subpages) = Nav sofort sichtbar. Homepage overridet
   * unten in body.is-home Section. */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.gm-nav a {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Unified underline mechanism — single ::after pseudo on every nav item.
 * Hover OR Active = scaleX(1). Verhindert die Double-Underline-Kollision
 * (vorher: :hover added border-bottom + .is-active::after = zwei Striche). */
.gm-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-out);
}
.gm-nav a:hover {
  color: var(--color-ink);
}
.gm-nav a:hover::after,
.gm-nav a.is-active::after {
  transform: scaleX(1);
}
.gm-nav a.is-active {
  color: var(--color-ink);
}
.gm-mobile-menu__nav a.is-active {
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-primary);
}

.gm-header__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.gm-iconbtn {
  border: none;
  background: none;
  padding: 6px;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gm-burger {
  display: none;
  border: none;
  background: none;
  padding: 6px 4px;
  color: var(--color-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.gm-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 4px 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.gm-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 1200;
  display: none;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  animation: fadeIn 200ms var(--ease-out);
}
.gm-mobile-menu.is-open { display: flex; }
.gm-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-line);
}
.gm-mobile-menu__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--fs-base);
  cursor: pointer;
}
.gm-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0;
}
.gm-mobile-menu__nav a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-line);
  letter-spacing: -0.02em;
}
.gm-mobile-menu__nav a:hover,
.gm-mobile-menu__nav a.is-active { color: var(--color-ink); }
.gm-mobile-menu__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.gm-mobile-menu__cta .btn {
  justify-content: center;
}
.gm-mobile-menu__meta {
  margin-top: var(--sp-5);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}
.btn-pill {
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
}
.btn-pill--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.btn-pill--primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-primary); }
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-ink); }
.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-bg); }

/* ── Rubrik-Pill ────────────────────────────────────── */
.pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: var(--color-primary-ink);
  background: var(--color-primary);
}
.pill--outline {
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-primary);
}
.pill--inverted {
  color: var(--color-ink);
  background: var(--color-bg);
}
.pill--square {
  padding: 6px 12px;
  border-radius: 0;
}

/* ── Section header ─────────────────────────────────── */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-ink);
}
.section-head__title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
}
.section-head__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.section-head__more {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ─── Home Hero · Split (Claim links · Bild rechts) ─── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 720px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}
.hero-split__copy {
  padding: var(--sp-8) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
}
.hero-split__claim {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-display-light);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: var(--sp-5) 0 0;
  font-style: normal;
  text-transform: none;
}
.hero-split__claim em {
  font-style: italic;
  color: var(--color-ink);
}
.hero-split__lead {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  max-width: 420px;
}
.hero-split__cta { margin-top: var(--sp-6); }
.hero-split__media {
  position: relative;
  overflow: hidden;
  background: var(--color-line);
  min-height: 0;
}
.hero-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fadeIn var(--dur-base) var(--ease-out);
}

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__copy { padding: var(--sp-7) var(--sp-5); }
  .hero-split__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .hero-split__claim { font-size: var(--fs-3xl); }
  .hero-split__copy { padding: var(--sp-6) var(--sp-5); }
}
.hero-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-meta {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

/* ── Dot-Pagination ─────────────────────────────────── */
.dots {
  display: flex;
  gap: 8px;
}
.dots button {
  border: none;
  padding: 0;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-line);
  transition: all var(--dur-fast) var(--ease-out);
}
.dots button.is-active {
  width: 24px;
  background: var(--color-ink);
}
.dots--primary button.is-active { background: var(--color-primary); }

/* ── Round arrow buttons ────────────────────────────── */
.arrow-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.arrow-btn:hover { background: var(--color-accent); }

/* ── Marquee · Logo-Laufband ────────────────────────── */
.marquee {
  padding: 64px 0;
  background: #fff;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
  position: relative;
}
.marquee__lead {
  text-align: center;
  margin-bottom: 32px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}
.marquee__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  width: max-content;
  animation: gm-marquee 40s linear infinite;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  border-left: 1px solid var(--color-line);
  padding-left: 40px;
}

/* ── Latest grid (2×4, tags im bild) ────────────────── */
.latest {
  padding: var(--sp-8) 0;
}
.latest__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  row-gap: var(--sp-8);
}
.latest__more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}
.card-tagged {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card-tagged__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-line);
}
.card-tagged__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.card-tagged:hover .card-tagged__media img { transform: scale(1.04); }
.card-tagged__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px var(--sp-3);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.card-tagged__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
.card-tagged__meta {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* ─── Stats Band — Social Proof Variant A — synced 2026-05-13 ─── */
.stats-band {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--sp-8) var(--sp-5);
}
.stats-band__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.stats-band__item {
  text-align: center;
  border-left: 1px solid var(--color-line);
  padding: var(--sp-2) 0;
}
.stats-band__item:first-child { border-left: none; }
.stats-band__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-display-light);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
  text-transform: none;
}
.stats-band__l {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
@media (max-width: 640px) {
  .stats-band__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

/* ── Events Strip (Homepage) ────────────────────────── */
.events-strip {
  padding: var(--sp-8) var(--sp-7);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.events-strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-6);
}
.events-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.event-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: var(--sp-5) 28px var(--sp-5) 28px;
  border-right: 1px solid var(--color-line);
}
.event-row:first-child { padding-left: 0; }
.event-row:last-child { border-right: none; }
.event-row__day {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 0.9;
  color: var(--color-ink);
  font-style: italic;
  text-align: center;
}
.event-row__month {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-top: var(--sp-1);
  text-align: center;
}
.event-row__cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.event-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  font-style: normal;
}
.event-row__loc {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

/* ── Magazine slider (3 von 9) ──────────────────────── */
.mag-slider {
  padding: var(--sp-8) var(--sp-7);
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}
.mag-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--color-ink);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  gap: var(--sp-6);
}
.mag-slider__counter {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: var(--sp-5);
}
.mag-slider__nav {
  display: flex;
  gap: var(--sp-2);
}
.mag-slider__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  max-width: var(--container-max);
  margin: 0 auto;
  animation: fadeIn var(--dur-base) var(--ease-out);
}
.mag-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.mag-slider__dots button {
  border: none;
  padding: 0;
  width: 8px;
  height: 3px;
  background: var(--color-line);
}
.mag-slider__dots button.is-active {
  width: 28px;
  background: var(--color-ink);
}

/* ── Flipbook cover (3D hover) ──────────────────────── */
.flipbook {
  cursor: pointer;
  perspective: 800px;
  text-decoration: none;
  color: inherit;
}
.flipbook__inner {
  aspect-ratio: 3 / 4;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.flipbook:hover .flipbook__inner {
  transform: rotateY(-8deg) translateY(-6px);
  box-shadow: var(--shadow-md);
}
.flipbook__cover {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.flipbook__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark gradient over the photo for legible white overlay text. */
.flipbook__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5);
  color: #fff;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.55) 100%);
}
.flipbook__brand {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.flipbook__issue {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 6px;
}
.flipbook__spotlight {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.15;
  font-weight: 450;
  font-style: normal;
}
.flipbook__caption {
  padding-top: var(--sp-4);
}
.flipbook__cap-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.flipbook__facts {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.flipbook__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.flipbook__nr {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}
.flipbook__date {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

/* ── Claim block ────────────────────────────────────── */
.claim-block {
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  max-width: 900px;
  margin: 0 auto;
}
.claim-block h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-ink);
}
.claim-block p {
  margin: var(--sp-5) auto 0;
  max-width: 620px;
  font-size: var(--fs-base);
  line-height: 1.58;
  color: var(--color-ink-soft);
}

/* ── Newsletter Block (inline) ──────────────────────── */
.nl-block {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--sp-9) var(--sp-7);
}
.nl-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.nl-block__media {
  position: relative;
}
.nl-block__media-img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.nl-block__caption {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  background: var(--color-surface);
  padding: var(--sp-2) 14px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}
.nl-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
}
.nl-block__lead {
  margin: var(--sp-5) 0 var(--sp-6);
  max-width: 460px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.nl-block__form {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1.5px solid var(--color-ink);
  align-items: stretch;
}
.nl-block__form input {
  background: transparent;
  border: none;
  outline: none;
  padding: var(--sp-4) 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  width: 100%;
}
.nl-block__form button {
  border: none;
  background: transparent;
  color: var(--color-ink);
  padding: 0 var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.nl-block__trust {
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-family: var(--font-meta);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Signature · awg.at-style sticky character + scrolling editorial.
 * The section is intentionally tall (240vh on desktop, 320vh on mobile)
 * to give the sticky-positioned octopus enough scroll-distance to stay
 * fixed while four editorial-line fragments scroll past in front of it.
 *
 * Architecture:
 *   .gm-signature             → tall outer container, white surface
 *   .gm-signature__sticky     → sticky child holding the <video> + <img>
 *   .gm-signature__fragments  → normal-flow content, scrolls over the sticky
 *   .gm-signature__fragment   → one screen-height block per editorial line
 *
 * The video plays autoplay-loop. IntersectionObserver in hero.js
 * pauses it when the section leaves the viewport (battery + CPU win on
 * mobile, where autoplay loops continue decoding even when off-screen).
 * --------------------------------------------------------------- */
.gm-signature {
  position: relative;
  background: var(--color-bg);
  /* min-height tuning history (2026-05-15):
   *   220vh — original. Octopus stayed sticky too long after fragments
   *           ended → user-feedback: "verschwindet zu spät, viel Space links".
   *   160vh — too short, lost the "second hero" gravitas.
   *   200vh — current. Genug Scroll-Strecke für Präsenz, aber Octopus
   *           fadet im Back-Half via animation-range exit 50%..85% aus,
   *           damit der Empty-Space-Beside-Octopus-Effekt nicht
   *           zurückkommt. Whitespace-stretched (padding-bottom + the
   *           50vh exit-range), nicht content-stretched.
   * Siehe Memory [[feedback-octopus-stretch-whitespace]].
   *
   * CRITICAL: do NOT add overflow: hidden / auto / scroll here —
   * any clipping ancestor breaks position:sticky on children. */
  min-height: 200vh;
  padding-bottom: var(--sp-7);
  color: var(--color-ink);
}
/* Scroll-driven fade-out · modern CSS path.
 * Im Back-Half (exit 50%..85%) fadet die Sticky-Opacity von 1 auf 0.
 * Browser ohne Scroll-Driven-Animation-Support (Safari) behalten initial
 * opacity 1 — der JS-Fallback in hero.js setzt opacity via inline style
 * mit identischer Range. */
@supports (animation-timeline: view()) {
  .gm-signature { view-timeline-name: --gm-sig; view-timeline-axis: block; }
  .gm-signature__sticky {
    animation: gm-sig-fade-out linear both;
    animation-timeline: --gm-sig;
    animation-range: exit 50% exit 85%;
  }
  @keyframes gm-sig-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }
}
.gm-signature__sticky {
  position: sticky;
  top: 38vh;
  height: 62vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 4vw 0 0;
  /* pointer-events: none → der octopus-Charakter selbst ist NICHT
   * klickbar (User Round-9: "nicht der ganze Opus, nur das Magazin").
   * Der heft-hotspot setzt sich selber pointer-events:auto, das
   * überschreibt parent:none auf dem Hotspot. */
  pointer-events: none;
  z-index: 2;
}
.gm-signature__art {
  display: block;
  /* Skaliert mit dem neuen 62vh-Sticky. Max-width auf 42vw runter
   * (vorher 55vw) — Octopus war zu dominant, jetzt diskreter aber
   * immer noch präsent. */
  height: 62vh;
  width: auto;
  max-width: 42vw;
  filter: brightness(1.06) contrast(1.02);
}

.gm-signature__fragments {
  /* Pull fragments UP to overlap the sticky (which is 88vh tall).
   * Without overlap, section becomes 88vh + 220vh = 308vh tall and
   * the first fragment doesn't appear until the user has already
   * scrolled past most of the octopus reveal. With overlap, fragments
   * scroll IN FRONT of the octopus as the user scrolls. */
  margin-top: -88vh;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
}
.gm-signature__fragment {
  /* No min-height. Each fragment is sized to its content + breathing room
   * (sp-6 = 32px top/bottom padding). Previous attempts at 55vh / 40vh
   * forced short fragments (prose, names, final-line) into oversized boxes
   * with content vertically-centered — leaving ~17vh of empty space above
   * AND below the content inside each fragment. Stacked, the gap between
   * fragment-1's TOC bottom and fragment-2's prose top hit ~25vh of pure
   * whitespace. With min-height removed and content top-aligned, the visible
   * gap collapses to just 2 × sp-6 = 64px between fragments. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--sp-6) var(--sp-7);
  /* Start hidden — IntersectionObserver adds .is-shown to reveal. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.gm-signature__fragment.is-shown {
  opacity: 1;
  transform: none;
}
/* Text column sits in the CENTER-LEFT (not viewport-edge-left), bringing
 * the composition toward viewport center and closing the X-axis dead-air
 * corridor that previously sat between left-aligned text and right-anchored
 * octopus. With padding-left: 16vw the text column starts at ~230px from
 * viewport-left on a 1440 viewport — visually balanced with the octopus
 * on the right, not split into two distant halves with empty middle. */
.gm-signature__fragment {
  align-items: flex-start;
  text-align: left;
  /* Text column padding-right hochgezogen (2026-05-15 3rd pass nach Audit):
   * vorher 24vw → jetzt 46vw, damit Text NIEMALS in den Octopus-Bereich
   * läuft (Octopus = 4vw padding + 42vw width = 46vw vom rechten Rand).
   * Papa-Report: "Ohne Skipass" lief vorher in den Octopus rein. */
  padding-left: 11vw;
  padding-right: 46vw;
}
@media (max-width: 900px) {
  /* Mobile: Octopus floats over content — fragments breath full-width.
   * Octopus opacity/scale wird durch reduce-motion + responsive CSS
   * weiter unten gedämpft. */
  .gm-signature__fragment {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
}

.gm-signature__fragment-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--sp-5);
  font-family: var(--font-body);
  /* Bumped 10.5 → 12.5px so the kicker reads from across the room on
   * doctor-audience displays. Memory: feedback-readability-older-audience. */
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Heft-Anker · Combo A — eine Zeile mit Heft-Nummer + Theme. Garamond
 * normal+italic-Mix. Roman für "Heft Nº 84 —", italic+burgund für "Die
 * stille Küche." Ablöst das frühere Display-N°-Treatment, weil das mit
 * der Print-DNA-Strenge schon im Closer reicht. */
.gm-signature__fragment-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  /* Display-Sprung Stripe-Press-Skala: 36-64 → 56-104. Section-Hero soll
   * physisch laut sein, nicht eine zweite Stimme neben dem Octopus. */
  font-size: clamp(56px, 7vw, 104px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  max-width: 960px;
}
.gm-signature__fragment-title sup {
  font-size: 0.55em;
  vertical-align: 0.45em;
  font-style: italic;
  font-weight: 400;
}
.gm-signature__fragment-title em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}
/* Coda — short italic body line below the main display, gives editorial
 * context without becoming marginalia-noise. */
.gm-signature__fragment-coda {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 720px;
}
/* Highlighted keywords — The Drift technique of marking key words in
 * accent-burgund to create a typographic puzzle. Italic + burgund draws
 * the eye through the manifesto-paragraph; the eye reads keywords
 * first, then re-reads the sentence around them. */
.gm-signature__hl {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}
.gm-signature__fragment-line--prose {
  font-style: normal;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 640px;
}
/* Pairings · Combo A — Apartamento-Stil. Vier italic Zeilen, jede ein
 * Mini-Hook in einen Beitrag. Garamond italic, mittlere Display-Grösse,
 * großzügige Zeilenhöhe damit jede Zeile als eigener Gedanke landet. */
.gm-signature__pairings {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Pairings sind die "Hooks" der Sektion — jede Zeile ein Mini-Lead in
   * einen Beitrag. Vergrößert (24-36 → 32-52) damit jede Zeile als eigene
   * Display-Stimme landet, nicht als Listen-Detail. */
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--color-ink);
  max-width: 920px;
}
.gm-signature__pairings li + li {
  margin-top: var(--sp-3);
}
/* Heft-Inhalt TOC — print-magazine table-of-contents listing under
 * the Heft N° 84 title. Each row has a numbered prefix and the title.
 * Fills the otherwise-empty vertical space in fragment 1 with concrete
 * editorial content from the actual issue. */
.gm-signature__toc {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  max-width: 560px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.gm-signature__toc li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
  color: var(--color-ink);
}
.gm-signature__toc-num {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-muted);
  flex-shrink: 0;
  min-width: 32px;
}
.gm-signature__toc-title {
  flex: 1;
}
.gm-signature__fragment-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
}
.gm-signature__fragment-line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* v9 2026-05-16: octopus theater fragment-line per spec H2 range */
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
  /* Widened from 540 → 720 so prose-paragraph reaches further toward
   * the octopus, eliminating the visible gap in middle of viewport. */
  max-width: 720px;
}
.gm-signature__fragment-line--small {
  font-style: normal;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: none;
}
/* Closer · Combo A — drei Zeilen Numerale (Erstausgabe-Datum, Auflagen).
 * Garamond Roman, mittlere Größe, leichter selbstironischer Schwung in
 * der letzten Zeile durch italic. Lapham's-Tonalität. */
.gm-signature__fragment-closer {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  max-width: 540px;
}
.gm-signature__fragment-closer em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}

/* Tablet — analog shift toward viewport center (padding-left increases),
 * octopus still right-bottom but smaller. */
@media (max-width: 1024px) {
  .gm-signature__fragment { padding-right: 40vw; padding-left: 10vw; }
  .gm-signature__art { height: 78vh; max-width: 60vw; }
  .gm-signature__sticky { padding-right: 4vw; }
}

/* Mobile — single-column. Octopus sits CENTERED-bottom (not right-aligned)
 * because right-align cuts off too much on narrow screens. Fragments
 * stack centered, sized to content (no min-height — same rationale as
 * desktop: oversized boxes create whitespace, content drives height). */
@media (max-width: 700px) {
  .gm-signature__sticky {
    justify-content: center;
    padding: 0 0 var(--sp-5) 0;
  }
  .gm-signature__art { height: 60vh; max-width: 90vw; }
  .gm-signature__fragment {
    padding: var(--sp-6) var(--sp-5);
    align-items: center;
    text-align: center;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
  .gm-signature__fragment-line { font-size: clamp(30px, 8vw, 48px); }
}

/* ── Closer · Stripe Press curtain-reveal ────────────────────
 * Sticky-top pinned dark-burgund stage that the footer (later in DOM)
 * scrolls OVER. As user reaches end of page, the closer stage is
 * visible — its 100vh height matches viewport. Once footer starts
 * scrolling in from below, it covers the closer like a curtain rising.
 * Scrolling back UP, the closer is re-revealed.
 *
 * CRITICAL: no overflow: hidden on any ancestor, or sticky breaks.
 * DOM order matters: closer must come BEFORE footer; footer natural
 * stacking puts it above the closer without z-index hacks. */
.gm-closer {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  display: flex;
  /* Content anchored to the upper third of the closer. Sticky-pin holds
   * the closer at viewport-top while the footer scrolls in from the
   * bottom — the lower the content sits, the sooner the footer covers
   * it. Padding-top 6vh + tightened internal margins keep the CTA
   * within the upper 55% of viewport, visible across the entire
   * curtain-reveal scroll window. */
  align-items: flex-start;
  justify-content: center;
  padding-top: 6vh;
  overflow: hidden;
  z-index: 0;
}
.gm-closer__inner {
  text-align: center;
  max-width: 960px;
  padding: var(--sp-7) var(--sp-7);
}
.gm-closer__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-4);
}
.gm-closer__rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,0.5);
}
.gm-closer__title {
  font-family: var(--font-display);
  font-weight: 500;
  /* v9 2026-05-16: closer-section deprecated; size kept restrained falls noch genutzt */
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.014em;
  margin: 0 0 var(--sp-5);
  color: #fff;
}
.gm-closer__title em {
  font-style: italic;
  color: rgba(255,255,255,0.85);
}
.gm-closer__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  margin: 0 auto var(--sp-6);
  max-width: 540px;
}
.gm-closer__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}
.gm-closer__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 220ms var(--ease-out), background 220ms ease;
}
.gm-closer__cta:hover { transform: translateY(-1px); background: var(--color-accent); }
.gm-closer__link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 4px;
  transition: border-color 220ms ease;
}
.gm-closer__link:hover { border-bottom-color: #fff; }
@media (max-width: 700px) {
  .gm-closer__inner { padding: var(--sp-7) var(--sp-5); }
  .gm-closer__title { font-size: clamp(56px, 13vw, 100px); }
  .gm-closer__lead { font-size: clamp(17px, 4vw, 22px); }
  .gm-closer__actions { gap: var(--sp-5); }
}

/* ── Footer ─────────────────────────────────────────── */
.gm-footer {
  background: var(--color-dark);
  color: var(--color-dark-fg);
  font-family: var(--font-body);
  /* Sits above the sticky-pinned .gm-closer in stacking order via DOM
   * order — no z-index needed, but a relative position ensures the
   * footer creates its own stacking context so it cleanly covers. */
  position: relative;
  z-index: 1;
}
.gm-footer__main {
  padding: 70px 48px 80px;
}
.gm-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}
.gm-footer__logo {
  width: 240px;
  height: auto;
  display: block;
  margin-bottom: 28px;
  filter: brightness(0) invert(1);
}
.gm-footer__manifest {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-dark-fg);
  max-width: 360px;
  margin-bottom: 36px;
  letter-spacing: -0.005em;
}
.gm-footer__social {
  display: flex;
  gap: 18px;
}
.gm-footer__social a,
.gm-footer__social span {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-dark-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-dark-line);
  padding-bottom: 4px;
}
.gm-footer__social span { cursor: default; opacity: 0.6; }
.gm-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.gm-footer__h {
  color: var(--color-dark-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  margin: 0 0 22px;
}
.gm-footer a.link {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-dark-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 2;
  display: block;
  text-decoration: none;
}
.gm-footer a.link:hover { color: var(--color-ink); }
.gm-footer__nl input[type="email"] {
  width: 100%;
  background: var(--color-dark-soft);
  border: 1px solid var(--color-dark-line);
  padding: 12px 14px;
  color: var(--color-dark-fg);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  outline: none;
  margin-bottom: 14px;
}
.gm-footer__nl input[type="email"]::placeholder {
  color: var(--color-dark-muted);
}
.gm-footer__nl button {
  width: 100%;
  background: var(--color-primary);
  border: none;
  color: var(--color-primary-ink);
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background var(--dur-fast) var(--ease-out);
}
.gm-footer__nl button:hover { background: var(--color-primary); border-color: var(--color-ink); }
.gm-footer__bottom {
  background: var(--color-dark-soft);
  border-top: 1px solid var(--color-dark-line);
  color: var(--color-dark-muted);
  padding: 20px 48px;
}
.gm-footer__bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-dark-muted);
  letter-spacing: 0.06em;
}

/* ── Newsletter Popup (modal) ───────────────────────── */
.nl-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-4);
  animation: fadeIn 240ms var(--ease-out);
}
.nl-popup-backdrop.is-open { display: flex; }
.nl-popup {
  width: 760px;
  max-width: 100%;
  background: var(--color-bg);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.32),
              0 8px 24px rgba(0, 0, 0, 0.14);
  position: relative;
  border: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 300px 1fr;
  font-family: var(--font-body);
  overflow: hidden;
}
.nl-popup__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-primary) 0,
    var(--color-primary) 300px,
    var(--color-gold) 300px,
    var(--color-gold) 100%);
  z-index: 3;
}
.nl-popup__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: var(--color-ink);
  border-radius: 50%;
  font-size: var(--fs-xs);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nl-popup__brief {
  background: var(--color-dark);
  color: var(--color-dark-fg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
}
.nl-popup__brief-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-dark-line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}
.nl-popup__brief-meta span:last-child { color: var(--color-dark-muted); }
.nl-popup__masthead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-5);
}
.nl-popup__masthead em { color: var(--color-gold); font-style: italic; }
.nl-popup__toc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.nl-popup__toc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--color-dark-line);
}
.nl-popup__toc-item .kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 3px;
}
.nl-popup__toc-item .title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-surface);
}
.nl-popup__toc-item .meta {
  font-size: 9.5px;
  color: var(--color-dark-muted);
  font-variant-numeric: tabular-nums;
}
.nl-popup__sig {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-dark-line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--color-dark-muted);
}
.nl-popup__form {
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
}
.nl-popup__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.nl-popup__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}
.nl-popup__h {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
}
.nl-popup__h em { font-style: italic; color: var(--color-ink); }
.nl-popup__lead {
  margin: 0 0 var(--sp-5);
  /* v9 2026-05-16: doctor-audience 45+ readability — body min 17 */
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 360px;
}
.nl-popup__readers {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-line);
}
.nl-popup__avatars { display: flex; }
.nl-popup__avatars span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  margin-left: -6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10px;
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nl-popup__avatars span:first-child { margin-left: 0; }
.nl-popup__readers-text {
  font-size: 11.5px;
  color: var(--color-ink-soft);
  line-height: 1.35;
}
.nl-popup__readers-text strong { color: var(--color-ink); font-weight: 600; }
.nl-popup__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.nl-popup__input {
  width: 100%;
  padding: var(--sp-3) 0;
  border: none;
  border-bottom: 1.5px solid var(--color-ink);
  outline: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
  background: transparent;
  color: var(--color-ink);
}
.nl-popup__check {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: 10.5px;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.nl-popup__check input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-ink);
}
.nl-popup__submit {
  width: 100%;
  padding: var(--sp-4);
  border: none;
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.nl-popup__submit:hover { background: var(--color-primary); }
.nl-popup__submit span:last-child { color: var(--color-gold); }
.nl-popup__assurances {
  margin-top: var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--color-muted);
}
.nl-popup__assurances .check { color: var(--color-gold); margin-right: var(--sp-1); }

/* ── Search Overlay ─────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1100;
  padding: 12vh var(--sp-5) var(--sp-5);
  animation: fadeIn 200ms var(--ease-out);
}
.search-overlay.is-open { display: flex; }
.search-overlay__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--color-surface);
  font-size: var(--fs-base);
}
.search-overlay__inner {
  width: 100%;
  max-width: 760px;
}
.search-overlay__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-3);
}
.search-overlay__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  outline: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  color: var(--color-surface);
  padding: var(--sp-3) 0 var(--sp-4);
  letter-spacing: -0.02em;
}
.search-overlay__input::placeholder { color: rgba(255, 255, 255, 0.35); }
.search-overlay__hint {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.search-overlay__hint em {
  font-style: italic;
  color: var(--color-gold);
}
.search-overlay__results {
  margin-top: var(--sp-6);
}
.search-overlay__hit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-decoration: none;
}
.search-overlay__hit:hover .search-overlay__hit-title { color: var(--color-gold); }
.search-overlay__hit-rubric {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}
.search-overlay__hit-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-surface);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out);
}
.search-overlay__hit-arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-base);
}

/* ── Article Detail ─────────────────────────────────── */
.art-progress {
  position: sticky;
  top: 80px;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
  z-index: 10;
  transition: top var(--dur-fast) var(--ease-out);
}
body:has(.gm-header.is-narrow) .art-progress { top: 68px; }
.art-progress__bar {
  height: 100%;
  width: 12%;
  background: var(--color-primary);
  transition: width 120ms linear;
}
.art-hero {
  padding: 64px 48px 48px;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.art-hero__pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.art-hero__h1 {
  font-family: var(--font-display);
  /* v9 2026-05-16: article-page h1 restraint — long-read needs scannable lead, not display-billboard */
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: 0;
}
.art-hero__lead {
  margin: 28px auto 0;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  font-style: italic;
  font-family: var(--font-display);
}
.art-hero__tags {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.tag-outline {
  padding: 5px 12px;
  border: 1px solid var(--color-primary);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.art-hero__byline {
  margin-top: 36px;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
}
.art-hero__byline strong { font-weight: 600; color: var(--color-ink); }
.art-hero__byline span.dot { opacity: 0.5; }
.art-fullbleed {
  padding: 0 48px;
}
.art-fullbleed__inner {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--color-line);
  overflow: hidden;
}
.art-fullbleed__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-body {
  max-width: 680px;
  margin: 80px auto 0;
  padding: 0 48px;
}
.art-body p {
  margin: 0 0 28px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
}
.art-body p.lead {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
}
.art-body h2 {
  margin: 56px 0 24px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-ink);
}
.art-body .dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink);
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
}
.art-body .pullquote {
  margin: 48px 0;
  padding: 0 0 0 32px;
  border-left: 2px solid var(--color-primary);
}
.art-body .pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.art-body .pullquote footer {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-style: normal;
}
.art-body figure {
  margin: 56px 0;
  margin-left: -48px;
  margin-right: -48px;
}
.art-body figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-line);
}
.art-body .video {
  margin: 56px 0;
  margin-left: -48px;
  margin-right: -48px;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.art-body .video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.art-body .video__btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-bg);
}
.art-body .video__meta {
  position: relative;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.art-body .video__caption {
  position: relative;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  max-width: 420px;
}
.art-body .tone {
  margin: 0 0 48px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-ink);
}
.author-box {
  margin: 64px 0 0;
  padding: 32px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 24px;
  align-items: center;
}
.author-box__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
}
.author-box__role {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.author-box__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.author-box__bio {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
}
.share-row {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}
.share-row button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.share-row button:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.share-row button svg { display: block; }

/* ── Article Recommendations · Cabinet ──────────────── */
.cabinet {
  padding: 96px 48px;
  background: #fff;
  border-top: 1px solid var(--color-primary);
}
.cabinet__head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 48px;
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto 48px;
}
.cabinet__kicker {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 12px;
  border-top: 1px solid var(--color-ink);
}
.cabinet__h {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.cabinet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.cabinet__item { cursor: pointer; }
.cabinet__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-line);
  margin-bottom: 18px;
}
.cabinet__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cabinet__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cabinet__num {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 48px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 0.8;
}
.cabinet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.cabinet__why {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.cabinet__tags {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cabinet__tags span {
  padding: 3px 9px;
  border: 1px solid var(--color-primary);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cabinet__author {
  margin: 14px 0 0;
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Rubrik-Page ────────────────────────────────────── */
.rubric-manifest {
  padding: 96px 48px 56px;
  max-width: 1100px;
  margin: 0 auto;
}
.rubric-manifest__breadcrumb {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-5);
}
.rubric-manifest__h1 {
  margin: 0;
  font-family: var(--font-display);
  /* v9 2026-05-16: rubric manifest restraint — manifest is short, not display-billboard */
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  text-transform: none;
}
.rubric-manifest__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.rubric-manifest__motto {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0;
}
.rubric-manifest__intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 480px;
}

.editors-pick {
  padding: 0 var(--sp-7) var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
}
.editors-pick__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: center;
}
.editors-pick__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-line);
}
.editors-pick__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editors-pick__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-5);
  padding-top: 20px;
  border-top: 2px solid var(--color-primary);
}
.editors-pick__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.editors-pick__lead {
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.78);
}
.editors-pick__byline {
  margin-top: 36px;
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
}
.editors-pick__byline strong { font-weight: 600; }
.editors-pick__cta {
  margin-top: var(--sp-6);
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.column-strand {
  padding: 80px 0 var(--sp-9);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.column-strand__head {
  padding: 0 var(--sp-7);
  max-width: var(--container-max);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-6);
}
.column-strand__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.column-strand__nav {
  display: flex;
  gap: var(--sp-3);
}
.column-strand__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--fs-base);
}
.column-strand__grid {
  padding: 0 var(--sp-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  max-width: var(--container-max);
  margin: 0 auto;
}
.column-card { cursor: pointer; }
.column-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-line);
  margin-bottom: var(--sp-4);
  position: relative;
}
.column-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column-card__pill {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.column-card__issue {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.column-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.column-card__dek {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
}
.column-card__author {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-meta);
  font-size: 10.5px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Rubrik filter pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.filter-pills button {
  padding: 10px 18px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-pills button.is-active {
  border-color: var(--color-ink);
  background: var(--color-primary);
  color: #fff;
}

.rubric-grid {
  padding: var(--sp-9) var(--sp-7) 80px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.rubric-grid__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.rubric-grid__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.rubric-grid__count {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rubric-grid__pills { margin-bottom: 56px; }
.rubric-grid__items {
  display: grid;
  /* Round-11.5 2026-05-16 · Papa-Mail 11:21 Image-2: "Hier auch besser 4
     Beiträge mit Querfoto". 3-col → 4-col. Responsive-Step bei 1200px
     auf 3, 900px auf 2, 600px auf 1. */
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 28px;
}
@media (max-width: 1200px) {
  .rubric-grid__items { grid-template-columns: repeat(3, 1fr); }
}
.rubric-grid__more {
  margin-top: var(--sp-8);
  text-align: center;
}
.rubric-card { cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.rubric-card__media {
  position: relative;
  /* Round-11.5 2026-05-16 · Papa-Mail 11:21 Image-2: "Querfoto — hochkant-
     und quadratische Fotos problematisch". Wechsel von Portrait 4/5 zu
     Querformat 16/10 für visuelle Konsistenz mit Aufmacher + AKTUELL. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-line);
}
.rubric-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rubric-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-primary);
  color: #fff;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rubric-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-transform: none;
}
.rubric-card:hover .rubric-card__title {
  color: var(--color-ink);
}
.rubric-card__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.gm-toc__more:hover { opacity: 0.7; }

.rubric-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Plain colored hashtag text — no border-pill. Aligned with homepage
 * (.gm-catalog__tag, .gm-toc__tag, .gm-picks__tag) for consistency.
 * The border-pill was the source of the user's "rot unterstrichen"-
 * Verwirrung — Pill-Borders sahen wie Unterstreichungen unterhalb des
 * Titels aus, dann kam beim Hover noch eine echte Unterstreichung
 * darüber. Beide Striche jetzt entfernt; Hover färbt nur den Titel. */
.rubric-card__tags span {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.rubric-card__byline {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rubric-card__byline span.dot { opacity: 0.5; }

/* ── Hefte (Magazin-Archiv) ─────────────────────────── */
.archive-hero {
  padding: var(--sp-10) var(--sp-7) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.archive-hero__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.archive-hero__lead {
  margin: var(--sp-6) 0 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tr-body);
  color: var(--color-ink-soft);
}
.archive-grid {
  padding: var(--sp-7) var(--sp-7) var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
}
.archive-grid__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.archive-section {
  padding: 0 var(--sp-7) var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
}
.archive-section__h {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}
.archive-section__list a {
  display: grid;
  grid-template-columns: 60px 100px 1fr auto;
  gap: var(--sp-5);
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.archive-section__list a:hover .archive-section__title { color: var(--color-ink); }
.archive-section__rubric {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.archive-section__cover {
  aspect-ratio: 3 / 4;
  background: var(--color-line);
  overflow: hidden;
}
.archive-section__cover img { width: 100%; height: 100%; object-fit: cover; }
.archive-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: italic;
  letter-spacing: var(--tr-body);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.archive-section__byline {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--sp-1);
}
.archive-section__arrow {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-ink);
}

/* ── Heft-Detail ────────────────────────────────────── */
.issue-hero {
  padding: var(--sp-9) var(--sp-8) var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
}
.issue-hero__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-9);
  align-items: start;
}
.issue-hero__cover {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.18);
  transform: rotate(-1.5deg);
  background: var(--color-line);
  transition: transform 600ms var(--ease-out);
}
.issue-hero__cover:hover { transform: rotate(-1deg) translateY(-4px); }
.issue-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.issue-hero__photo {
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-muted);
  margin-top: var(--sp-5);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.issue-hero__meta {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  margin-bottom: var(--sp-5);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.issue-hero__meta strong { color: var(--color-ink); font-weight: 600; }
.issue-hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.issue-hero__sub {
  margin: var(--sp-6) 0 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-ink-soft);
}
.issue-hero__stats {
  display: flex;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.issue-hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-style: italic;
}
.issue-hero__stat-lbl {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--sp-2);
}
.issue-hero__buy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-7);
}
.issue-hero__price {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  font-style: italic;
}
.issue-hero__price-sub {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--sp-2);
}
.issue-hero__cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.issue-vorwort {
  background: var(--color-accent);
  padding: var(--sp-10) var(--sp-8);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.issue-vorwort__inner {
  max-width: 880px;
  margin: 0 auto;
}
.issue-vorwort__lbl {
  text-align: center;
  margin-bottom: var(--sp-7);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}
.issue-vorwort__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  text-align: center;
}
.issue-vorwort__lead {
  margin: var(--sp-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.issue-vorwort__lead .dropcap {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-5xl);
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--color-ink);
}
.issue-vorwort__body {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.issue-vorwort__sig {
  margin-top: var(--sp-7);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.issue-toc {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.issue-toc__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  column-gap: var(--sp-9);
}
.toc-rubric { break-inside: avoid; margin-bottom: var(--sp-2); }
.toc-rubric__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.toc-rubric__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toc-rubric__circle span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-surface);
  font-weight: 500;
}
.toc-rubric__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.toc-rubric__rule {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.toc-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.toc-row:hover .toc-row__t { color: var(--color-ink); }
.toc-row__p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
}
.toc-row__t {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--color-ink);
  line-height: 1.3;
  font-style: italic;
  transition: color var(--dur-fast) var(--ease-out);
}
.toc-row__a {
  margin-top: var(--sp-1);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.toc-row__arrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.issue-spotlight {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--sp-10) var(--sp-8);
}
.issue-spotlight__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.issue-spotlight__head { margin-bottom: var(--sp-8); }
.issue-spotlight__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.issue-spotlight__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.spot-card { cursor: pointer; }
.spot-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-line);
}
.spot-card.is-big .spot-card__media { aspect-ratio: 4 / 5; }
.spot-card__media img { width: 100%; height: 100%; object-fit: cover; }
.spot-card__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.spot-card__meta span.dot { opacity: 0.4; }
.spot-card__h {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-bg);
  font-style: italic;
}
.spot-card.is-big .spot-card__h { font-size: var(--fs-xl); }
.spot-card__dek {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(244, 239, 232, 0.7);
}
.spot-card.is-big .spot-card__dek { font-size: var(--fs-sm); }
.spot-card__author {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.5);
}

.contributors {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.contributors__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6);
  row-gap: var(--sp-7);
}
.contributor { text-align: left; }
.contributor__avatar {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-line);
}
.contributor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.contributor__name {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  line-height: 1.2;
}
.contributor__role {
  margin-top: var(--sp-1);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.backlist {
  background: var(--color-accent);
  padding: var(--sp-9) var(--sp-8);
  border-top: 1px solid var(--color-line);
}
.backlist__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.backlist__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-6);
}
.back-card { cursor: pointer; text-decoration: none; color: inherit; }
.back-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform var(--dur-fast) var(--ease-out);
}
.back-card:hover .back-card__media { transform: translateY(-4px); }
.back-card__media img { width: 100%; height: 100%; object-fit: cover; }
.back-card__nr {
  margin-top: var(--sp-4);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.back-card__t {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.back-card__s {
  margin-top: 6px;
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* ── Author page ────────────────────────────────────── */
.author-hero {
  padding: var(--sp-9) var(--sp-8) var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
}
.author-hero__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-9);
  align-items: start;
}
.author-hero__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-line);
}
.author-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.author-hero__photo {
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-muted);
  margin-top: var(--sp-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.author-hero__bio { padding-top: var(--sp-5); }
.author-hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.author-hero__role {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.author-hero__short {
  margin: var(--sp-6) 0 0;
  max-width: 540px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.author-hero__long {
  margin: var(--sp-6) 0 0;
  max-width: 540px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.author-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  max-width: 540px;
}
.author-hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-style: italic;
}
.author-hero__stat-lbl {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--sp-2);
}
.author-hero__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  flex-wrap: wrap;
}
.author-hero__actions .btn-pill,
.author-hero__actions .btn-pill--outline {
  padding: 14px var(--sp-5);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.author-quote {
  background: var(--color-accent);
  padding: var(--sp-10) var(--sp-8);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.author-quote__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.author-quote__p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.author-quote__sig {
  margin-top: var(--sp-6);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.author-works {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.author-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  row-gap: var(--sp-8);
}

.author-column {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--sp-9) var(--sp-8);
}
.author-column__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-8);
  align-items: start;
}
.author-column__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--color-surface);
}
.author-column__lead {
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(244, 239, 232, 0.7);
  max-width: 360px;
}
.author-column__cta {
  margin-top: var(--sp-6);
  background: var(--color-gold);
  color: var(--color-ink);
  border: none;
  padding: 14px var(--sp-5);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
}
.author-column__list a {
  display: grid;
  grid-template-columns: 80px 100px 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid rgba(244, 239, 232, 0.2);
  text-decoration: none;
  color: inherit;
}
.author-column__list a:first-child { border-top: 1px solid rgba(244, 239, 232, 0.2); }
.author-column__list a:hover .acl-title { color: var(--color-gold); }
.acl-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-gold);
}
.acl-date {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  color: rgba(244, 239, 232, 0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acl-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-bg);
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}
.acl-arrow {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: rgba(244, 239, 232, 0.4);
}

.author-merits {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.author-merits__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-9);
  align-items: start;
}
.author-merits__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.author-merits__list {
  margin-top: var(--sp-6);
  list-style: none;
}
.author-merits__list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.author-merits__list li:first-child { border-top: 1px solid var(--color-line); }
.author-merits__y {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--color-ink);
}
.author-merits__t {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  line-height: 1.4;
}
.author-quotes-list {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-6);
}
.author-quotes-list blockquote {
  margin: 0;
  padding: var(--sp-5) 28px;
  background: var(--color-accent);
  border-left: 2px solid var(--color-primary);
}
.author-quotes-list blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.author-quotes-list blockquote footer {
  margin-top: var(--sp-4);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.author-contact {
  background: var(--color-primary);
  color: var(--color-surface);
  padding: var(--sp-9) var(--sp-8);
}
.author-contact__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: center;
}
.author-contact__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.author-contact__lead {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 540px;
}
.author-contact__email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-surface);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.author-contact__time {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  opacity: 0.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
  display: block;
}

/* ── Subscription page ─────────────────────────────── */
.sub-hero {
  padding: var(--sp-10) var(--sp-8) var(--sp-9);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.sub-hero__inner { max-width: 1100px; margin: 0 auto; }
.sub-hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--color-ink);
}
.sub-hero__lead {
  margin: var(--sp-6) auto 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tr-body);
  color: var(--color-ink-soft);
}
.sub-hero__stats {
  display: flex;
  gap: 56px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-line);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sub-plans {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.sub-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.plan {
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: var(--sp-6) var(--sp-6) 36px;
  display: flex;
  flex-direction: column;
}
.plan.is-featured {
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  transform: translateY(-12px);
  box-shadow: var(--shadow-md);
}
.plan__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 20px;
}
.plan.is-featured .plan__kicker { color: var(--color-gold); }
.plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.plan__price-num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-style: italic;
}
.plan__price-cad {
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.plan.is-featured .plan__price-cad { color: var(--color-dark-muted); }
.plan__divider {
  height: 1px;
  background: var(--color-line);
  margin: var(--sp-6) 0 var(--sp-5);
}
.plan.is-featured .plan__divider { background: var(--color-dark-line); }
.plan__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.plan__features li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.plan.is-featured .plan__features li { color: rgba(244, 239, 232, 0.9); }
.plan__features li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.plan.is-featured .plan__features li::before { background: var(--color-gold); }
.plan__cta {
  margin-top: var(--sp-6);
  width: 100%;
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
}
.plan.is-featured .plan__cta {
  background: var(--color-gold);
  color: var(--color-ink);
}
.plan__note {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.plan.is-featured .plan__note { color: rgba(244, 239, 232, 0.6); }

.whats-in {
  background: var(--color-accent);
  padding: var(--sp-10) var(--sp-8);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.whats-in__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.whats-in__head { text-align: center; margin-bottom: var(--sp-9); }
.whats-in__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}
.whats-in__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}
.wbox__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--sp-5);
  background: var(--color-line);
}
.wbox__media img { width: 100%; height: 100%; object-fit: cover; }
.wbox__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}
.wbox__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.wbox__d {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.gift-grid {
  padding: var(--sp-9) var(--sp-8);
  max-width: var(--container-max);
  margin: 0 auto;
}
.gift-grid__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.gift-card {
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
}
.gift-card__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.gift-card__d {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.gift-card__cta {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: var(--sp-1);
  align-self: flex-start;
}

.faq {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--sp-10) var(--sp-8);
}
.faq__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-8);
  align-items: start;
}
.faq__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.faq details {
  border-bottom: 1px solid var(--color-dark-line);
  padding: var(--sp-5) 0;
  cursor: pointer;
}
.faq details:first-child { border-top: 1px solid var(--color-dark-line); }
.faq summary {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--color-bg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  letter-spacing: var(--tr-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--color-gold);
  font-size: var(--fs-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { content: '−'; }
.faq details p {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-dark-muted);
}

.testimonial {
  padding: var(--sp-9) var(--sp-8);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.testimonial__p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.testimonial__sig {
  margin-top: var(--sp-6);
  font-family: var(--font-meta);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Prose (Service-Pages: Impressum, AGB, …) ───────── */
.prose-hero {
  padding: 120px 48px 64px;
  max-width: 880px;
  margin: 0 auto;
}
.prose-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 28px;
}
.prose-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  /* v9 2026-05-16: service-pages restraint */
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--color-ink);
}
.prose-hero__lead {
  margin: 32px 0 0;
  max-width: 640px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--color-ink-soft);
}
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 48px 96px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
  hyphens: auto;
}
.prose h2 {
  margin: 48px 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink);
}
.prose h3 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--color-ink);
}
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { margin: 0 0 6px; }
.prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose strong { font-weight: 600; }
.prose em { font-style: italic; font-family: var(--font-display); }
.prose .meta {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 32px;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 48px 0;
}
.prose dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px 32px;
  margin: 24px 0;
}
.prose dt {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 4px;
}
.prose dd { margin: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 48px 96px;
}
.contact-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 24px 0 6px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--color-ink);
  outline: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  padding: 10px 0;
  color: var(--color-ink);
  resize: vertical;
}
.contact-form textarea { font-family: var(--font-body); font-style: normal; font-size: 16px; line-height: 1.5; min-height: 140px; padding: 14px 0; }
.contact-form button {
  margin-top: 32px;
}
.contact-meta {
  font-family: var(--font-body);
}
.contact-meta__h {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.contact-meta__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}
.contact-meta dl { grid-template-columns: 120px 1fr; gap: 12px 24px; }

@media (max-width: 900px) {
  .prose-hero { padding: 64px 24px 32px; }
  .prose-hero h1 { font-size: 56px; }
  .prose { padding: 16px 24px 64px; }
  .prose dl { grid-template-columns: 1fr; gap: 4px; }
  .prose dl dt { padding-top: 12px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; padding: 16px 24px 64px; }
}

/* ── 404 ────────────────────────────────────────────── */
.notfound {
  padding: 160px 48px 80px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.notfound__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 240px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-ink);
}
.notfound__h {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.notfound__lead {
  margin: 24px auto 40px;
  max-width: 540px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.notfound__suggest {
  margin: 64px 0;
  text-align: left;
  border-top: 1px solid var(--color-line);
}
.notfound__suggest a {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
}
.notfound__suggest a:hover .notfound__title { color: var(--color-ink); }
.notfound__rubric {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.notfound__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out);
}
.notfound__arrow { font-family: var(--font-body); font-size: 18px; color: var(--color-muted); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1200px) {
  .nl-block__inner { grid-template-columns: 1fr; gap: 48px; }
  .nl-block__title { font-size: 56px; }
  .gm-footer__inner { grid-template-columns: 1fr; }
  .archive-grid__inner { grid-template-columns: repeat(3, 1fr); }
  .archive-section__list a { grid-template-columns: 60px 80px 1fr auto; }
  .latest__grid { grid-template-columns: repeat(3, 1fr); }
  .mag-slider__grid { grid-template-columns: repeat(3, 1fr); }
  .events-grid { grid-template-columns: 1fr; }
  .event-row { border-right: none; border-bottom: 1px solid var(--color-line); padding: 20px 0; }
  .contributors__grid { grid-template-columns: repeat(4, 1fr); }
  .backlist__grid { grid-template-columns: repeat(3, 1fr); }
  .issue-hero__inner { grid-template-columns: 1fr; }
  .issue-hero__h1 { font-size: 80px; }
  .issue-toc__inner { grid-template-columns: 1fr; column-gap: 0; }
  .issue-spotlight__grid { grid-template-columns: 1fr; }
  .author-hero__inner { grid-template-columns: 1fr; }
  .author-hero__h1 { font-size: 72px; }
  .author-column__inner { grid-template-columns: 1fr; }
  .author-merits__inner { grid-template-columns: 1fr; }
  .author-contact__inner { grid-template-columns: 1fr; }
  .rubric-manifest__h1 { font-size: 60px; }
  .rubric-manifest__bottom { grid-template-columns: 1fr; }
  .editors-pick__inner { grid-template-columns: 1fr; }
  .editors-pick__h { font-size: 48px; }
  .column-strand__grid { grid-template-columns: repeat(2, 1fr); }
  .rubric-grid__items { grid-template-columns: repeat(2, 1fr); }
  .cabinet__head { grid-template-columns: 1fr; }
  .cabinet__grid { grid-template-columns: repeat(2, 1fr); }
  .sub-hero__h1 { font-size: 60px; }
  .sub-plans__grid { grid-template-columns: 1fr; }
  .plan.is-featured { transform: none; }
  .whats-in__grid { grid-template-columns: 1fr; }
  .gift-grid__inner { grid-template-columns: 1fr; }
  .faq__inner { grid-template-columns: 1fr; }
  .nl-popup { grid-template-columns: 1fr; max-width: 480px; }
  .nl-popup__brief { display: none; }
}
@media (max-width: 900px) {
  /* Mobile-Header: Burger statt Nav, Tagline kompakter. Tagline bleibt
   * sichtbar weil Mobile-User auch in 50ms erkennen sollen worum's geht.
   * Bei .is-narrow blendet Tagline trotzdem aus (Platz für scroll-state). */
  .gm-nav { display: none; }
  .gm-burger { display: inline-flex; }
  .gm-header__tagline { font-size: 12.5px; }
  .gm-header__tagline-dot { width: 5px; height: 5px; flex: 0 0 5px; }
}
@media (max-width: 540px) {
  /* Sehr schmale Phones: Tagline würde umbrechen oder überlaufen — wir
   * verkürzen sie auf "Seit 1982 für Ärzte" via CSS-only-Text-Hack mit
   * data-Attribut wäre overkill. Tagline einfach hidden auf <540px;
   * Logo + Burger reichen für Marken-Wahrnehmung auf dieser Größe. */
  .gm-header__tagline { display: none; }
}
@media (max-width: 768px) {
  .gm-header { padding: 14px 24px; }
  .container { padding: 0 24px; }
  .latest__grid { grid-template-columns: 1fr 1fr; }
  .stats-band__inner { grid-template-columns: repeat(2, 1fr); }
  .stat__num { font-size: 38px; }
  .mag-slider { padding: 56px 24px; }
  .mag-slider__grid { grid-template-columns: 1fr; }
  .archive-grid__inner { grid-template-columns: repeat(2, 1fr); }
  .archive-section__list a { grid-template-columns: 50px 64px 1fr auto; }
  .events-strip { padding: 56px 24px; }
  .latest { padding: 56px 0; }
  .nl-block { padding: 56px 20px; }
  .nl-block__title { font-size: 36px; line-height: 0.96; }
  .nl-block__lead { font-size: 15px; }
  .nl-block__form input { font-size: 15px; padding: 12px 0; }
  .nl-block__media-img { aspect-ratio: 4 / 3; }
  .gm-footer__main { padding: 56px 24px; }
  .gm-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .author-hero { padding: 48px 24px 64px; }
  .author-hero__h1 { font-size: 56px; }
  .author-quote__p { font-size: 32px; }
  .author-works__grid { grid-template-columns: 1fr; }
  .author-works { padding: 64px 24px; }
  .author-column { padding: 64px 24px; }
  .author-column__list a { grid-template-columns: 60px 1fr; gap: 16px; }
  .author-column__list a > .acl-date,
  .author-column__list a > .acl-arrow { display: none; }
  .author-merits { padding: 64px 24px; }
  .author-quotes-list blockquote p { font-size: 18px; }
  .author-quotes-list blockquote { padding: 20px; }
  .author-contact { padding: 56px 24px; }
  .author-contact__h { font-size: 36px; }
  .contributors__grid { grid-template-columns: repeat(3, 1fr); }
  .contributors { padding: 64px 24px; }
  .backlist__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .backlist { padding: 64px 24px; }
  .back-card__t { font-size: 24px; }
  .issue-hero { padding: 48px 24px 64px; }
  .issue-hero__h1 { font-size: 64px; }
  .issue-hero__sub { font-size: 20px; }
  .issue-hero__stats { gap: 24px; }
  .issue-vorwort { padding: 64px 24px; }
  .issue-vorwort__h { font-size: 44px; }
  .issue-toc { padding: 64px 24px; }
  .toc-rubric__h { font-size: 24px; }
  .issue-spotlight { padding: 64px 24px; }
  .issue-spotlight__h { font-size: 44px; }
  .spot-card__h, .spot-card.is-big .spot-card__h { font-size: 22px; }
  .rubric-manifest { padding: 64px 24px 48px; }
  .rubric-manifest__h1 { font-size: 56px; }
  .editors-pick { padding: 0 24px 64px; }
  .editors-pick__h { font-size: 36px; }
  .column-strand__head { padding: 0 24px; }
  .column-strand__h { font-size: 32px; }
  .column-strand__grid { padding: 0 24px; grid-template-columns: 1fr 1fr; gap: 16px; }
  .column-card__name { font-size: 18px; }
  .rubric-grid { padding: 64px 24px; }
  .rubric-grid__h { font-size: 36px; }
  .rubric-grid__items { grid-template-columns: 1fr; gap: 40px; }
  .cabinet { padding: 64px 24px; }
  .cabinet__h { font-size: 36px; }
  .cabinet__grid { grid-template-columns: 1fr; }
  .sub-hero { padding: 56px 24px 64px; }
  .sub-hero__h1 { font-size: 56px; }
  .sub-hero__lead { font-size: 18px; }
  .sub-plans { padding: 64px 24px; }
  .whats-in { padding: 64px 24px; }
  .whats-in__h { font-size: 40px; }
  .gift-grid { padding: 64px 24px; }
  .faq { padding: 64px 24px; }
  .faq__h { font-size: 36px; }
  .testimonial { padding: 64px 24px; }
  .testimonial__p { font-size: 26px; }
  .art-hero { padding: 32px 24px; }
  .art-hero__h1 { font-size: 56px; }
  .art-hero__lead { font-size: 18px; }
  .art-fullbleed { padding: 0 24px; }
  .art-body { padding: 0 24px; }
  .art-body figure, .art-body .video { margin-left: -24px; margin-right: -24px; }
  .art-body h2 { font-size: 28px; }
  .art-body .pullquote p { font-size: 22px; }
  .author-box { grid-template-columns: 56px 1fr; gap: 16px; }
  .author-box > .btn-pill, .author-box > .btn-pill--outline { grid-column: 1 / -1; }
  .archive-hero { padding: 64px 24px 32px; }
  .archive-hero__h { font-size: 64px; }
  .archive-hero__lead { font-size: 18px; }
  .archive-grid { padding: 32px 24px 64px; }
  .archive-section { padding: 0 24px 64px; }
  .notfound { padding: 80px 24px 40px; }
  .notfound__num { font-size: 140px; }
  .notfound__h { font-size: 32px; }
  .notfound__suggest a { grid-template-columns: 64px 1fr auto; }
  .search-overlay__input { font-size: 36px; }
}

/* ─── Service pages ─────────────────────────────────── */
/* Shared footer newsletter blurb used by all service pages. */
.gm-footer__nl-blurb {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 var(--sp-5);
}
/* Footer logo sizing wrapper (height-only, kept inline-friendly). */
.gm-footer__brand-img { height: 32px; }
/* kontakt.html — copy beside contact details. */
.contact-intro {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}
/* kontakt.html — form status output. */
.contact-form-out {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
}
/* 404.html — primary action row beneath lead. */
.notfound__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

/* ============================================================
   ─── Homepage v2 · Cinematic Hero + Editorial Mosaic + Break ───
   Added 2026-05-14 — translates Claude-Design JSX into vanilla CSS.
   ============================================================ */

/* ── Header overlay on home (transparent above hero, swap on scroll) ── */
body.is-home .gm-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              padding var(--dur-fast) var(--ease-out);
}
body.is-home .gm-header .gm-nav a {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: transparent;
}
body.is-home .gm-header .gm-nav a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
body.is-home .gm-header .gm-iconbtn,
body.is-home .gm-header .gm-burger { color: #fff; }
body.is-home .gm-header .btn-pill {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
body.is-home .gm-header .btn-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}
body.is-home .gm-header .gm-header__logo img {
  filter: brightness(0) invert(1);
}
/* Homepage (is-home) — Tagline-Top-State:
 *   Top-State (nicht gescrollt): Tagline sichtbar, Nav versteckt.
 *   Scrolled (.is-narrow): Tagline versteckt, Nav sichtbar.
 * Subpages haben keine Tagline (oben im Default-Block .gm-header__tagline
 * display:none). */
body.is-home .gm-header__tagline {
  display: flex;
  opacity: 1;
}
body.is-home .gm-header .gm-nav {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
body.is-home .gm-header.is-narrow .gm-header__tagline {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
body.is-home .gm-header.is-narrow .gm-nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Tagline auf transparent-Hero: weiß statt ink-soft. Dot bleibt Weinrot
 * — funktioniert auf jedem Hintergrund als kleiner Brand-Spot.
 * Text-shadow für Lesbarkeit über busy Cover-Bildern (Magazin mit Rot etc.). */
body.is-home .gm-header .gm-header__tagline {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Once scroll passes 80px, ui.js adds .is-narrow → header becomes solid */
body.is-home .gm-header.is-narrow {
  position: fixed;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
}
body.is-home .gm-header.is-narrow .gm-nav a {
  color: var(--color-ink-soft);
}
body.is-home .gm-header.is-narrow .gm-nav a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}
body.is-home .gm-header.is-narrow .gm-iconbtn,
body.is-home .gm-header.is-narrow .gm-burger { color: var(--color-ink); }
body.is-home .gm-header.is-narrow .btn-pill {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
body.is-home .gm-header.is-narrow .gm-header__logo img {
  filter: none;
}

/* ── Custom Cursor Navigation (gm-cursor) ─────────────────────
 * Used by Hero + Rubrik-Tour. Element lives at end of body, only
 * fully visible when hovering a [data-cursor-zone]. JS positions it
 * via transform: translate3d(x, y, 0) translate(-50%, -50%) on the
 * outer .gm-cursor; rotation lives on .gm-cursor__inner so the two
 * transforms don't fight.
 *
 * On touch devices (no hover), .gm-cursor stays hidden and we inject
 * .gm-tap-half buttons instead — invisible left/right halves over
 * each zone.
 * --------------------------------------------------------------- */
.gm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  color: #fff;
  /* placeholder transform — JS overrides via translate3d on mousemove */
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  transition: opacity 220ms var(--ease-out);
  will-change: transform, opacity;
}
.gm-cursor.is-visible {
  opacity: 1;
}
.gm-cursor__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mix-blend-mode: difference would invert the cursor against any
   * background — but that mixes badly with the editorial photography,
   * so we lean on the SVG's own ring + chevron for legibility instead. */
  transition: transform 220ms var(--ease-out);
}
.gm-cursor__inner.is-left {
  transform: rotate(180deg);
}
.gm-cursor__inner.is-clicked {
  animation: gm-cursor-pulse 320ms var(--ease-out);
}
.gm-cursor__inner.is-left.is-clicked {
  animation: gm-cursor-pulse-left 320ms var(--ease-out);
}
@keyframes gm-cursor-pulse {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(0deg) scale(0.82); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes gm-cursor-pulse-left {
  0%   { transform: rotate(180deg) scale(1); }
  40%  { transform: rotate(180deg) scale(0.82); }
  100% { transform: rotate(180deg) scale(1); }
}

/* Hide native cursor over hover-capable zones. */
@media (hover: hover) and (pointer: fine) {
  [data-cursor-zone] { cursor: none; }
  /* But restore native cursor on any interactive child so links/buttons
   * still feel clickable in the usual way. */
  [data-cursor-zone] a,
  [data-cursor-zone] button {
    cursor: pointer;
  }
}

/* Mobile tap-zones — two invisible buttons on left/right halves.
 * Sit behind any z-indexed copy elements so the title/dek/byline still
 * get pointer events if needed. */
.gm-tap-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* z-index 1 keeps tap-halves above the image stack (z:0) and vignette
   * (z:1 — careful, this means tap-halves sit at same level; image-stack
   * is below). But below the copy (z:2) and magnet (z:2). Tap on title
   * works because copy is above. Tap on background (most of hero) goes
   * to tap-halves. */
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.gm-tap-half--left  { left: 0; }
.gm-tap-half--right { right: 0; }
/* Round-12.0 · full-cover variant für data-touch-tap="next" (Events).
   Mobile-Tap auf irgendwo im Bild = next. */
.gm-tap-half--full  { left: 0; right: 0; width: 100%; }

/* Round-12.0 · gm-program-card__media als cursor-zone braucht relative
   positioning damit tap-halves absolute positioniert werden können. */
.gm-program-card__media[data-cursor-zone] {
  position: relative;
  cursor: pointer;
}

/* ── Hero · Cinematic ─────────────────────────────────────────── */
.hero-cinema {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--font-body);
  isolation: isolate;
}
.hero-cinema__stack {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cinema__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.hero-cinema__slide.is-active { opacity: 1; }
.hero-cinema__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-cinema__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Three-layer composite for consistent legibility on any slide:
   * 1. Radial bottom-left vignette — pulls headline area into shadow
   * 2. Linear top fade — protects transparent header + burger spans
   * 3. Uniform 32% black floor — ramp.space-inspired; ensures pure white
   *    text and white header chrome read on bright slides (Lifestyle interior,
   *    light skies) without crushing the editorial photography. */
  background:
    radial-gradient(ellipse 90% 75% at 20% 100%,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0)    70%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0)    22%),
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
}
.hero-cinema__copy {
  position: absolute;
  left: 64px;
  bottom: 130px;
  right: 360px;
  max-width: 760px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-cinema__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7.4vw, 116px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: #fff;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-cinema__title.is-fading {
  animation: hero-crossfade-in 900ms 200ms var(--ease-out) both;
}
.hero-cinema__dek {
  margin: 0;
  max-width: 480px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.hero-cinema__dek.is-fading {
  animation: hero-crossfade-in 900ms 350ms var(--ease-out) both;
}
.hero-cinema__byline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hero-cinema__byline.is-fading {
  animation: hero-crossfade-in 900ms 480ms var(--ease-out) both;
}
.hero-cinema__magnet {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse; /* line on top, label below — classic scroll-magnet */
  align-items: center;
  gap: 10px;
  color: #fff;
}
.hero-cinema__magnet-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.78;
}
.hero-cinema__magnet-line {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: top center;
  animation: hero-line-pulse 3.4s ease-in-out infinite;
}

@keyframes hero-crossfade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Hero v5 · Cover-in-Scene (Papa 2026-05-15 3rd pass) ─────────
 * Statisches Cover-Foto + klickbarer Magazin-Hotspot mit subtilem
 * Breathing-Badge. Ersetzt die rotating-Cinematic Slides. */
.hero-cinema--cover {
  /* Slightly shorter than full 100vh: 88vh damit Hero nicht den ganzen
   * Screen frisst und Aktuelle-Beiträge teasered above-the-fold. */
  min-height: 88vh;
  background: #0a0a0a;
}
.hero-cinema__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.hero-cinema--cover .hero-cinema__vignette,
.hero-cinema--cover .hero-cinema__copy--cover {
  z-index: 2;
}
/* Magazin-Hotspot — Position via inline-style (top/left/width/height in %)
 * damit für jedes Hintergrundbild die Magazin-Bounds angepasst werden
 * können. Hotspot selbst ist UNSICHTBAR — klickbar bleibt. Cursor-pointer
 * default. */
.hero-cinema__magazine {
  position: absolute;
  z-index: 3;
  display: block;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  /* Subtler Hover-Outline um das Magazin-Frame — bleibt im Editorial-
   * Charakter ohne das Bild zu zerstören. */
  border-radius: 2px;
  transition: box-shadow 360ms var(--ease-out);
}
.hero-cinema__magazine:hover,
.hero-cinema__magazine:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Breathing Arrow Badge — visueller Klickbarkeits-Hinweis ohne Banner.
 * Sitzt in der OBEREN RECHTEN Ecke des Hotspots (Pinterest-Pattern). */
.hero-cinema__magazine-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #1a1a1a;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  animation: hero-badge-breath 2400ms ease-in-out infinite;
  transition: transform 320ms var(--ease-out), background 320ms var(--ease-out);
}
.hero-cinema__magazine-badge svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 320ms var(--ease-out);
}
.hero-cinema__magazine:hover .hero-cinema__magazine-badge,
.hero-cinema__magazine:focus-visible .hero-cinema__magazine-badge {
  background: #fff;
  transform: scale(1.12);
  animation: none;
}
.hero-cinema__magazine:hover .hero-cinema__magazine-badge svg,
.hero-cinema__magazine:focus-visible .hero-cinema__magazine-badge svg {
  transform: translate(1px, -1px) scale(1.05);
}

@keyframes hero-badge-breath {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* Cover-Hero Copy: subtler & dezenter als das alte Cinematic. */
.hero-cinema__copy--cover {
  position: absolute;
  left: clamp(24px, 6vw, 80px);
  bottom: clamp(56px, 9vh, 110px);
  max-width: 560px;
  color: #fff;
  /* Halt vor dem Magnet-Element. */
  pointer-events: none;
}
.hero-cinema__copy--cover * { pointer-events: auto; }
.hero-cinema__eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hero-cinema--cover .hero-cinema__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* Per Papa "Headline-Typo immer zu groß" — reduziert von 60-92 auf
   * 36-56. Editorial scale, nicht Apple-Keynote. */
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  /* OVERRIDE der base-rule .hero-cinema__title: text-transform: uppercase.
   * Cover-Hero will mixed-case Times-italic (Vogue-Konvention). */
  text-transform: none;
  color: #fff;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hero-cinema--cover .hero-cinema__dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  max-width: 44ch;
}

@media (max-width: 768px) {
  .hero-cinema--cover { min-height: 75vh; }
  .hero-cinema__magazine-badge { width: 36px; height: 36px; top: 12px; right: 12px; }
  .hero-cinema__magazine-badge svg { width: 16px; height: 16px; }
  .hero-cinema--cover .hero-cinema__title { font-size: 28px; }
  .hero-cinema--cover .hero-cinema__dek { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinema__magazine-badge { animation: none; }
}

@keyframes hero-line-pulse {
  /* Dezent: zarte Atmung statt bouncy Wachstum.
   * Skala 0.6→1.0 (statt 0.2→1.0), Opacity 0.55→0.95 (statt 0.4→1.0),
   * Cycle 3.4s (statt 2.6s) — wirkt eher wie ein Atem, weniger wie ein Pulse. */
  0%, 100% { transform: scaleY(0.6); opacity: 0.55; }
  50%      { transform: scaleY(1);   opacity: 0.95; }
}

/* ── Heft-Preview-Card · Cover-in-Scene Placeholder ────────────────
 * v1 2026-05-15 2nd pass — Papa-Direktive: Magazin als physisches Objekt
 * sichtbar machen. Anzeigenkunden müssen das Produkt sehen.
 *
 * Frame sitzt bottom-right des Hero, leicht getiltet, mit subtle drop-
 * shadow → "floating magazine cover in the scene". Wenn Papas AI-Cover-
 * in-Scene-Assets landen, kann dieses Element entfernt werden (die
 * Composite-Photos enthalten dann das Cover natürlich integriert).
 *
 * Forschungs-Anker: Conde-Nast/Vogue zeigen Cover prominent für Brand-
 * Recall; Color-Research: Farbiges Cover steigert Brand-Recognition
 * bis zu 80% (Color Research and Application). */
.hero-cinema__heft {
  position: absolute;
  bottom: 96px;
  right: clamp(24px, 5vw, 88px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: #fff;
  /* Subtler Tilt — wie ein Magazin das jemand auf den Tisch gelegt hat. */
  transform: rotate(-3.5deg);
  transition: transform 420ms var(--ease-out);
}
.hero-cinema__heft:hover {
  transform: rotate(0deg) translateY(-4px);
}
.hero-cinema__heft-frame {
  position: relative;
  width: clamp(180px, 18vw, 240px);
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  background: var(--color-primary);
}
.hero-cinema__heft-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Sepia/warm-shift damit das Placeholder-Foto wie ein Print-Cover wirkt
   * statt wie ein Stock-Photo. Wird removed wenn echte Cover landen. */
  filter: saturate(0.92) brightness(0.94);
}
.hero-cinema__heft-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 16px;
  /* Linear-Gradient damit Text auf jedem Bild lesbar bleibt. */
  background: linear-gradient(
    180deg,
    rgba(122, 31, 38, 0.85) 0%,
    rgba(122, 31, 38, 0.20) 35%,
    rgba(122, 31, 38, 0.20) 60%,
    rgba(0, 0, 0, 0.72) 100%
  );
  color: #fff;
}
.hero-cinema__heft-issue {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.96);
}
.hero-cinema__heft-issue sup {
  font-size: 11px;
  font-style: normal;
  vertical-align: super;
  margin-left: 1px;
}
.hero-cinema__heft-theme {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.12;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hero-cinema__heft-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Compensate für die Card-Rotation — Meta bleibt visuell aufrecht. */
  align-self: flex-start;
  margin-left: 4px;
}
.hero-cinema__heft-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.hero-cinema__heft-cta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 2px;
  display: inline-block;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .hero-cinema__heft { bottom: 80px; right: 24px; gap: 10px; }
  .hero-cinema__heft-frame { width: 150px; }
}
@media (max-width: 768px) {
  /* Auf Mobile wird die Heft-Card kleiner und verschiebt sich oben-rechts
   * (out of the magnet/copy zone). Bei <500px wird sie hidden weil sie
   * mit der Hero-Copy konkurrieren würde. */
  .hero-cinema__heft {
    top: 88px;
    right: 16px;
    bottom: auto;
    transform: rotate(-2deg);
  }
  .hero-cinema__heft-frame { width: 112px; }
  .hero-cinema__heft-issue { font-size: 15px; }
  .hero-cinema__heft-theme { font-size: 13px; }
  .hero-cinema__heft-meta { display: none; }
}
@media (max-width: 500px) {
  .hero-cinema__heft { display: none; }
}

@media (max-width: 1024px) {
  .hero-cinema__copy {
    left: 40px;
    right: 40px;
    bottom: 140px;
  }
}
@media (max-width: 768px) {
  .hero-cinema__copy {
    left: 20px;
    right: 20px;
    bottom: 130px;
    gap: 18px;
  }
  .hero-cinema__title { font-size: clamp(28px, 7vw, 48px); }
  .hero-cinema__dek   { font-size: 17px; }
  .hero-cinema__magnet-line { height: 36px; }
}

/* ── Editorial Mosaic ─────────────────────────────────────────── */
.ed-mosaic {
  padding: var(--sp-9) 0;
  background: var(--color-bg);
}
.ed-mosaic__inner {
  /* uses .container utility from earlier in this file */
}
.ed-mosaic__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--color-ink);
  flex-wrap: wrap;
}
.ed-mosaic__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}
.ed-mosaic__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: var(--color-ink);
  text-transform: uppercase;
}
.ed-mosaic__more {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.ed-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 24px;
}
.ed-mosaic__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

/* Reveal wrapper — spans inherit from --col/--row custom props */
.ed-reveal {
  grid-column: span var(--col, 1);
  grid-row:    span var(--row, 1);
  min-height: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.ed-reveal.is-shown {
  opacity: 1;
  transform: none;
}

/* ── Card variants ─────────────────────────────────── */
.ed-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ed-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-transform: uppercase;
  text-wrap: balance;
}
.ed-card__meta {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bild · 1×1 standard image card */
.ed-card--bild .ed-card__media {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-line);
}
.ed-card--bild .ed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.ed-card--bild:hover .ed-card__media img { transform: scale(1.03); }
.ed-card__stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
}
.ed-card__tags,
.ed-card__rubric {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.ed-card__tag-mark,
.ed-card__rubric-mark {
  display: inline-block;
  width: 18px;
  height: 2px;
}

/* Aufmacher · 2×2 hero item with image-overlay headline */
.ed-card--aufmacher {
  position: relative;
  gap: 0;
}
.ed-card--aufmacher .ed-card__media {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-line);
}
.ed-card--aufmacher .ed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.ed-card--aufmacher:hover .ed-card__media img { transform: scale(1.02); }
.ed-card--aufmacher .ed-card__label {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.ed-card--aufmacher .ed-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 32px 32px;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.20) 70%,
    rgba(0, 0, 0, 0)    100%);
  color: #fff;
}
.ed-card--aufmacher .ed-card__overlay h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: #fff;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 92%;
}
.ed-card--aufmacher .ed-card__overlay p {
  margin: 14px 0 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.ed-card--aufmacher .ed-card__overlay-meta {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ed-card__floor {
  height: 8px;
  flex-shrink: 0;
}

/* Color · solid Rubrik-Farbe, weiße Garamond — KEINE Surface! */
.ed-card--color {
  color: #fff;
  padding: 28px 28px 24px;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  gap: 0;
}
.ed-card--color .ed-card__eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.ed-card--color .ed-card__title {
  margin: 32px 0 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.02;
}
.ed-card--color .ed-card__byline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.ed-card--color .ed-card__mark {
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0.5;
}

/* Quote · 2×1 pull-quote in cream surface */
.ed-card--quote {
  background: var(--color-surface);
  padding: 24px 4px;
  justify-content: center;
  gap: 24px;
}
.ed-card--quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}
.ed-card__q { opacity: 0.5; margin: 0 4px; }
.ed-card__quote-by {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ed-card__quote-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-ink);
}
.ed-card__quote-author {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
}
.ed-card__quote-role {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 2px;
}

/* Mosaic responsive */
@media (max-width: 1024px) {
  .ed-mosaic__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 260px;
  }
  /* Aufmacher stays 2×2, quote collapses to 2-col, everything else 1×1 */
  .ed-reveal[data-type="aufmacher"] { --col: 2; --row: 2; }
  .ed-reveal[data-type="quote"]     { --col: 2; --row: 1; }
  .ed-reveal[data-type="bild"],
  .ed-reveal[data-type="color"]     { --col: 1; --row: 1; }
}
@media (max-width: 640px) {
  .ed-mosaic { padding: var(--sp-7) 0; }
  .ed-mosaic__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 16px;
  }
  .ed-reveal { --col: 1 !important; }
  .ed-reveal[data-type="aufmacher"] { --row: 2; }
  .ed-card--aufmacher .ed-card__overlay { padding: 40px 20px 20px; }
  .ed-card--color { padding: 22px 22px 20px; }
  .ed-card--color .ed-card__title { font-size: 28px; margin-top: 24px; }
}

/* ── Editorial Break · color-punctuation band ───────────────── */
.ed-break {
  color: #fff;
  padding: var(--sp-9) var(--sp-7);
  /* background is set inline by hero.js based on rubric */
}
.ed-break__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ed-break__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ed-break__kicker-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.ed-break__quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #fff;
  text-wrap: balance;
  max-width: 960px;
}
.ed-break__q { opacity: 0.6; }
.ed-break__foot {
  margin-top: var(--sp-7);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.ed-break__author {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}
.ed-break__role {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}
.ed-break__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 4px;
}
.ed-break__link:hover { border-bottom-color: #fff; }
@media (max-width: 640px) {
  .ed-break { padding: var(--sp-8) var(--sp-5); }
  .ed-break__foot { margin-top: var(--sp-6); }
}

/* ────────────────────────────────────────────────────────────────────
 * NEW SECTIONS · 2026-05-15
 * Library-Catalog (Aktuelle Beiträge), Big-Date-Marginalia (Events),
 * Issue-Archive (Alle Ausgaben), Brief (Newsletter). All built per
 * the best-in-world research synthesis. White surface default, cream
 * (#FBF9F4) escalates only 3× across the page: catalog-pullquote-card,
 * archive-statement-band, brief-section-block.
 * ──────────────────────────────────────────────────────────────────── */

/* Headings in these new sections opt OUT of the global uppercase
 * cascade (main.css line 32 sets text-transform: uppercase on all
 * h1-h6). Print-DNA Garamond italic wants natural mixed-case.
 * Rubric- + editors-pick-Titles in the cascade too — sahen vorher
 * als "WAS LONGEVITY..." in Versalien aus, was die User-Regel
 * (Slow-Editorial Mixed-Case) bricht. */
/* Section-Headings — Papa 2026-05-15 2nd pass: UPPERCASE-Pflicht zurück
 * genommen, jetzt italic mixed-case in Times. Vogue/Falstaff-Konvention
 * für Editorial-Section-Heads, lesbar für 45+ Audience (NN/g Senior),
 * lässt klassische Schriften atmen statt sie als Versalien zu erschlagen. */
.gm-program__title,
.gm-archive__title,
.gm-brief__title,
.gm-latest__title,
.gm-masthead__title,
.gm-closer__title {
  text-transform: none;
  letter-spacing: -0.008em;
  font-style: italic;
  font-weight: 500;
}
/* Article-Titles in Cards: mixed-case, etwas dichter getrackt. */
.gm-catalog__title, .gm-catalog__h,
.gm-program__featured-title, .gm-program__h,
.gm-archive__theme,
.gm-picks__title, .gm-picks__feature-title, .gm-picks__side-title,
.gm-latest__lead-h, .gm-latest__sub-h,
.gm-toc__h,
.editors-pick__h, .rubric-grid__h, .rubric-card__title {
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ── Neue Beiträge · gm-latest (REFRAMED 2026-05-15)
 * Was vorher "Empfehlung der Redaktion · N°01/02/03" hieß und wie ein
 * Ranking aussah, ist jetzt ein chronologischer "Latest"-Feed:
 * 1 Lead (große Karte mit Bild + Pull-Quote + Meta) links,
 * 4 Sub-Rows (kleine Rows mit Thumb + Titel + Datum + Read-Time) rechts.
 * Keine N°-Numeralen. Hashtags als Tag-Anker, Datum prominent als
 * Print-Anker. Hover-Reveal: Bild-Zoom, Title-Underline, Arrow-Shift.
 * Mobile: vertikaler Stack, Lead bleibt prominent. */
.gm-latest {
  background: var(--color-bg);
  padding: var(--sp-9) 0 var(--sp-10);
}
.gm-latest__head {
  /* Innerhalb der Feed-Spalte (rechts) — kein page-bleed mehr nötig. */
  margin: 0 0 var(--sp-6);
  padding: 0;
}

/* ── Vogue-Rhythmus (v3 2026-05-15 2nd pass) ────────────────────
 * Zwei-Spalten-Grid: 40% sticky Cover-Promo links, 60% Article-Feed
 * rechts. F-Pattern-Hot-Zone-Anker: Cover bleibt im Blick während User
 * den Feed scrollt. */
.gm-latest__rhythm {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-bleed);
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

/* ── LINKE SPALTE: Sticky Cover-Promo ──────────────────────────── */
.gm-latest__cover {
  position: relative;
}
.gm-latest__cover-sticky {
  /* Sticky innerhalb der Section: scrollt mit bis Section-Ende, dann
   * bleibt sie am Top stehen. Top-Offset 110px = Header-Höhe + Atem. */
  position: sticky;
  top: 110px;
}
.gm-latest__cover-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
}
.gm-latest__cover-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-latest__cover-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-primary);
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.40),
    0 12px 24px -8px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform 380ms var(--ease-out);
}
.gm-latest__cover-frame:hover {
  transform: translateY(-4px);
}
.gm-latest__cover-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.94);
}
.gm-latest__cover-overlay {
  position: absolute;
  inset: 0;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    rgba(122, 31, 38, 0.82) 0%,
    rgba(122, 31, 38, 0.10) 30%,
    rgba(0, 0, 0, 0.05) 60%,
    rgba(0, 0, 0, 0.78) 100%
  );
  color: #fff;
  pointer-events: none;
}
.gm-latest__cover-issue {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.008em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.96);
}
.gm-latest__cover-issue sup {
  font-size: 13px;
  font-style: normal;
  vertical-align: super;
  margin-left: 1px;
}
.gm-latest__cover-theme {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gm-latest__cover-body {
  padding-top: var(--sp-5);
}
.gm-latest__cover-h {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
.gm-latest__cover-lede {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.gm-latest__cover-lede em {
  font-style: italic;
  color: var(--color-ink);
}
.gm-latest__cover-ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.gm-latest__cover-primary {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  background: var(--color-ink);
  padding: 12px 22px;
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.gm-latest__cover-primary:hover {
  background: var(--color-primary);
}
.gm-latest__cover-secondary {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  padding: 4px 0 6px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gm-latest__cover-secondary:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}
.gm-latest__cover-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── RECHTE SPALTE: Article-Feed ───────────────────────────────── */
.gm-latest__feed {
  min-width: 0;
}
.gm-feed__row {
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.gm-feed__row:last-child {
  border-bottom: 1px solid var(--color-line);
}
.gm-feed__row-link {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-decoration: none;
  color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gm-feed__row-link:hover {
  opacity: 0.86;
}
.gm-feed__thumb {
  position: relative;
  width: 200px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
}
.gm-feed__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gm-feed__row-link:hover .gm-feed__thumb img {
  transform: scale(1.04);
}
.gm-feed__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 6px;
}
.gm-feed__rubric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.gm-feed__rubric-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.gm-feed__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.gm-feed__row-link:hover .gm-feed__h {
  color: var(--color-ink);
}
.gm-feed__dek {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* v9 2026-05-16: feed-dek body min 17 */
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  /* Max 2 Zeilen damit Rows alle gleich hoch sind. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-feed__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.gm-feed__sep {
  opacity: 0.6;
}

/* Foot */
.gm-latest__foot {
  margin-top: var(--sp-6);
}
.gm-latest__more {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
}
.gm-latest__more:hover { color: var(--color-ink); }

/* Responsive */
@media (max-width: 1100px) {
  .gm-latest__rhythm {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .gm-latest__cover-sticky { position: static; }
  .gm-latest__cover-frame { max-width: 360px; }
}
@media (max-width: 700px) {
  .gm-feed__row-link {
    grid-template-columns: 120px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }
  .gm-feed__thumb { width: 120px; }
  .gm-feed__h { font-size: 18px; }
  .gm-feed__dek { font-size: 14.5px; -webkit-line-clamp: 2; }
}
.gm-latest__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-3);
}
.gm-latest__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* Papa 2026-05-15 2nd pass: Headline-Typo "immer zu groß" — von
   * 80-160px auf magazin-section-scale 32-44px. Vogue/Falstaff-Konvention
   * für Section-Heads. Ist erkennbar, schlägt aber nicht den Content. */
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.gm-latest__rule {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 0;
}
/* Grid · Lead (left, 1.4fr) + List (right, 1fr) on desktop. */
.gm-latest__grid {
  /* Wider grid (2026-05-15): 1180 → 1760. Lead-Card hat jetzt echten
   * Editorial-Scale; Sub-Rows-Spalte rechts wird breiter → Tags + Titel
   * + Meta zerschossen sich nicht mehr auf 1440-Viewports.
   * Asymmetric ratio 1.6:1 weicht von der 50:50-Boxhaftigkeit ab. */
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-8) var(--page-bleed) var(--sp-6);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}
/* Lead — large card with image on top, body underneath. */
.gm-latest__lead {
  display: block;
  text-decoration: none;
  color: inherit;
  group: lead;
}
.gm-latest__lead-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-line);
  margin-bottom: var(--sp-5);
  position: relative;
}
.gm-latest__lead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gm-latest__lead:hover .gm-latest__lead-media img { transform: scale(1.035); }
.gm-latest__lead-body { padding-right: var(--sp-3); }
.gm-latest__tags {
  display: flex;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}
.gm-latest__lead-h {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  /* Bumped 2026-05-15 per readability-feedback. */
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 360ms var(--ease-out);
}
.gm-latest__lead:hover .gm-latest__lead-h {
  background-size: 100% 1px;
}
.gm-latest__lead-quote {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 34ch;
  text-transform: none;
  border-left: 2px solid var(--color-primary);
  padding-left: var(--sp-4);
}
.gm-latest__lead-quote em {
  font-style: italic;
  color: var(--color-ink);
}
.gm-latest__lead-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
  padding-top: var(--sp-3);
}
.gm-latest__lead-meta .gm-latest__date {
  color: var(--color-ink);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.gm-latest__sep { color: var(--color-line); }
.gm-latest__arrow {
  margin-left: auto;
  color: var(--color-ink);
  font-size: 14px;
  font-family: var(--font-display);
  transition: transform 220ms var(--ease-out);
}
.gm-latest__lead:hover .gm-latest__arrow { transform: translateX(4px); }

/* List · Sub-Rows on the right. Each row has thumb + body + arrow. */
.gm-latest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gm-latest__sub {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: background 220ms ease;
}
.gm-latest__list .gm-latest__sub:last-child { border-bottom: 1px solid var(--color-line); }
.gm-latest__sub:hover { background: rgba(0,0,0,0.018); }
.gm-latest__sub-media {
  width: 96px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-line);
}
.gm-latest__sub-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gm-latest__sub:hover .gm-latest__sub-media img { transform: scale(1.06); }
.gm-latest__sub-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gm-latest__sub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.gm-latest__sub-h {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.gm-latest__sub-meta {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}
.gm-latest__sub-meta .gm-latest__date {
  color: var(--color-ink);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.gm-latest__sub-arrow {
  font-family: var(--font-display);
  color: var(--color-muted);
  font-size: 16px;
  transition: transform 220ms var(--ease-out), color 220ms ease;
}
.gm-latest__sub:hover .gm-latest__sub-arrow { transform: translateX(4px); color: var(--color-ink); }

/* Foot — "Alle Beiträge →" link aligned right. */
.gm-latest__foot {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-4) var(--page-bleed) 0;
  display: flex;
  justify-content: flex-end;
}
.gm-latest__more {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-top: 1px solid var(--color-primary);
  padding-top: var(--sp-3);
}

@media (max-width: 1024px) {
  .gm-latest__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    padding: var(--sp-6) var(--sp-6) var(--sp-6);
  }
}
@media (max-width: 700px) {
  .gm-latest { padding: var(--sp-7) 0 var(--sp-8); }
  .gm-latest__head { padding: 0 var(--sp-5); margin-bottom: var(--sp-6); }
  .gm-latest__grid { padding: var(--sp-5); gap: var(--sp-6); }
  .gm-latest__lead-quote { font-size: 16px; padding-left: var(--sp-3); }
  .gm-latest__sub {
    grid-template-columns: 72px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }
  .gm-latest__sub-media { width: 72px; }
  .gm-latest__sub-arrow { display: none; }
  .gm-latest__foot { padding: var(--sp-3) var(--sp-5) 0; }
}

/* ── In-Signature TOC · gm-toc (merged catalog) ────────────────
 * Reine typografische Liste. Ohne Cover-Thumbs (Octopus daneben trägt
 * die visuelle Last). Pointer-events: auto explizit aktiviert weil
 * der fragments-Container global pointer-events: none ist. */
.gm-signature__fragment--toc {
  pointer-events: auto;
  /* Override des Default-Fragment-Padding (24vw): TOC darf weiter
   * nach rechts atmen, da unter dem Octopus' linkem Arm Raum ist.
   * 24vw → 16vw nach Papas Direktive "noch ein bisschen mehr nach
   * rechts oder auch nach unten gehen dürfen". */
  padding-right: 16vw;
}
.gm-toc {
  list-style: none;
  /* Mehr vertikale Strecke nach unten (sp-6 → sp-7) damit TOC die
   * Section länger füllt — antwortet auf "nach unten gehen dürfen". */
  margin: var(--sp-6) 0 var(--sp-7);
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.gm-toc__item { border-bottom: 1px solid rgba(0, 0, 0, 0.18); }
.gm-toc__link {
  display: grid;
  /* Größere Nummer-Spalte (32 → 56) damit die Numerale als
   * eigenständiger Editorial-Anker neben dem Titel steht. */
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-5);
  align-items: baseline;
  /* Vertikale Strecke pro Row 10px → 16px = jede Zeile atmet,
   * 7 Rows × 16 oben + 16 unten = ~224px mehr Höhe gesamt. */
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
}
.gm-toc__num {
  font-family: var(--font-body);
  /* Numerale auch größer (12.5 → 14) damit sie nicht als Marginalia
   * neben dem grossen italic-Title verschwinden. */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-muted);
}
.gm-toc__body { min-width: 0; }
.gm-toc__h {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* Bigger TOC-Items (22-30 → 28-44). Die TOC ist jetzt die zweite
   * Major-Display der Sektion, nicht eine sub-list. */
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.22;
  color: var(--color-ink);
}
/* Hover ist NUR Farbwechsel. Text-Decoration-Underline kollidierte mit
 * der Hairline-Divider unterhalb jedes TOC-Items → "Doppelstrich"
 * Wahrnehmung. Hairline trägt die strukturelle Trennung; Hover färbt. */
.gm-toc__link:hover .gm-toc__h {
  color: var(--color-ink);
}
.gm-toc__meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}
.gm-toc__tag { color: var(--color-ink); }
.gm-toc__time {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gm-toc__more {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 3px;
}
.gm-toc__more:hover { opacity: 0.7; }

/* Conversion-CTA-Row (Octopus-Section, 2026-05-15 v2).
 * Zwei-Button-Pair direkt nach der TOC. User-Direktive: kein Strich
 * darüber (border-top entfernt), zentriert unterhalb der Tabelle. */
.gm-signature__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
/* Globales gm-btn utility — wiederverwendbar in jeder Sektion. */
.gm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 240ms var(--ease-out),
              color 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              transform 240ms var(--ease-out);
  cursor: pointer;
}
.gm-btn__arrow {
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}
.gm-btn:hover .gm-btn__arrow {
  transform: translateX(4px);
}
.gm-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-ink);
}
.gm-btn--primary:hover {
  background: #9d1d25;   /* burgund 1 shade darker */
  border-color: #9d1d25;
}
.gm-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: rgba(0, 0, 0, 0.32);
}
.gm-btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-primary-ink);
  border-color: var(--color-ink);
}

/* ── Aktuelle Beiträge · Library-Catalog ────────────────────────
 * Cabinet-Magazine + Lapham's-Quarterly DNA: numbered list of issue
 * articles with mini-cover-thumb, italic-Garamond title, hashtag-row.
 * One cream-bg pullquote-card mid-list as the sole wow-accent. */
.gm-catalog {
  background: var(--color-bg);
  padding: var(--sp-9) 0 var(--sp-9);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.gm-catalog__head {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sp-7) var(--sp-8);
}
.gm-catalog__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-4);
}
.gm-catalog__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  max-width: 800px;
}
.gm-catalog__title sup {
  font-size: 0.55em;
  vertical-align: 0.5em;
  font-style: italic;
  font-weight: 400;
}
.gm-catalog__title em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}
.gm-catalog__list {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--sp-7);
  max-width: 1080px;
}
.gm-catalog__item {
  border-top: 1px solid var(--color-line);
}
.gm-catalog__item:last-child {
  border-bottom: 1px solid var(--color-line);
}
.gm-catalog__link {
  display: grid;
  grid-template-columns: 48px 104px 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) 0;
  text-decoration: none;
  color: inherit;
}
.gm-catalog__num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-muted);
}
.gm-catalog__cover {
  width: 104px;
  height: 104px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.gm-catalog__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gm-catalog__body { min-width: 0; }
.gm-catalog__h {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-catalog__link:hover .gm-catalog__h {
  color: var(--color-ink);
}
.gm-catalog__meta {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.gm-catalog__meta .gm-catalog__tag {
  color: var(--color-ink);
}
.gm-catalog__time {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Pullquote-Feature · cream-bg, full-width across the list. */
.gm-catalog__feature {
  list-style: none;
  background: var(--color-surface-warm);
  margin: var(--sp-6) calc(-1 * var(--sp-7));
  padding: var(--sp-8) var(--sp-9);
  border-top: 1px solid rgba(184, 36, 45, 0.18);
  border-bottom: 1px solid rgba(184, 36, 45, 0.18);
}
.gm-catalog__feature-quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  max-width: 820px;
}
.gm-catalog__feature-mark {
  color: var(--color-ink);
  margin-right: 6px;
}
.gm-catalog__feature-cite {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-style: normal;
}
.gm-catalog__foot {
  max-width: 1080px;
  margin: var(--sp-8) auto 0;
  padding: 0 var(--sp-7);
  text-align: right;
}
.gm-catalog__more {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
}
.gm-catalog__more sup { font-style: italic; font-size: 0.7em; vertical-align: 0.4em; }
.gm-catalog__more:hover { opacity: 0.72; }
@media (max-width: 800px) {
  .gm-catalog { padding: var(--sp-7) 0; }
  .gm-catalog__head { padding: 0 var(--sp-5) var(--sp-6); }
  .gm-catalog__list { padding: 0 var(--sp-5); }
  .gm-catalog__link {
    grid-template-columns: 36px 72px 1fr;
    gap: var(--sp-4);
  }
  .gm-catalog__cover { width: 72px; height: 72px; }
  .gm-catalog__time { display: none; }
  .gm-catalog__feature {
    margin: var(--sp-5) calc(-1 * var(--sp-5));
    padding: var(--sp-7) var(--sp-5);
  }
}

/* ── Treffen Sie uns · Print-Hairline-Map + Expand-Accordion ─────
 * Reframe (2026-05-15): aus dem static Featured+Marginalia-List
 * wurde eine interaktive Karte. Hand-gezeichnete Germany-SVG-Map
 * mit drei City-Pins (Hamburg, Wiesbaden, München) links —
 * Accordion-Rows mit Click-Expand (Programm, Köche, Plätze frei,
 * Anmeldung) rechts. Click auf einen Pin highlightet + öffnet die
 * dazugehörige Row.
 *
 * Surface bleibt weiß (Print-DNA-Policy). Burgund-Accents auf den
 * Pulse-Animations und dem aktiven Row-State. */
.gm-program {
  background: var(--color-bg);
  padding: var(--sp-10) 0 var(--sp-10);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}
.gm-program__head {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-bleed) var(--sp-8);
}
.gm-program__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-4);
}
.gm-program__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 500;
  /* v8 2026-05-16 Papa-Direktive (3rd time): "Treffen Sie uns Typung
   * ist zu groß". From 36-56px → 26-40px. Vogue.de section-H2 scale. */
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.gm-program__lede {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 640px;
}

/* ── Partner / Sponsor-Pitch-Slot (v1 2026-05-15 2nd pass) ─────────
 * Anzeigenkunden-Achse: nach den drei öffentlichen Terminen folgt der
 * Co-Host-Pitch. Cream-Panel, ruhiger Charakter, kein Hard-Sell.
 * Layout: 3-Spalten-Grid auf Desktop (Copy | Formate | CTA),
 * stacked auf Tablet/Mobile.
 *
 * Forschungs-Anker: B2B-Halo-Effekt (Cummings/Cumming) — Editorial-
 * Umfeld trägt die Anzeige, deshalb steht der Pitch direkt nach den
 * öffentlichen Event-Beispielen, nicht in einem separaten Sales-Bereich. */
.gm-program__partner {
  /* v14 2026-05-16 fix per User: war container-wide (1760) → optisch sehr
   * weit. Jetzt container-max (1320) für tighter editorial frame. */
  max-width: var(--container-max);
  margin: var(--sp-9) auto 0;
  padding: 0 var(--page-bleed);
}
.gm-program__partner-inner {
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  /* Round-11.5 2026-05-16 · Papa-Vorlage Image-1: compact horizontal
     strip statt voluminöser Section. Tighter padding, schlankere Typo. */
  padding: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.85fr;
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
  /* Weinrot-Akzent-Strich links — Markenfarbe als Hairline-Akzent. */
  border-left: 3px solid var(--color-primary);
}
.gm-program__partner-copy {
  min-width: 0;
}
.gm-program__partner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
}
.gm-program__partner-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 6px;
}
.gm-program__partner-h {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* Round-11.5 · schlanker als zuvor — Papa-Vorlage Image-1 zeigt ~22-24px. */
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.gm-program__partner-lede {
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  /* Round-11.5 · kleinere lede, body-font statt italic-serif für die
     compact-strip-Variante. Papa-Vorlage Image-1 zeigt knappe Sachzeilen. */
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 42ch;
}
.gm-program__partner-lede em {
  font-style: italic;
  color: var(--color-ink);
}

/* Formate-Liste: drei Mini-Cards mit Saison-Eyebrow + Format-Titel +
 * 1-Zeilen-Beschreibung. Sehr knapp gehalten — der CTA ist die nächste
 * Spalte, hier soll der Anzeigenkunde nur sehen "ah, das gibt's". */
.gm-program__partner-formats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-left: 1px solid var(--color-line);
  padding-left: var(--sp-5);
}
.gm-program__partner-formats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-program__partner-season {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-program__partner-formats strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--color-ink);
  line-height: 1.15;
}
.gm-program__partner-formats span:last-child {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.gm-program__partner-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  justify-content: center;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--color-line);
}
/* v14 2026-05-16 — Mediakit-CTA premium-treatment per User-Kritik
 * ("muss deutlich cooler werden im Vergleich zum Rest").
 * Pattern: editorial display-style cta — larger, italic Times,
 * with animated arrow-on-line and burgundy accent on hover. */
.gm-program__partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Round-11.5 · Papa-Vorlage Image-1: kleinerer CTA, im Verhältnis zu
     der compact-strip-Höhe. War 22px → jetzt 17-18px. */
  font-size: clamp(16px, 1.3vw, 18px);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--color-ink);
  background: transparent;
  text-decoration: none;
  padding: 0;
  border: none;
  position: relative;
  transition: color 240ms var(--ease-out);
}
.gm-program__partner-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--color-ink);
  transform-origin: left center;
  transition: background 240ms var(--ease-out), transform 320ms var(--ease-out);
}
.gm-program__partner-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Round-11.5 · proportional zur kleineren Schrift. */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-primary-ink);
  font-size: 14px;
  transition: transform 320ms var(--ease-out), background 240ms var(--ease-out);
}
.gm-program__partner-btn:hover {
  color: var(--color-primary);
}
.gm-program__partner-btn:hover::after {
  background: var(--color-primary);
  transform: scaleX(0.7);
}
.gm-program__partner-btn:hover .gm-program__partner-btn-arrow {
  background: var(--color-primary);
  transform: translateX(4px);
}
.gm-program__partner-meta {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  line-height: 1.6;
  max-width: 22ch;
}

@media (max-width: 1100px) {
  .gm-program__partner-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .gm-program__partner-formats,
  .gm-program__partner-cta {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--sp-5);
  }
}
@media (max-width: 540px) {
  .gm-program__partner-inner { padding: 28px 24px; }
  .gm-program__partner-h { font-size: 24px; }
  .gm-program__partner-lede { font-size: 15.5px; }
}
/* Event-Card-Grid (2026-05-15 v2 — Sotheby's-Calendar +
 * TechSphere/Hotel-Reihe-Inspiration). Drei portraitliche Karten
 * Side-by-side: hero image (16:10) → date chip top-left over image →
 * eyebrow (typology + scarcity) → title (Garamond display) → meta-rows
 * mit pin/clock-icons → italic dek → outlined pill-CTA in burgund.
 *
 * Hover: image scale 1.03 over 600ms, CTA flip border-only → solid-fill. */
.gm-program__grid {
  /* v3 2026-05-15 2nd pass (Papa "treffen sie uns ist gar nicht umgesetzt"):
   * 3-col-Card-Grid → editorial Bühnenstapel. Jede Veranstaltung ist eine
   * eigene horizontale Stage (siehe .gm-event-stage), alternierend
   * links/rechts. Vogue/Apartamento-Spread-Konvention. */
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-bleed);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
}

/* ── Event-Stage (v3 alternating editorial layout) ───────────────── */
.gm-event-stage {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
}
/* Alternating: gerade Indexe haben Image rechts, ungerade haben Image links.
 * data-index="0" startet links (image links, copy rechts). */
.gm-event-stage[data-index="1"],
.gm-event-stage[data-index="3"],
.gm-event-stage[data-index="5"] {
  grid-template-columns: 1fr 1.2fr;
}
.gm-event-stage[data-index="1"] .gm-event-stage__media,
.gm-event-stage[data-index="3"] .gm-event-stage__media,
.gm-event-stage[data-index="5"] .gm-event-stage__media {
  order: 2;
}
.gm-event-stage__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 40px 80px -32px rgba(26, 26, 26, 0.35),
    0 8px 16px -8px rgba(26, 26, 26, 0.14);
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out);
}
.gm-event-stage__media:hover {
  transform: translateY(-4px);
  box-shadow:
    0 56px 100px -32px rgba(26, 26, 26, 0.42),
    0 16px 24px -8px rgba(26, 26, 26, 0.18);
}
.gm-event-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.gm-event-stage__media:hover img {
  transform: scale(1.05);
}
.gm-event-stage__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  min-width: 0;
}

/* Big-Numeral Date — display-Hero des Body-Blocks. Sotheby's-Catalog. */
.gm-event-stage__date {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-line);
}
.gm-event-stage__day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  /* Farbe wird inline via JS gesetzt (city-tint). */
}
.gm-event-stage__month {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-event-stage__time {
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.gm-event-stage__eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* color via inline-style (city-tint) — accent-spot-color OK per Papa-Regel. */
}
.gm-event-stage__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.gm-event-stage__venue {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-event-stage__dek {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 44ch;
}
.gm-event-stage__chefs {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.gm-event-stage__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: var(--sp-3);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  /* CSS-Variable --stage-tint von JS inline gesetzt → wird hier
   * für color + border + hover-background verwendet. Kein currentColor-
   * Trick mehr, kein !important — beides hat den Text bei hover
   * unsichtbar gemacht (Papa-Report). */
  color: var(--stage-tint, var(--color-primary));
  border: 1px solid var(--stage-tint, var(--color-primary));
  background: transparent;
  border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.gm-event-stage__cta:hover {
  background: var(--stage-tint, var(--color-primary));
  color: #fff;
}
.gm-event-stage__cta-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.gm-event-stage__cta:hover .gm-event-stage__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .gm-event-stage,
  .gm-event-stage[data-index="1"],
  .gm-event-stage[data-index="3"],
  .gm-event-stage[data-index="5"] {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .gm-event-stage[data-index="1"] .gm-event-stage__media,
  .gm-event-stage[data-index="3"] .gm-event-stage__media,
  .gm-event-stage[data-index="5"] .gm-event-stage__media {
    order: 0;
  }
  .gm-event-stage__day { font-size: 54px; }
  .gm-event-stage__title { font-size: 26px; }
}
.gm-event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  /* Subtle rounded corners (6px) — aus den Inspirationen übernommen,
   * weichgespült auf print-DNA-Maß. Nicht 16px tech-card, nicht 0
   * hard-print-strict. */
  border-radius: 6px;
  overflow: hidden;
  /* Sehr weiche Elevation — read als "Print-Objekt mit etwas Schatten",
   * nicht als SaaS-Card. Top + bottom shadow asymmetric (paper-on-page). */
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04), 0 24px 48px -24px rgba(26, 26, 26, 0.16);
  transition: box-shadow 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.gm-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(26, 26, 26, 0.05), 0 32px 64px -24px rgba(26, 26, 26, 0.22);
}
.gm-event-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-line);
}
.gm-event-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.gm-event-card:hover .gm-event-card__media img {
  transform: scale(1.04);
}
/* Date-Chip Top-Left auf dem Image — adaptiert das TechSphere-Inspirations-
 * Pattern auf print-DNA: Cream-Paper-BG, italic Garamond numeral, small-caps
 * Monat. Rounded corners 4px (subtler als Inspiration), Box-Shadow weicher. */
.gm-event-card__date {
  position: absolute;
  top: clamp(14px, 1.8vw, 22px);
  left: clamp(14px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px 8px;
  background: var(--color-surface-warm);
  border-radius: 4px;
  box-shadow: 0 4px 12px -4px rgba(26, 26, 26, 0.20);
  min-width: 56px;
  z-index: 2;
}
.gm-event-card__day {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.012em;
}
.gm-event-card__month {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gm-event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(24px, 2.4vw, 36px);
  flex: 1;
}
.gm-event-card__eyebrow {
  display: block;
  font-family: var(--font-body);
  /* Slightly bigger als andere Eyebrows damit "scarcity-by-design"
   * (Nur auf Einladung) als erste Information liest. */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-event-card__title {
  /* v8 2026-05-16: Papa-Direktive "Wein und Chirurgin Typo zu groß".
   * 28-38px → 20-28px. Falstaff event-card-Skala. */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
.gm-event-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-line);
}
.gm-event-card__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.gm-event-card__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-muted);
}
.gm-event-card__dek {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-ink-soft);
  /* Klemmt Dek auf 4 Zeilen damit Cards visuell gleich-hoch enden. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pill-CTA outlined burgund — Hover flip zu solid-fill. Adaptiert
 * das Inspirations-Pill-Pattern auf Gour-Med-Burgund. Mit Arrow-Glyph,
 * der bei Hover nach rechts wandert (subtle motion-cue). */
.gm-event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 22px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.gm-event-card__cta-arrow {
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}
.gm-event-card__cta:hover,
.gm-event-card:hover .gm-event-card__cta {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.gm-event-card:hover .gm-event-card__cta-arrow {
  transform: translateX(3px);
}

/* Strip · vertical stack of accordion cards on the right. */
.gm-program__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.gm-program__card {
  min-width: 0;
  border-bottom: 1px solid var(--color-line);
  transition: background 240ms ease;
}
.gm-program__card-toggle {
  display: block;
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 200ms ease;
}
.gm-program__card-toggle:hover { background: rgba(127, 22, 22, 0.02); }
.gm-program__card.is-active .gm-program__card-toggle { background: transparent; }
.gm-program__card-date {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}
.gm-program__card-time {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 8px;
}
.gm-program__card-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-3);
}
.gm-program__card-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.18;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.gm-program__card-loc {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
}
/* Inline stages — each card has stage1 (dek + Anmelden) revealed when
 * .is-active; stage2 (chefs/programm/form) revealed when .is-revealed. */
.gm-program__card-stage1,
.gm-program__card-stage2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease-out), padding 380ms var(--ease-out);
}
.gm-program__card.is-active .gm-program__card-stage1 {
  max-height: 500px;
  padding-bottom: var(--sp-5);
}
.gm-program__card.is-revealed .gm-program__card-stage2 {
  max-height: 1600px;
  padding-bottom: var(--sp-6);
}
.gm-program__card-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0 0 var(--sp-4);
  max-width: 36em;
}
.gm-program__card-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  padding: 16px 28px;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.gm-program__card-cta:hover { opacity: 0.88; }
.gm-program__card.is-revealed .gm-program__card-cta {
  opacity: 0.4;
  pointer-events: none;
}

/* Detail content lives INSIDE each card (stage2). Stage2-CSS reused for
 * the inline reveal. */
.gm-program__detail-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-3);
}
.gm-program__detail-chefs {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.gm-program__detail-chefs li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  overflow-wrap: anywhere;
  border-top: 1px dashed var(--color-line);
  padding-top: var(--sp-3);
}
.gm-program__detail-chefs li:first-child { border-top: 0; padding-top: 0; }
.gm-program__detail-chefs strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.gm-program__detail-chefs span { color: var(--color-muted); }
.gm-program__detail-progr {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  counter-reset: progr;
}
.gm-program__detail-progr li {
  counter-increment: progr;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  align-items: baseline;
  overflow-wrap: anywhere;
}
.gm-program__detail-progr li::before {
  content: counter(progr, decimal-leading-zero);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-ink);
  flex-shrink: 0;
  min-width: 28px;
}
.gm-program__detail-seats {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  margin: 0 0 var(--sp-5);
}
.gm-program__detail-seats strong {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 15px;
}
.gm-program__detail-form {
  display: flex;
  gap: var(--sp-3);
  max-width: 480px;
  margin-top: var(--sp-3);
}
.gm-program__detail-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  outline: none;
}
.gm-program__detail-form input:focus { border-color: var(--color-ink); }
.gm-program__detail-form button {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  white-space: nowrap;
}
.gm-program__detail-form-sent {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--color-ink);
}

.gm-program__foot {
  max-width: var(--container-wide);
  margin: var(--sp-8) auto 0;
  padding: 0 var(--page-bleed);
  text-align: right;
}
.gm-program__more {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
}
@media (max-width: 1100px) {
  .gm-program__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Auf 2-Spalten Layout: dritte Card sitzt mittig in der zweiten Reihe,
   * sieht oft unbalanciert aus — wir lassen es so, weil 3 Cards / 2 Spalten
   * = 1.5 Reihen ist eine ehrliche Skalierung. Alternative: linke Card
   * spannt full-width. Aktuell: einfach grid-flow. */
}
@media (max-width: 700px) {
  .gm-program { padding: var(--sp-7) 0; }
  .gm-program__head, .gm-program__grid, .gm-program__foot {
    padding-left: var(--sp-5); padding-right: var(--sp-5);
  }
  .gm-program__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .gm-event-card__title { font-size: 26px; }
  .gm-event-card__body { padding: 22px; }
  .gm-program__card-toggle { padding: var(--sp-4) 0; }
  .gm-program__detail-form { flex-direction: column; }
  .gm-program__detail-form button { padding: 14px 22px; }
}

/* ── Die Redaktion · Masthead (2026-05-15, ersetzt gm-archive auf Homepage)
 * Print-Magazin-Tradition: drei Editor-Portraits + Bio + Signature-Pieces.
 * BEWUSST RUHIGER gestaltet als die Event-Cards der Treffen-Sektion:
 * keine border-radius, keine Box-Shadows, nur Hairlines. Visueller Atemraum
 * vor dem dramatischen Closer-Curtain.
 *
 * Sepia-Filter + Hover-Saturate ist klassischer Editorial-Effekt:
 * Portraits wirken erst archivarisch, dann lebendig wenn der User
 * gezielt mit ihnen interagiert. Filter-Change nur on hover = keine
 * "wackelt im Stuhl" Hintergrund-Animation (memory: feedback-scroll-bound). */
.gm-masthead {
  background: var(--color-bg);
  padding: var(--sp-10) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.gm-masthead__head {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-bleed) var(--sp-8);
}
.gm-masthead__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-4);
}
.gm-masthead__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: 500;
  /* v9 2026-05-16: per spec section heading 32-40px range. Vorher 60-110.
   * Doctor-audience 45+ — kein Kasematten-Display. Cards lead. */
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
.gm-masthead__title em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.gm-masthead__lede {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 720px;
}
.gm-masthead__hint {
  /* Subtile click-hint unter dem Lede — small-caps tracked, mute color.
   * Affordance: "Karte ist interaktiv" ohne UI-laut zu werden. */
  margin: var(--sp-4) 0 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* ── Editorial-Showcase v3 (Papa-Direktive 2026-05-15 2nd pass) ──
 * Slideshow-Pattern: ein grosser Editor im Spot mit Portrait, Halo-Drop
 * und Socials, alphabetische Thumb-Strip drunter zum Navigieren. Index
 * "01 / 12" als Curation-Anchor. */
.gm-masthead__showcase {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-8) var(--page-bleed) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}
.gm-showcase__stage {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: stretch;
  outline: none;
}
.gm-showcase__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 40px 80px -32px rgba(26, 26, 26, 0.36),
    0 12px 24px -8px rgba(26, 26, 26, 0.14);
  background: var(--color-line);
}
.gm-showcase__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: opacity 360ms var(--ease-out);
}
.gm-showcase__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  min-width: 0;
}
.gm-showcase__info-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-line);
}
.gm-showcase__index {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--color-ink-soft);
  letter-spacing: 0.03em;
}
/* Rubric-Tag mit data-rubric → tinted Punkt + Label. Per Papa-Regel
 * OK in Markenfarbe weil winziger Akzent-Spot. */
.gm-showcase__rubric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-showcase__rubric::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-showcase__rubric[data-rubric="dine"]::before      { background: var(--rub-dine); }
.gm-showcase__rubric[data-rubric="medical"]::before   { background: var(--rub-medical); }
.gm-showcase__rubric[data-rubric="travel"]::before    { background: var(--rub-travel); }
.gm-showcase__rubric[data-rubric="lifestyle"]::before { background: var(--rub-lifestyle); }
.gm-showcase__rubric[data-rubric="magazine"]::before  { background: var(--rub-magazine); }

.gm-showcase__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--color-ink);
}
.gm-showcase__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-showcase__halo {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 44ch;
}
.gm-showcase__since {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.gm-showcase__nav-row {
  display: flex;
  gap: 12px;
  margin-top: var(--sp-3);
}
.gm-showcase__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.gm-showcase__nav:hover {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}

.gm-showcase__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-line);
}
.gm-showcase__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.gm-showcase__social:hover {
  color: var(--color-ink);
}
.gm-showcase__social .gm-editor-card__social-icon {
  width: 18px;
  height: 18px;
}

/* Thumbnail-Strip — alphabetisch, 12 Stück in 6/4/3 Spalten je Breakpoint. */
.gm-showcase__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  border-top: 1px solid var(--color-line);
  padding-top: var(--sp-5);
}
.gm-showcase__thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gm-showcase__thumb:hover { opacity: 0.85; }
.gm-showcase__thumb.is-active { opacity: 1; }
.gm-showcase__thumb-portrait {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-line);
}
.gm-showcase__thumb.is-active .gm-showcase__thumb-portrait {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.gm-showcase__thumb-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.gm-showcase__thumb-name {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
  text-align: center;
}
.gm-showcase__thumb.is-active .gm-showcase__thumb-name {
  color: var(--color-ink);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .gm-showcase__stage { grid-template-columns: 1fr; }
  .gm-showcase__portrait { max-width: 420px; }
  .gm-showcase__thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .gm-showcase__thumbs { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gm-showcase__name { font-size: 28px; }
  .gm-showcase__halo { font-size: 15.5px; }
}

/* Editorial Roster v4 (Papa-Direktive 2026-05-15 2nd pass):
 * 12 Editor-Karten in 4-Spalten-Grid (3 Reihen × 4) statt 5-Karten-
 * Cascade. Keine 3D-Cascade-Tilt mehr — Print-Magazin-Impressum-Look
 * passt zu Halo-First-Roster und Anzeigenkunden-Achse besser. Tint
 * per data-rubric Attribut statt nth-child (Order-unabhängig). */
.gm-masthead__grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-8) var(--page-bleed) var(--sp-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}
.gm-editor-card {
  position: relative;
  /* Aspect 4:5 bleibt — Portrait-dominant Card. */
  aspect-ratio: 4 / 5;
  perspective: 1400px;
  cursor: pointer;
  transition: transform 360ms var(--ease-out);
  --card-tint: var(--rub-event);
  --card-tint-soft: rgba(0, 0, 0, 0.20);
}
/* Ground-Shadow bleibt — subtiler "schwebt über Boden"-Effekt. */
.gm-editor-card::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 12%;
  right: 12%;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(26, 26, 26, 0.18) 0%, rgba(26, 26, 26, 0.08) 40%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.gm-editor-card:hover::after,
.gm-editor-card.is-flipped::after {
  transform: translateY(6px) scale(1.06);
}
/* Pro-Rubrik Tint-Mapping via data-rubric — order-unabhängig, alphabetisch
 * sortierbar ohne Color-Brüche. */
.gm-editor-card[data-rubric="magazine"]  { --card-tint: var(--rub-magazine);  --card-tint-soft: rgba(110, 74, 40, 0.94); }
.gm-editor-card[data-rubric="dine"]      { --card-tint: var(--rub-dine);      --card-tint-soft: rgba(122, 31, 38, 0.94); }
.gm-editor-card[data-rubric="medical"]   { --card-tint: var(--rub-medical);   --card-tint-soft: rgba(46, 82, 71, 0.94); }
.gm-editor-card[data-rubric="travel"]    { --card-tint: var(--rub-travel);    --card-tint-soft: rgba(30, 58, 95, 0.94); }
.gm-editor-card[data-rubric="lifestyle"] { --card-tint: var(--rub-lifestyle); --card-tint-soft: rgba(184, 139, 58, 0.94); }
.gm-editor-card:hover,
.gm-editor-card:focus-visible,
.gm-editor-card.is-flipped {
  /* v4 (4-col grid): kein Cascade-Tilt mehr im baseline, also reduzierter
   * Hover-Lift. Translation only, kein rotateY-Unset nötig. */
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
  outline: none;
}
.gm-editor-card__inner {
  /* Inner ist der 3D-flip-Container. preserve-3d hält Front und Back als
   * gegenüber-stehende Faces; backface-visibility: hidden auf beiden
   * Faces zeigt jeweils nur die zugewandte Seite. */
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms var(--ease-out);
  /* Stronger box-shadow für floating-device-feel der Referenz. */
  box-shadow:
    0 20px 40px -16px rgba(26, 26, 26, 0.40),
    0 6px 14px -4px rgba(26, 26, 26, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  border-radius: 14px;
}
/* Directional-Light-Gradient für 3D-Shading: subtile linear-gradient
 * über die ganze Card, dunkler links / heller rechts — simuliert
 * Lichtquelle oben-rechts. Gibt Tiefe ohne harte Schatten. */
.gm-editor-card__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.10) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.10) 100%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 5;
}
.gm-editor-card.is-flipped .gm-editor-card__inner {
  transform: rotateY(180deg);
}
.gm-editor-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
/* (Phone-Camera-Hole-Detail entfernt 2026-05-15 2nd pass — iPhone-Mockup-
 * Geste passt nicht zum Impressum-/Print-Magazin-Look der v4-Halo-Karten. */
.gm-editor-card__face--front {
  /* Front-Face komplett in Card-Tint — saturierter Brand-Anchor pro Editor.
   * White text drauf (high-contrast über allen rubric-Farben getestet). */
  background: var(--card-tint);
  color: rgba(255, 255, 255, 0.96);
}
.gm-editor-card__face--back {
  background: var(--color-bg);
  transform: rotateY(180deg);
  padding: var(--sp-5);
  justify-content: space-between;
  /* Subtle linker Akzent-Streifen in Card-Tint — verbindet Back-Face
   * visuell mit der Front-Identity der Card. */
  border-left: 4px solid var(--card-tint);
}
/* FRONT: Portrait (75%) + Name-Block (25%) — Print-Card-Format.
 * Portrait jetzt full-color, keine mix-blend-mode-Verfärbung mehr
 * (User-Direktive 2026-05-15). Tint zeigt sich nur noch im Nameplate
 * unter dem Photo + im Hairline-Akzent. */
.gm-editor-card__portrait {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* BG bleibt Card-Tint nur als Fallback falls Image-Load fehlt — Image
   * darüber ist opak und überdeckt es im Normalfall. */
  background: var(--card-tint);
}
.gm-editor-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover füllt den Portrait-Bereich vollständig. object-position
   * 50% 18% biast den Crop nach oben — Haare/Köpfe bleiben garantiert
   * sichtbar, geschnitten wird unten (Beine/Torso/Schultern je nach Aspect).
   * User-Direktive 2026-05-15: "Bilder den ganzen oberen Teil einnehmen,
   * ohne dass praktisch was von den Köpfen ... verschwindet". Ersetzt das
   * vorherige contain (zeigte das ganze Bild, ließ aber Tint-Letterbox-
   * Streifen oben/unten — visuell als "schwebendes Photo" gelesen). */
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 900ms var(--ease-out);
}
.gm-editor-card:hover .gm-editor-card__portrait img {
  transform: scale(1.04);
}
/* (Roman-Chapter-Numeral entfernt 2026-05-15 2nd pass — Papa: "keine
 * Gewichtung". Halo-Drop ersetzt die Brand-Anchor-Funktion mit besserer
 * advertiser-relevanter Info ("Auch: Stern · 10 Jahre"). */
.gm-editor-card__nameplate {
  flex: 0 0 auto;
  /* min-height für uniform Nameplate-Größe; jetzt 3 Zeilen (Name + Role
   * + Halo-Drop) statt 2. 130px reicht für gängige Fonts inkl. Descender. */
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 18px;
  background: var(--card-tint-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.gm-editor-card__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 22px);
  /* Bumped line-height 1.08 → 1.25 für Descender-Headroom (g/p/y).
   * Plus overflow:hidden entfernt — wenn Card schmal, lieber Ellipsis
   * via text-overflow am NAMEPLATE-Container statt clip am name-element. */
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--color-primary-ink);
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* min-width: 0 + max-width: 100% damit text-overflow im flex container
   * korrekt feuert ohne overflow:hidden Descender zu killen. */
  min-width: 0;
  max-width: 100%;
}
/* Nameplate-Container clipt horizontal-overflow für Ellipsis, aber gibt
 * Descender im vertical-axis Raum (overflow-x hidden, overflow-y visible). */
.gm-editor-card__nameplate {
  overflow-x: hidden;
  overflow-y: visible;
}
.gm-editor-card__role {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Translucent cream — sub-hierarchy unter dem Namen. */
  color: rgba(255, 255, 255, 0.75);
}
/* Halo-Drop (v4 2026-05-15 2nd pass): die advertiser-relevante Info —
 * "Auch: Stern · 10 Jahre" oder "Vogue Living". Sitzt unter dem Role-
 * Tag, einzeilig, kleiner Serifen-Schnitt damit es typografisch von der
 * sans-serif Role-Zeile abgesetzt ist. */
.gm-editor-card__halo {
  display: block;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* BACK: Halo-Detail + Socials. */
.gm-editor-card__back-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-line);
}
.gm-editor-card__back-name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  /* Bigger 22 → 30px für card-flipped face-on Lesbarkeit. */
  font-size: 30px;
  line-height: 1.05;
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: -0.008em;
}
.gm-editor-card__back-chapter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--card-tint);
  font-weight: 500;
}
/* Role-Sub-Line auf Back-Face: gleiche tracked-uppercase Convention wie
 * Front-Nameplate, aber in card-tint Color (statt translucent white).
 * Verbindet die Persönlichkeit visuell mit ihrer Kategorie. */
.gm-editor-card__back-role {
  display: block;
  margin: var(--sp-3) 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--card-tint);
}
/* Halo-Drop auf Back-Face: erweiterte Version, ohne Truncation. Sitzt
 * zwischen Role und Socials-Liste. */
.gm-editor-card__back-halo {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
/* Bio/Pieces-CSS bleibt für mögliche zukünftige Reaktivierung, aber wird
 * nicht mehr gerendert auf der Back-Face — Socials sind jetzt der Content.
 * (User-Direktive 2026-05-15: "auf der Rückseite sollten keine Informationen
 * stehen, sondern nur die Socials, also LinkedIn, Instagram und so") */
.gm-editor-card__bio {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.gm-editor-card__pieces-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-line);
}
.gm-editor-card__pieces {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gm-editor-card__pieces li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  /* Bumped 13 → 14.5px für Lesbarkeit. */
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--color-ink);
}
.gm-editor-card__pieces li::before {
  content: '—';
  flex-shrink: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-style: normal;
}
.gm-editor-card__pieces-title { flex: 1; }
.gm-editor-card__pieces-issue {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.gm-editor-card__tags {
  display: flex;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}
.gm-editor-card__back-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
}
/* Socials-Block auf Back-Face (2026-05-15 v3). Vertikale Liste mit
 * SVG-Icon + Label pro Channel. Tint-Hover für Editorial-Vibe. */
.gm-editor-card__socials-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-line);
}
.gm-editor-card__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-editor-card__socials li {
  margin: 0;
}
.gm-editor-card__social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.gm-editor-card__social-link:hover {
  color: var(--card-tint);
  border-bottom-color: var(--card-tint);
  transform: translateX(2px);
}
.gm-editor-card__social-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--card-tint);
}
.gm-editor-card__social-label {
  font-family: var(--font-body);
}

/* Reduced-Motion Accessibility-Fallback (User-Request 2026-05-15).
 * Bei prefers-reduced-motion: reduce wird der 3D-Tilt + Cascade-Animation
 * entfernt. Cards stehen flach in einer Reihe, sehen nicht 3D aus aber
 * sind voll funktional. Verhindert Motion-Sickness bei betroffenen Usern. */
@media (prefers-reduced-motion: reduce) {
  .gm-editor-card,
  .gm-editor-card:hover,
  .gm-editor-card:focus-visible,
  .gm-editor-card.is-flipped {
    transform: none;
    transition: none;
  }
  .gm-editor-card__inner,
  .gm-editor-card.is-flipped .gm-editor-card__inner {
    transition: none;
  }
  .gm-editor-card::after {
    display: none;
  }
  .gm-masthead__grid {
    perspective: none;
  }
}
.gm-masthead__foot {
  max-width: var(--container-wide);
  margin: var(--sp-8) auto 0;
  padding: 0 var(--page-bleed);
  text-align: right;
}
.gm-masthead__more {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
}
.gm-masthead__more:hover { opacity: 0.72; }

/* Responsive (gm-masthead v4 — 12 Karten 4-col Grid).
 * Desktop ≥1101px: 4 Spalten × 3 Reihen.
 * Tablet 701-1100px: 3 Spalten × 4 Reihen.
 * Mobile ≤700px: 2 Spalten × 6 Reihen (kein horizontal-scroll — bei 12
 *   Karten würde der zu lang werden). */
@media (max-width: 1100px) {
  .gm-masthead__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 18px;
  }
}
@media (max-width: 700px) {
  .gm-masthead { padding: var(--sp-7) 0; }
  .gm-masthead__head, .gm-masthead__grid, .gm-masthead__foot {
    padding-left: var(--sp-5); padding-right: var(--sp-5);
  }
  .gm-masthead__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
  }
  .gm-editor-card__name { font-size: 17px; }
  .gm-editor-card__nameplate { min-height: 110px; padding: 12px 12px 14px; }
  .gm-editor-card__halo { font-size: 11px; }
}

/* ── Alle Ausgaben · Issue-Archive ──────────────────────────────
 * Paris-Review + Lapham's-DNA: Hero (current issue large) + Strip
 * (chronological covers) + cream statement-band ("176 Hefte seit 1982"). */
.gm-archive {
  background: var(--color-bg);
  padding: var(--sp-9) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.gm-archive__head {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-bleed) var(--sp-8);
}
.gm-archive__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-4);
}
.gm-archive__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Stripe-Press-Skala: Archive-Section verdient den gleichen Display-Hit
   * wie Latest und Treffen-Sie-uns — sonst wirkt sie als Body-Sub-Section. */
  font-size: clamp(80px, 11vw, 180px);
  line-height: 0.96;
  letter-spacing: -0.014em;
  color: var(--color-ink);
}
.gm-archive__title em {
  /* italic + lowercase Akzent — bricht das uppercase-Strenge, gibt
   * der Section einen subtle editorial pulse. */
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--color-ink);
}
.gm-archive__hero {
  max-width: var(--container-wide);
  margin: 0 auto var(--sp-9);
  padding: 0 var(--page-bleed);
  display: grid;
  /* Cover-Spalte breiter (420 → 520) damit das Print-Object visuelle
   * Hauptrolle hat statt Decoration neben Text. */
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}
.gm-archive__cover {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
}
.gm-archive__hero-body {
  padding-top: var(--sp-5);
}
.gm-archive__issue {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}
.gm-archive__season {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-5);
}
.gm-archive__theme {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.gm-archive__stories {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.gm-archive__stories li {
  border-bottom: 1px solid var(--color-line);
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.35;
  color: var(--color-ink);
}
.gm-archive__actions {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.gm-archive__cta {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 22px;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.gm-archive__cta:hover { opacity: 0.85; }
.gm-archive__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 3px;
}
/* Decade-Browser · interactive timeline of 176 issues across 5 decades.
 * Reworked 2026-05-15: stage is now vertical (theme on top, covers
 * full-width below), uses container-max-width so the section breathes
 * across the full editorial layout. */
.gm-archive__decades {
  max-width: var(--container-max);
  margin: 0 auto var(--sp-9);
  padding: 0 var(--sp-6);
}
.gm-archive__decades-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--sp-4);
}
.gm-archive__tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--sp-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.gm-archive__tabs::-webkit-scrollbar { display: none; }
.gm-archive__tab {
  flex: 1;
  min-width: 160px;
  padding: var(--sp-5) var(--sp-5);
  background: none;
  border: 0;
  border-left: 1px solid var(--color-line);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-ink-soft);
  transition: background 220ms ease, color 220ms ease;
}
.gm-archive__tab:first-child { border-left: 0; }
.gm-archive__tab-label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.05;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  transition: color 220ms ease;
}
.gm-archive__tab-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 220ms ease;
}
.gm-archive__tab:hover { background: rgba(127, 22, 22, 0.02); }
.gm-archive__tab:hover .gm-archive__tab-label { color: var(--color-ink); }
.gm-archive__tab.is-active {
  background: rgba(127, 22, 22, 0.045);
  color: var(--color-ink);
  position: relative;
}
.gm-archive__tab.is-active .gm-archive__tab-label { color: var(--color-ink); }
.gm-archive__tab.is-active .gm-archive__tab-meta { color: var(--color-ink); }
.gm-archive__tab.is-active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
}

/* Stage · theme line + blurb on top, covers in a wide row below.
 * Cross-fade on decade switch. */
.gm-archive__stage { display: block; }
.gm-archive__stage.is-switching .gm-archive__stage-meta,
.gm-archive__stage.is-switching .gm-archive__stage-covers {
  opacity: 0;
}
.gm-archive__stage-meta,
.gm-archive__stage-covers {
  transition: opacity 280ms ease;
}
.gm-archive__stage-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--sp-7);
  align-items: end;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-line);
}
.gm-archive__stage-theme {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.gm-archive__stage-blurb {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 38ch;
}
.gm-archive__stage-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.gm-archive__stage-count span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
  margin-right: 10px;
  display: inline-block;
  vertical-align: -6px;
}
.gm-archive__stage-covers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.gm-archive__cover-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gm-archive__cover-img {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.04);
  margin-bottom: var(--sp-3);
  transition: transform 600ms var(--ease-out), filter 220ms ease;
  position: relative;
}
.gm-archive__cover-card:hover .gm-archive__cover-img { transform: translateY(-4px); filter: brightness(0.96); }
.gm-archive__cover-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.gm-archive__cover-no {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-ink);
  display: block;
}
.gm-archive__cover-season {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
}
.gm-archive__cover-pages {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11px;
  color: var(--color-ink-soft);
  display: block;
  margin-top: 2px;
}

/* 176-Band · cream block with OVERSIZED "176" numeral + NL CTA.
 * Reworked 2026-05-15: das italic-Numeral wird zum Editorial-Schlusspunkt
 * der Section. "176" füllt fast die ganze Höhe als graphischer Anker. */
.gm-archive__band {
  background: var(--color-surface-warm);
  border-top: 1px solid rgba(184, 36, 45, 0.18);
  border-bottom: 1px solid rgba(184, 36, 45, 0.18);
}
.gm-archive__band-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-7);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: center;
}
.gm-archive__band-head { min-width: 0; }
/* Oversized graphic numeral · two-line block: "176" as a hero figure,
 * "Hefte seit 1982." as supporting text below. */
.gm-archive__band-num {
  margin-bottom: var(--sp-5);
}
.gm-archive__band-num-fig {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(120px, 17vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.045em;
}
.gm-archive__band-num-fig em {
  color: var(--color-ink);
  font-style: italic;
}
.gm-archive__band-num-suffix {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.gm-archive__band-prompt {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 40ch;
}
.gm-archive__band-prompt em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}
.gm-archive__band-form {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}
.gm-archive__band-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: var(--color-ink);
  outline: none;
  transition: border-color 200ms ease;
}
.gm-archive__band-input:focus { border-color: var(--color-ink); }
.gm-archive__band-submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.gm-archive__band-submit:hover { opacity: 0.9; }
.gm-archive__band-success {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--color-ink);
  padding: var(--sp-4) 0;
}
.gm-archive__band[data-state="sent"] .gm-archive__band-form { display: none; }
.gm-archive__band[data-state="sent"] .gm-archive__band-success { display: block; }
.gm-archive__band-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-5);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
}
.gm-archive__band-privacy {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gm-archive__band-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 3px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .gm-archive__tab { min-width: 110px; padding: var(--sp-4) var(--sp-3); }
  .gm-archive__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
  .gm-archive__stage-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}
@media (max-width: 800px) {
  .gm-archive { padding-top: var(--sp-7); }
  .gm-archive__head, .gm-archive__hero, .gm-archive__decades, .gm-archive__band-inner {
    padding-left: var(--sp-5); padding-right: var(--sp-5);
  }
  .gm-archive__hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    margin-bottom: var(--sp-7);
  }
  .gm-archive__cover { max-width: 280px; }
  .gm-archive__tabs { margin-bottom: var(--sp-6); overflow-x: auto; }
  /* Tabs are 5 × 70px min on mobile so they fit comfortably; horizontal
   * scroll kicks in only on the very narrowest screens. */
  .gm-archive__tab { flex: 0 0 auto; min-width: 70px; padding: var(--sp-4) var(--sp-3); }
  .gm-archive__tab-label { font-size: 16px; }
  .gm-archive__tab-meta { font-size: 9.5px; letter-spacing: 0.18em; }
  .gm-archive__stage-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .gm-archive__band-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-7) var(--sp-5);
  }
  .gm-archive__band-num { font-size: clamp(34px, 8vw, 56px); }
  .gm-archive__band-form { flex-direction: column; gap: var(--sp-3); }
  .gm-archive__band-submit { padding: 14px 22px; }
  .gm-archive__band-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ── Der Gour-Med Brief · Newsletter on cream surface ──────────
 * Marginalian-DNA: literary manifesto + Garden-&-Gun cover-anchor.
 * Full-section cream block — the third and largest cream-escalation
 * step on the page (after catalog-pullquote and archive-band). */
.gm-brief {
  background: var(--color-surface-warm);
  padding: var(--sp-9) 0;
  border-top: 1px solid rgba(184, 36, 45, 0.18);
  border-bottom: 1px solid rgba(184, 36, 45, 0.18);
}
.gm-brief__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sp-7);
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.gm-brief__visual {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  box-shadow: 0 25px 50px -25px rgba(0, 0, 0, 0.35);
}
.gm-brief__body { max-width: 540px; }
.gm-brief__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
}
.gm-brief__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-weight: 500;
  /* v9 2026-05-16: section title scaled per spec, NL-Card lead. */
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: 0.012em;
  color: var(--color-ink);
}
.gm-brief__title em {
  font-style: italic; text-transform: none; letter-spacing: -0.01em;
  color: var(--color-ink);
}
.gm-brief__manifest {
  margin: 0 0 var(--sp-7);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.gm-brief__manifest em {
  font-style: italic;
  color: var(--color-ink);
}
.gm-brief__form {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  max-width: 460px;
  margin-bottom: var(--sp-4);
}
.gm-brief__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: var(--color-ink);
  outline: none;
}
.gm-brief__input:focus {
  border-color: var(--color-ink);
}
.gm-brief__submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.gm-brief__submit:hover { opacity: 0.85; }
.gm-brief__privacy {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.gm-brief__success {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-ink);
  margin-top: var(--sp-5);
}
.gm-brief.is-sent .gm-brief__form,
.gm-brief.is-sent .gm-brief__privacy { display: none; }
.gm-brief.is-sent .gm-brief__success { display: block; }
@media (max-width: 800px) {
  .gm-brief { padding: var(--sp-7) 0; }
  .gm-brief__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: 0 var(--sp-5);
  }
  .gm-brief__visual {
    max-width: 220px;
    margin: 0 auto;
  }
  .gm-brief__form {
    flex-direction: column;
  }
  .gm-brief__submit { padding: 14px 22px; }
}

/* ── Newsletter Popup · gm-nlpop (2026-05-15)
 * Modal-Popup mit Octopus-PNG das visuell auf der Form-Card sitzt.
 * Octopus image overlapt Card-Oberkante via negative margin-bottom;
 * Card hat extra top-padding um Octopus-Body Raum zu geben. Tentakel
 * im unteren Bereich des PNGs drapieren über Card-Top.
 *
 * Trigger: exit-intent + 90% scroll + 8s Grace (memory:feedback-popup-
 * engagement-triggers). Dismissed-State in localStorage. */
.gm-nlpop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.gm-nlpop[hidden] {
  display: none !important;
}
.gm-nlpop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gm-nlpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.gm-nlpop__modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Modal scaliert sanft beim Öffnen — popup-feel. */
  transform: translateY(20px) scale(0.96);
  transition: transform 500ms var(--ease-out);
}
.gm-nlpop.is-open .gm-nlpop__modal {
  transform: translateY(0) scale(1);
}
/* Octopus-PNG sitzt visuell AUF der Card. User-Direktive (2026-05-15, 2nd
 * pass): "Octopus tendenziell kleiner ... sitzt nicht auf der Kante drauf,
 * sondern schwebt in der Luft". Body muss am Card-Top aufliegen, untere
 * Tentakel hängen auf die Card-Oberkante. Werte:
 *   max-width 300px (war 380, ~20% kleiner) +
 *   margin-bottom -130px (mehr Overlap relativ zur kleineren Höhe).
 * Da der Body in der PNG ca. bei 55 % der Canvas-Höhe endet, bringt diese
 * Kombination den Body-Boden direkt an die Card-Kante. */
.gm-nlpop__octopus {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-bottom: -130px;
  z-index: 2;
  pointer-events: none;
  /* Sanfter drop-shadow gibt 3D-floating-feeling. */
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.25));
}
.gm-nlpop__octopus img {
  display: block;
  width: 100%;
  height: auto;
}
.gm-nlpop__card {
  position: relative;
  width: 100%;
  background: var(--color-surface-warm);
  border-radius: 16px;
  /* top-padding 130 → 110: kleinerer Octopus (300px statt 380px) hat
   * proportional kürzere Tentakel-Reichweite in die Card hinein, also
   * darf der Eyebrow höher rücken ohne Kollision. */
  padding: 110px 40px 40px;
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.10);
  z-index: 1;
  text-align: center;
}
.gm-nlpop__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--color-ink);
  transition: background 220ms ease, transform 220ms var(--ease-out);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.gm-nlpop__close:hover {
  background: var(--color-ink);
  color: var(--color-primary-ink);
  transform: rotate(90deg);
}
.gm-nlpop__close svg {
  width: 18px;
  height: 18px;
}
.gm-nlpop__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--sp-3);
}
.gm-nlpop__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.gm-nlpop__title em {
  font-style: italic;
  color: var(--color-ink);
  font-weight: 500;
}
.gm-nlpop__lede {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.gm-nlpop__form {
  display: flex;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto var(--sp-4);
}
.gm-nlpop__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 18px;
  border: 1px solid var(--color-line);
  background: #fff;
  outline: none;
  border-radius: 4px;
  transition: border-color 200ms ease;
}
.gm-nlpop__input:focus {
  border-color: var(--color-ink);
}
.gm-nlpop__submit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: 0;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  transition: background 200ms ease;
}
.gm-nlpop__submit:hover {
  background: #9d1d25;
}
.gm-nlpop__privacy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gm-nlpop__success {
  display: none;
  margin: var(--sp-4) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-ink);
}
.gm-nlpop.is-sent .gm-nlpop__form,
.gm-nlpop.is-sent .gm-nlpop__privacy {
  display: none;
}
.gm-nlpop.is-sent .gm-nlpop__success {
  display: block;
}

@media (max-width: 600px) {
  .gm-nlpop__octopus { max-width: 220px; margin-bottom: -95px; }
  .gm-nlpop__card { padding: 120px 24px 28px; }
  .gm-nlpop__title { font-size: 30px; }
  .gm-nlpop__form { flex-direction: column; }
  .gm-nlpop__submit { padding: 14px 22px; }
  .gm-nlpop__close { top: -12px; right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-nlpop,
  .gm-nlpop__modal,
  .gm-nlpop__close { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v6 2026-05-15 — 4th pass overhaul. Hero multi-slide + Anzeigen-Banner
   + teaserLatch Masthead + Print-DNA Footer + Octopus-Fixes + Red-Hover.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero v6 · Multi-Purpose Sliding Stage ──────────────────────────
 * Replaces the static cover-in-scene. Full viewport, per-slide
 * foreground rendered by hero.js. Magazine-hotspot has a VISIBLE
 * "Lesen ↗" plate at the bottom (replaces invisible white block).
 * Counter "01 / 03" bottom-right pill. */
.hero-cinema--multi {
  min-height: 100vh;
  background: #0a0a0a;
  /* No native cursor — cursor-nav.js provides the hover cursor */
  cursor: none;
}
.hero-cinema--multi .hero-cinema__vignette {
  z-index: 1;
}
.hero-cinema__foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-cinema__slide-fg {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms var(--ease-out);
}
.hero-cinema__slide-fg.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-cinema__slide-fg .hero-cinema__copy {
  /* Reset the absolute-positioned copy block per slide. */
  position: absolute;
  bottom: 96px;
  left: 64px;
  right: auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
}
/* Round-10 2026-05-16 · Hero-Eyebrow präsenter per User-Brief:
 * "macht diese Aussage deutlich größer, muss präsenter sein."
 * 11px → 17px desktop (über 50% größer), Mark als roter Burgund-Strich
 * mit 48px breit + 2px hoch, font-weight 600 statt 500. */
.hero-cinema--multi .hero-cinema__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-cinema--multi .hero-cinema__eyebrow::before {
  content: '';
  width: 48px;
  height: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.hero-cinema--multi .hero-cinema__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* v9 2026-05-16: hero-headline restraint per spec — premium hero rhythm
   * is restrained, magazine = CTA. 56px max statt vorher 88px.
   * Apartamento + Stripe Press Pattern. */
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.hero-cinema--multi .hero-cinema__dek {
  margin: 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
/* Per-slide CTA pill (non-issue slides). Burgund-fill for event,
 * ghost-outline for feature. issue-slides skip this — the magazine
 * hotspot IS their CTA. */
.hero-cinema__cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.hero-cinema__cta--event {
  background: var(--color-primary);
  color: #fff;
}
.hero-cinema__cta--event:hover {
  background: #5e1820;
  transform: translateY(-1px);
}
.hero-cinema__cta--feature {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.hero-cinema__cta--feature:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}
.hero-cinema__cta-arrow {
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}
.hero-cinema__cta:hover .hero-cinema__cta-arrow {
  transform: translateX(3px);
}

/* Magazine hotspot · v6 ── visible CTA plate at the bottom of the
 * magazine cover. Replaces the "huge ugly white block" the user
 * complained about. Cream pill with Burgund text, sits inset 16px
 * from the bottom of the hotspot, breathing-animation on the
 * top-right arrow-badge stays for visual continuity. */
.hero-cinema__magazine-cta {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-surface-warm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55);
  opacity: 0.94;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out), background 320ms var(--ease-out);
  pointer-events: none; /* hotspot link captures the click */
  white-space: nowrap;
  max-width: 90%;
}
.hero-cinema__magazine-cta-arrow {
  font-size: 13px;
  line-height: 1;
}
.hero-cinema__magazine:hover .hero-cinema__magazine-cta,
.hero-cinema__magazine:focus-visible .hero-cinema__magazine-cta {
  opacity: 1;
  background: var(--color-primary);
  color: #fff;
  transform: translateX(-50%) translateY(-2px);
}

/* Counter pill — "01 / 03" bottom-right. */
.hero-cinema__counter {
  position: absolute;
  bottom: 36px;
  right: 36px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-cinema__counter-active { font-weight: 600; }
.hero-cinema__counter-sep    { opacity: 0.55; }
.hero-cinema__counter-total  { opacity: 0.75; }

@media (max-width: 900px) {
  .hero-cinema--multi { min-height: 88vh; }
  .hero-cinema__slide-fg .hero-cinema__copy {
    left: 20px; right: 20px; bottom: 90px; max-width: none;
  }
  .hero-cinema__counter { bottom: 18px; right: 18px; padding: 7px 12px; }
  .hero-cinema__magazine-cta { font-size: 10px; padding: 8px 12px; letter-spacing: 0.18em; }
  .hero-cinema__cta { padding: 11px 16px; font-size: 11px; }
}

/* ── gm-anzeigen · Co-Host / Anzeigen Banner ─────────────────────────
 * Burgund full-width section between gm-program and gm-masthead.
 * Adapts ramp.space's imageBanner pattern. Rhythm break between two
 * sticky-aside-style sections, gives advertisers a real brand stage. */
.gm-anzeigen {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  padding: 96px 0;
  overflow: hidden;
}
.gm-anzeigen__inner {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.gm-anzeigen__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 540px;
}
.gm-anzeigen__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
}
.gm-anzeigen__kicker-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.gm-anzeigen__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* v9 2026-05-16: secondary slide context, smaller than primary hero title */
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: #fff;
}
.gm-anzeigen__lede {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.gm-anzeigen__lede em {
  font-style: italic;
}
.gm-anzeigen__cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--color-surface-warm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.gm-anzeigen__cta:hover {
  background: #fff;
  transform: translateY(-1px);
}
.gm-anzeigen__figure {
  margin: 0;
  position: relative;
  height: 360px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.gm-anzeigen__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

@media (max-width: 900px) {
  .gm-anzeigen { padding: 64px 0; }
  .gm-anzeigen__inner { grid-template-columns: 1fr; gap: 36px; }
  .gm-anzeigen__figure { height: 240px; order: -1; }
}

/* ── gm-masthead--latch · teaserLatch v4 ───────────────────────────
 * Mid-column scrolling teaser-list + sticky-RIGHT promo aside.
 * Mirrors ramp.space's teaserLatch--reverse pattern but with
 * Gour-Med tonality (portrait + quote cards, not article-thumb cards).
 * Sticky-RIGHT (--reverse) is intentional: gm-latest has sticky-LEFT
 * aside, so two adjacent sections show different rhythms. */
.gm-masthead--latch {
  background: var(--color-surface);
  padding: 120px 0 96px;
}
.gm-masthead--latch .gm-masthead__head {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto 56px;
  text-align: left;
  max-width: 720px;
}
.gm-masthead__latch {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}
/* mid-column · scrolling teaser-list */
.gm-latch__teasers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gm-latch__teaser {
  border-bottom: 1px solid var(--color-line);
  padding: 32px 0;
}
.gm-latch__teaser:first-child { padding-top: 0; }
.gm-latch__teaser-inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: transform 280ms var(--ease-out);
}
.gm-latch__teaser-inner:hover {
  transform: translateX(4px);
}
.gm-latch__teaser-portrait {
  position: relative;
  width: 140px;
  height: 140px;
  overflow: hidden;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line);
}
.gm-latch__teaser-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.18) contrast(1.04);
  transition: filter 320ms var(--ease-out), transform 600ms var(--ease-out);
}
.gm-latch__teaser-inner:hover .gm-latch__teaser-portrait img {
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.04);
}
.gm-latch__teaser-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.gm-latch__teaser-rubric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-latch__teaser-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-latch__teaser[data-rubric="medical"] .gm-latch__teaser-dot { background: var(--rub-medical); }
.gm-latch__teaser[data-rubric="travel"]  .gm-latch__teaser-dot { background: var(--rub-travel); }
.gm-latch__teaser[data-rubric="lifestyle"] .gm-latch__teaser-dot { background: var(--rub-lifestyle); }
.gm-latch__teaser[data-rubric="dine"]    .gm-latch__teaser-dot { background: var(--rub-dine); }
.gm-latch__teaser[data-rubric="magazine"] .gm-latch__teaser-dot { background: var(--rub-magazine); }
.gm-latch__teaser-name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  color: var(--color-ink);
  transition: color 220ms var(--ease-out);
}
.gm-latch__teaser-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}
.gm-latch__teaser-halo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink-soft);
  max-width: 480px;
}
.gm-latch__teaser-halo em { font-style: italic; }
.gm-latch__teaser-inner:hover .gm-latch__teaser-name {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* right latch · sticky promo */
.gm-latch__latch {
  position: relative;
}
.gm-latch__latch-sticky {
  position: sticky;
  top: 100px;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gm-latch__latch-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.gm-latch__latch-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #ddd;
}
.gm-latch__latch-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.04);
}
.gm-latch__latch-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gm-latch__latch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-latch__latch-rule {
  width: 22px; height: 1px;
  background: var(--color-primary);
}
.gm-latch__latch-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.06;
  color: var(--color-ink);
}
.gm-latch__latch-h em { font-style: italic; }
.gm-latch__latch-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.gm-latch__latch-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.gm-latch__latch-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms var(--ease-out);
}
.gm-latch__latch-primary:hover { background: var(--color-primary); }
.gm-latch__latch-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.gm-latch__latch-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-ink);
}
.gm-latch__latch-arrow { transition: transform 240ms var(--ease-out); }
.gm-latch__latch-primary:hover .gm-latch__latch-arrow { transform: translateX(3px); }

@media (max-width: 1000px) {
  .gm-masthead--latch { padding: 80px 0 64px; }
  .gm-masthead__latch { grid-template-columns: 1fr; gap: 48px; }
  .gm-latch__latch-sticky { position: relative; top: 0; }
  .gm-latch__teaser-inner { grid-template-columns: 110px 1fr; gap: 20px; }
  .gm-latch__teaser-portrait { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
  .gm-latch__teaser-inner { grid-template-columns: 88px 1fr; gap: 16px; }
  .gm-latch__teaser-portrait { width: 88px; height: 88px; }
  .gm-latch__teaser-quote { font-size: 18px; }
}

/* ── Footer · Print-DNA Colophon v6 ──────────────────────────────────
 * Cream-surface pivot. Replaces the dark 4-column ramp-clone with a
 * magazine-colophon layout: Heft-Stempel + Redaktion-Roster +
 * Postsachen + Brief-Form. Ink-on-cream, Burgund hairline on top,
 * handwritten "die Redaktion" signature. */
.gm-footer--colophon {
  background: var(--color-surface-warm);
  color: var(--color-ink);
  margin-top: 0;
  border-top: none;
}
.gm-footer--colophon .gm-footer__rule {
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-primary) 0%,
    var(--color-primary) 22%,
    transparent 22%,
    transparent 24%,
    var(--color-primary) 24%,
    var(--color-primary) 100%);
  opacity: 0.92;
}
.gm-footer--colophon .gm-footer__inner {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: 88px 0 64px;
  display: grid;
  /* Round-11.5 2026-05-16 · Heft-Stempel + Redaktion-Roster entfernt
     (Papa-vorlage-4). Grid jetzt 3-col: Logo · Postsachen · Brief-Form. */
  grid-template-columns: 1.1fr 0.9fr 1.3fr;
  gap: 56px;
  align-items: start;
}
/* Heft-Stempel · visual anchor */
.gm-footer__stamp {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gm-footer__stamp-frame {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 22px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-ink);
  align-self: flex-start;
  position: relative;
}
.gm-footer__stamp-frame::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-primary);
  opacity: 0.35;
  pointer-events: none;
}
.gm-footer__stamp-issue {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--color-ink);
}
.gm-footer__stamp-issue sup { font-size: 0.65em; vertical-align: 0.55em; margin-left: 1px; }
.gm-footer__stamp-theme {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--color-ink);
}
.gm-footer__stamp-meta {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 4px;
}
.gm-footer__stamp-claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 280px;
}
.gm-footer__stamp-claim em { font-style: italic; color: var(--color-ink); }

.gm-footer--colophon .gm-footer__h {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
}

/* Redaktion-Roster */
.gm-footer__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-footer__roster li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-body);
  font-size: 13.5px;
}
.gm-footer__roster strong {
  font-weight: 500;
  color: var(--color-ink);
}
.gm-footer__roster span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--color-ink-soft);
}

/* Postsachen-Links */
.gm-footer__post {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.gm-footer__post a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.gm-footer__post a::before {
  content: '·';
  color: var(--color-primary);
  font-weight: 700;
}
.gm-footer__post a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Brief (Newsletter) */
.gm-footer__brief {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gm-footer__brief-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.gm-footer__brief-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.gm-footer__brief-form input {
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 0;
  outline: none;
  transition: border-color 200ms var(--ease-out);
}
.gm-footer__brief-form input:focus {
  border-color: var(--color-primary);
}
.gm-footer__brief-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--ease-out);
}
.gm-footer__brief-form button:hover {
  background: #5e1820;
}
.gm-footer__brief-sig {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--color-ink-soft);
  align-self: flex-end;
}

.gm-footer--colophon .gm-footer__bottom {
  /* Round-11.5 · Papa "Fusszeile in rot?" — Burgund-Hairline statt
     graue Line, spiegelt die Top-Hairline (gm-footer__rule 3px). */
  border-top: 1px solid var(--color-primary);
  background: transparent;
  position: relative;
}
.gm-footer--colophon .gm-footer__bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.55;
}
.gm-footer--colophon .gm-footer__bottom-inner {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink-soft);
}
.gm-footer__bottom-claim em { font-style: italic; color: var(--color-ink); }
.gm-footer__bottom-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gm-footer__bottom-nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.gm-footer__bottom-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; }
.gm-footer__bottom-nav span { opacity: 0.45; }

@media (max-width: 1000px) {
  .gm-footer--colophon .gm-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 72px 0 56px;
  }
}
@media (max-width: 600px) {
  .gm-footer--colophon .gm-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .gm-footer--colophon .gm-footer__bottom-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ── Octopus Signature · v6 fixes ─────────────────────────────────
 * User-Report 2026-05-15 4th pass: Octopus zu klein, Fragmente
 * überlappen mit nachfolgender Section. Fix: art-Höhe rauf (von 78vh
 * auf 92vh max), fragments min-height + padding-top up, gm-signature
 * bekommt eine zusätzliche Bottom-Buffer-Zone damit das letzte
 * Fragment NICHT in die nächste Section reinläuft. */
.gm-signature__art {
  /* Übersteuert die früheren Höhen-Caps: war 78vh max, jetzt 92vh damit
   * der Octopus wieder die Visual-Anker-Rolle einnimmt wie vor dem
   * Phase-J-Shrink. */
  height: 92vh !important;
  max-width: 70vw !important;
  max-height: none !important;
}
@media (min-width: 1280px) {
  .gm-signature__art {
    height: 92vh !important;
    max-width: 720px !important;
  }
}
@media (max-width: 900px) {
  .gm-signature__art {
    height: 66vh !important;
    max-width: 86vw !important;
  }
}
/* Fragments brauchen mehr Vertikalraum damit der Heft-Anker, die
 * Pairings und die TOC nicht visuell ineinander rutschen. Auch
 * der erste Fragment-Block bekommt zusätzliches Padding-Top, sodass
 * der "Heft Nº 84"-Titel nicht direkt unter den Header-Rand klebt. */
.gm-signature__fragment {
  min-height: 92vh;
  padding-top: 18vh;
  padding-bottom: 14vh;
}
.gm-signature__fragment--heft {
  padding-top: 22vh;
}
.gm-signature__fragment--toc {
  padding-bottom: 20vh;
}
/* Bottom-buffer · prevents the last fragment's content from overlapping
 * with the next section (gm-masthead--latch). */
.gm-signature::after {
  content: '';
  display: block;
  height: 14vh;
}

/* ── Hover-Underline-Pattern · v9 2026-05-16 ───────────────────────────
 * Cartier-Verschärfung: Auch HOVER darf keine Text-Farbe in Bordeaux
 * erzeugen. Stattdessen: burgund Underline als brand-echo, text-color
 * bleibt ink. (Vorgänger-Block "Red-on-hover global accent pass" hat
 * Memory feedback-red-only-as-accent-not-text falsch interpretiert.) */
.gm-latest__feed a.gm-latest__row:hover h3,
.gm-latest__feed a.gm-latest__row:hover .gm-latest__feed-title,
.gm-latest__feed .gm-feed__row-link:hover .gm-feed__title,
.gm-latest__more:hover,
.gm-program__more:hover,
.gm-masthead__more:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-feed__row-link:hover .gm-feed__rubric-dot { background: var(--color-primary); }
/* Round-10 2026-05-16 · Double-Underline-Bug-Fix.
 * Vorher: :hover hatte BOTH text-decoration:underline UND ::after
 * scaleX(1) = zwei rote Linien beim Hover. Nur die ::after-Animation
 * behalten — sauberer Slide-in von links, einheitlich mit base-rules. */
.gm-nav a {
  position: relative;
  transition: color 200ms var(--ease-out);
}
.gm-nav a:hover {
  color: var(--color-ink);
}
.gm-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
.gm-nav a:hover::after { transform: scaleX(1); }

/* Visible focus ring with red accent for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.hero-cinema__magazine:focus-visible {
  outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   v7 2026-05-16 — Magazine-as-link (no button), Prev/Next pills,
   Octopus hotspot + feet-first reveal, teaserLatch rows, footer refine.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero v7 · cursor-nav-frei, Magazin als Link ohne Button ───── */
.hero-cinema--multi {
  cursor: default; /* override the v6 `cursor: none` (cursor-nav-zone removed) */
}
/* Magazine: lift on hover (Pinterest-Pattern) + soft shadow. No box-shadow
 * ring, no CTA-pill button — the magazine itself is the affordance. */
.hero-cinema--multi .hero-cinema__magazine {
  cursor: pointer;
  transition: transform 380ms var(--ease-out), filter 380ms var(--ease-out);
}
.hero-cinema--multi .hero-cinema__magazine:hover,
.hero-cinema--multi .hero-cinema__magazine:focus-visible {
  transform: translateY(-6px);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.45));
  box-shadow: none;
}
/* Hide the v6 CTA pill (replaced by hover-hint label below the magazine) */
.hero-cinema__magazine-cta { display: none !important; }

/* Magazine-hint: small caption that appears BELOW the magazine on hover.
 * Editorial-style, not a button — confirms clickability without screaming. */
.hero-cinema__magazine-hint {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  pointer-events: none;
}
.hero-cinema__magazine:hover .hero-cinema__magazine-hint,
.hero-cinema__magazine:focus-visible .hero-cinema__magazine-hint {
  opacity: 0.95;
  transform: translateX(-50%) translateY(0);
}
/* Corner badge tints to burgund on hover for stronger feedback */
.hero-cinema__magazine:hover .hero-cinema__magazine-badge {
  background: var(--color-primary);
  color: #fff;
}

/* v9 2026-05-16 — Prev/Next-Pills entfernt (User Round-9: "Das will
 * ich nicht. Das soll automatisch durchgehen"). Hero auto-rotated only.
 * Counter zeigt nur Position, ohne Nav-Buttons. */
.hero-cinema__counter {
  gap: 8px;
  padding: 6px 12px;
}
/* Force-hide any leftover nav buttons */
.hero-cinema__nav { display: none !important; }

/* ── Hero progress bar · NYT/Apple-Pattern · v9 2026-05-16 ──
 * Thin 2px hairline at the bottom of the hero, weinrot, fills over
 * ROT_MS, resets at slide-change. Communicates rotation cadence
 * without competing with the magazine click target. */
.hero-cinema__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 5;
  pointer-events: none;
}
.hero-cinema__progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
  animation: gm-hero-progress 8s linear infinite;
}
@keyframes gm-hero-progress {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Octopus · Magazin-Hotspot ──────────── */
/* v9 2026-05-16: KEINE position-overrides hier mehr! Die canonical
 * sticky-Definition lebt oben in der gm-signature__sticky-Block (top:38vh,
 * height:62vh). Hier nur die hotspot-Positioning. */
.gm-signature__heft-hotspot {
  position: absolute;
  /* Magazine in v4 octopus keyframe sits around x:32%-72%, y:50%-95%
   * of the video frame. The video element fills the sticky container
   * at right-aligned, max-width 70vw / height 92vh. */
  right: 6%;
  bottom: 0;
  width: 28%;
  height: 42%;
  z-index: 4;
  cursor: pointer;
  display: block;
  transition: transform 380ms var(--ease-out);
}
.gm-signature__heft-hotspot:hover {
  transform: translateY(-4px);
}
.gm-signature__heft-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-warm);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 280ms var(--ease-out), background 280ms var(--ease-out), color 280ms var(--ease-out);
}
.gm-signature__heft-badge svg { width: 14px; height: 14px; }
.gm-signature__heft-hotspot:hover .gm-signature__heft-badge {
  opacity: 0.96;
  background: var(--color-primary);
  color: #fff;
}
.gm-signature__heft-hint {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.gm-signature__heft-hotspot:hover .gm-signature__heft-hint {
  opacity: 0.92;
}

/* v9 2026-05-16 — Reveal-by-cover-uncover (User Round-9 Direktive).
 * Clip-path-Reveal komplett entfernt. Statt dessen: gm-mantra (burgund,
 * opak, z-index:5) liegt VOR der gm-signature in DOM und überdeckt den
 * Octopus visuell beim Scroll. Octopus ist die ganze Zeit komplett
 * gerendert — als wäre er schon immer da gewesen. Wenn die rote Section
 * nach oben scrolled, wird der Octopus "freigegeben". CSS-only, kein
 * JS, kein clip-path. Quelle: css-tricks.com/creating-sliding-effects-
 * using-sticky-positioning + Stripe Press curtain-pattern. */
.gm-signature__heft-hotspot {
  /* Magazin-Hotspot ist IMMER sichtbar + klickbar. pointer-events:auto
   * überschreibt parent's pointer-events:none. */
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .gm-signature__heft-hotspot { right: 4%; width: 36%; height: 36%; }
  .gm-signature__heft-badge { width: 28px; height: 28px; }
}

/* ── gm-latest as teaserLatch (ramp.space alternating rows) ──── */
.gm-latest--latch {
  padding: 96px 0 64px;
  background: var(--color-surface);
}
.gm-latest--latch .gm-latest__head {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.gm-latest--latch .gm-latest__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.gm-latest--latch .gm-latest__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}
.gm-latest--latch .gm-latest__title {
  /* v8 2026-05-16: Papa-Direktive "die Riesen Buchstaben sind omnipräsent".
   * Shrunk from 42-76px to 28-44px (Vogue.de section-H2-Skala). Marke
   * lebt von der oberen Brand-Strip + Logo + Kicker — die Section-Headline
   * muss nur einordnen, nicht erschlagen. */
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  color: var(--color-ink);
}

.gm-teaser-latch {
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto 96px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
.gm-teaser-latch--reverse {
  grid-template-columns: 380px 1fr;
}
.gm-teaser-latch__teasers {
  /* Round-7 (2026-05-16): 2 cards per row (was 3). Combined with the
   * outer 1fr|380px grid this gives the ramp.space 2-card-stack +
   * colored-latch rhythm Papa asked for. Cards become larger and
   * breathe — closer to the reference. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 36px;
}
.gm-teaser-latch--reverse .gm-teaser-latch__teasers {
  order: 2;
}
.gm-teaser-latch--reverse .gm-teaser-latch__latch {
  order: 1;
}
.gm-teaser-card { margin: 0; }
.gm-teaser-card__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.gm-teaser-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface-warm);
}
.gm-teaser-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out), filter 320ms var(--ease-out);
  filter: saturate(0.92) contrast(1.04);
}
.gm-teaser-card__inner:hover .gm-teaser-card__media img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.08);
}
.gm-teaser-card__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  color: var(--color-ink);
  text-wrap: balance;
  transition: color 240ms var(--ease-out);
}
.gm-teaser-card__inner:hover .gm-teaser-card__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-teaser-card__intro {
  margin: 0;
  font-family: var(--font-body);
  /* v9 2026-05-16: article-card intro body-text min 17 */
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-teaser-card__category {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-teaser-card__category::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: var(--color-primary);
  vertical-align: 1px;
  border-radius: 50%;
}

/* Latch aside · book-promo style. Sticky inside its column so it stays
 * in-view while the teaser grid scrolls past. */
.gm-teaser-latch__latch { position: relative; }
.gm-teaser-latch__latch-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 26px 28px;
  text-decoration: none;
  text-align: left;
  border: 0;
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: transform 320ms var(--ease-out);
}
.gm-teaser-latch__latch-inner:hover {
  transform: translateY(-4px);
}
.gm-teaser-latch__latch--burgund .gm-teaser-latch__latch-inner {
  background: var(--color-primary);
  color: #fff;
}
.gm-teaser-latch__latch--cream .gm-teaser-latch__latch-inner {
  background: var(--color-surface-warm);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.gm-teaser-latch__latch-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-primary-ink);
}
.gm-teaser-latch__latch-button--invert {
  background: var(--color-ink);
  color: #fff;
}
.gm-teaser-latch__latch-figure {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.gm-teaser-latch__latch-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gm-teaser-latch__latch-inner:hover .gm-teaser-latch__latch-figure img {
  transform: scale(1.03);
}
.gm-teaser-latch__latch-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
.gm-teaser-latch__latch--burgund .gm-teaser-latch__latch-title { color: #fff; }
.gm-teaser-latch__latch-title sup { font-size: 0.65em; vertical-align: 0.55em; }
.gm-teaser-latch__latch-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
}
.gm-teaser-latch__latch--burgund .gm-teaser-latch__latch-intro { color: rgba(255, 255, 255, 0.88); }
.gm-teaser-latch__latch--cream .gm-teaser-latch__latch-intro { color: var(--color-ink-soft); }

.gm-latest--latch .gm-latest__foot {
  width: min(1380px, calc(100% - 64px));
  margin: 24px auto 0;
  text-align: center;
}
.gm-latest--latch .gm-latest__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.gm-latest--latch .gm-latest__more:hover {
  border-color: var(--color-primary);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}

@media (max-width: 1100px) {
  .gm-teaser-latch,
  .gm-teaser-latch--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .gm-teaser-latch__teasers {
    grid-template-columns: repeat(2, 1fr);
  }
  .gm-teaser-latch--reverse .gm-teaser-latch__teasers { order: 1; }
  .gm-teaser-latch--reverse .gm-teaser-latch__latch { order: 2; }
  .gm-teaser-latch__latch-inner { position: relative; top: 0; }
}
@media (max-width: 600px) {
  .gm-teaser-latch__teasers { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Stylebreak credo strip · gm-latest stylebreak (v8 2026-05-16) ──
 * Single oversized italic credo between the two latch-rows. Full-bleed
 * cream surface with thin top/bottom hairlines so it reads as its own
 * chapter break. Rhythm-reset between two latch-rows that otherwise
 * mirror each other. Aesop product-page tradition: a single quote on
 * generous whitespace becomes its own architectural beat. */
.gm-latest__stylebreak {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(72px, 11vw, 140px) 4vw;
  margin-bottom: 96px;
}
.gm-latest__stylebreak-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.gm-latest__stylebreak-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--color-primary);
}
.gm-latest__stylebreak-quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.18;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-latest__stylebreak-quote em {
  font-style: italic;
  color: var(--color-ink);
  /* Cartier: em wird durch italic differenziert, nicht durch Bordeaux-Text */
}
.gm-latest__stylebreak-by {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ── Mantra-Stage · gm-mantra (v8 2026-05-16 octopus reveal anchor) ──
 * Sticky-pinned burgund stage. As the user scrolls past this section
 * the bottom rises toward viewport-top, and hero.js maps that into
 * --octopus-progress on .gm-signature. "Red leaves the bottom → octopus
 * reveals" — Papa Round-7. Acts as a deliberate slowdown before the
 * editorial signature, and as the COLORED anchor that prevents
 * white-on-white octopus reveal. */
.gm-mantra {
  /* v9 2026-05-16: solid burgund opaque curtain.
   * z-index: 5 sits ABOVE the gm-signature (z-index: 1) so when
   * scroll-overlapping, the red completely covers the octopus that
   * sits "already there" in the signature below. As user scrolls
   * past the mantra, it moves up out of viewport → octopus revealed.
   *
   * overflow: hidden DROPPED — was killing position:sticky on any
   * descendant. Per reveal-research agent ("No overflow:hidden on
   * ANY ancestor of sticky"). */
  position: relative;
  z-index: 5;
  background: var(--color-primary);
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 12vh, 140px) 6vw;
}
.gm-mantra::before {
  /* subtle inner-vignette so the burgund reads as deliberate, not flat */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.06), transparent 65%);
  pointer-events: none;
}
.gm-mantra__inner {
  position: relative;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  text-align: left;
}
.gm-mantra__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.gm-mantra__kicker {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.gm-mantra__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(54px, 8.4vw, 132px);
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
.gm-mantra__title em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
}
.gm-mantra__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  max-width: 580px;
}
@media (max-width: 700px) {
  .gm-mantra__inner { text-align: center; align-items: center; }
  .gm-mantra__title { text-align: center; }
}

/* ── gm-latest · Vogue/ramp.space 3×2 + sticky right anchor (v8 2026-05-16) ──
 * Papa-Direktive (Round-8): "3x2 Grid und während dieses Grid von oben
 * nach unten durchläuft, ist rechts ein Artikel ganz rechts am Rand sticky."
 * - Outer layout: 1fr (article grid) | 300px (sticky anchor) + 56px gap
 * - Inner grid: repeat(3, 1fr) × 2 rows = 6 article cards
 * - Anchor: position: sticky, top: 100px — folgt dem scroll wie ein Inserat. */
.gm-latest--vogue {
  /* Container-Padding sehr großzügig — Vogue.de hat ~120px margin between
   * section header and first card row. Generous whitespace = premium. */
  padding: var(--sp-9) 0 var(--sp-8);
  background: var(--color-bg);
}
.gm-latest--vogue .gm-latest__head {
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.gm-latest--vogue .gm-latest__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-latest--vogue .gm-latest__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}

.gm-vogue {
  /* ramp.space teaserLatch v9 — flex layout, exact tokens per research */
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}
.gm-vogue__grid {
  /* User Round-9: "2 auf der X-Achse, 3 auf der Y-Achse" — 2 cols × 3 rows */
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 1 820px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 36px;
}
.gm-aufmacher-card { margin: 0; }
.gm-aufmacher-card__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.gm-aufmacher-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 352 / 316; /* ramp.space exact */
  overflow: hidden;
  background: var(--color-surface-warm);
  margin-bottom: 4px;
}
.gm-aufmacher-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 280ms var(--ease-out);
}
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.08);
}
.gm-aufmacher-card__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.gm-aufmacher-card__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 6px;
}
.gm-aufmacher-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.22;
  color: var(--color-ink);
  text-wrap: balance;
  transition: color 220ms var(--ease-out);
}
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__title { color: #5d5d5d; }
.gm-aufmacher-card__intro {
  margin: 0;
  font-family: var(--font-body);
  /* v9 2026-05-16: article-card intro body-text min 17 */
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-aufmacher-card__tags {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.gm-aufmacher-card__tags li {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  /* Round-11.5 2026-05-16 · Klick-Affordance-Pass.
     Hairline-pill bekommt cream-fill als ruhender State, primary-getintetes
     Background + ink-dark Text + slight lift bei Card-Hover. */
  background: var(--color-surface-warm, #faf6ef);
  padding: 4px 11px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__tags li {
  background: rgba(127, 22, 22, 0.06);
  border-color: var(--color-primary);
  color: var(--color-ink);
}
.gm-aufmacher-card__tags li:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* Right sticky anchor — ramp.space exact (flex 0 1 360px, sticky top 100px) */
.gm-vogue__anchor {
  flex: 0 1 360px;
  position: relative;
}
.gm-vogue__anchor-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 26px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  transition: transform 320ms var(--ease-out);
}
.gm-vogue__anchor-inner:hover {
  transform: translateY(-3px);
}
.gm-vogue__anchor-figure {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.gm-vogue__anchor-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gm-vogue__anchor-inner:hover .gm-vogue__anchor-figure img {
  transform: scale(1.04);
}
.gm-vogue__anchor-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
}
.gm-vogue__anchor-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  color: #fff;
}
.gm-vogue__anchor-title sup { font-size: 0.65em; vertical-align: 0.55em; }
.gm-vogue__anchor-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.gm-vogue__anchor-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 14px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .gm-vogue {
    flex-direction: column;
    gap: 48px;
  }
  .gm-vogue__grid { flex: 1; }
  .gm-vogue__anchor { flex: 1; }
  .gm-vogue__anchor-inner { position: relative; top: 0; }
}
@media (max-width: 600px) {
  .gm-vogue__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Clickable Heft surfaces (v8 2026-05-16) ──
 * Papa: "überall wo das Magazin sichtbar ist, muss man draufklicken können".
 * - gm-signature__fragment--heft: fragment as <a> (was <div>)
 * - gm-footer__stamp-link: footer Heft stamp wrapped in <a>
 * Beide bekommen subtilen hover-lift + burgund accent. */
.gm-signature__fragment--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 240ms var(--ease-out), color 220ms var(--ease-out);
}
.gm-signature__fragment--link:hover {
  transform: translateY(-2px);
}
.gm-signature__fragment--link:hover .gm-signature__fragment-title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-signature__fragment-arrow {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  color: var(--color-ink);
  transition: transform 280ms var(--ease-out);
}
.gm-signature__fragment--link:hover .gm-signature__fragment-arrow {
  transform: translate(3px, -3px);
}
.gm-footer__stamp-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.gm-footer__stamp-link:hover {
  border-color: var(--color-line);
  transform: translateY(-2px);
}
.gm-footer__stamp-link:hover .gm-footer__stamp-issue {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* ── Masthead simplified · alphabetical portrait grid (v8 2026-05-16) ──
 * Papa-Direktive Round-8: photo TOP, name + role + name-drop bio. NO halo
 * flip, NO active-card sticky, NO numbering, NO Gewichtung. Alphabetical
 * by Nachname. Apartamento/Drift masthead-tradition. */
.gm-masthead-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 36px;
}
.gm-masthead-card { margin: 0; }
.gm-masthead-card__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease-out);
}
.gm-masthead-card__inner:hover {
  transform: translateY(-3px);
}
.gm-masthead-card__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-warm);
}
.gm-masthead-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) saturate(0.95);
  transition: transform 700ms var(--ease-out), filter 320ms var(--ease-out);
}
.gm-masthead-card__inner:hover .gm-masthead-card__portrait img {
  transform: scale(1.04);
  filter: grayscale(0) saturate(1);
}
.gm-masthead-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-masthead-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.12;
  color: var(--color-ink);
  transition: color 220ms var(--ease-out);
}
.gm-masthead-card__inner:hover .gm-masthead-card__name {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-masthead-card__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-masthead-card__halo {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
@media (max-width: 1100px) {
  .gm-masthead-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .gm-masthead-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 460px) {
  .gm-masthead-grid { grid-template-columns: 1fr; }
}

/* v10/v11 .gm-theater rules removed 2026-05-16 — Phase 5 cleanup.
 * The new architecture (Phase 5 GSAP ScrollTrigger) lives at EOF.
 * The old `height: 340vh` constraint broke GSAP pin-spacing. */

/* ════════════════════════════════════════════════════════════════════
   v10 2026-05-16 — AKTUELLE AUSGABE Vogue-Aufmacher (per Papa-PDF v02).
   "Hier immer Beiträge aus dem aktuellen Magazin (Look wie www.vogue.de)"
   Layout: BIG-aufmacher LINKS (~33% width) + 2x3 grid RECHTS (~67%).
   Synthesizes Papa's screenshot + vogue.de research findings:
   - 1:1 aspect for grid tiles (vogue.de discipline)
   - Byline + Datum auf cards (vogue.de behält die)
   - Square big-aufmacher mit Cover-Inszenierung + 2 Buttons
   ════════════════════════════════════════════════════════════════════ */
.gm-aufmacher {
  padding: 96px 0 80px;
  background: var(--color-surface);
  /* Round-11.7 2026-05-16 · User: nutze den Raum besser (ramp.space).
     Container von 1480 auf 1760px erweitert. */
  width: min(1760px, calc(100% - 2 * var(--page-bleed)));
  margin: 0 auto;
}
.gm-aufmacher__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
  max-width: 720px;
}
.gm-aufmacher__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-aufmacher__eyebrow-mark {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-primary);
}
.gm-aufmacher__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
.gm-aufmacher__title em {
  font-style: italic;
  color: var(--color-ink);
}
.gm-aufmacher__title sup {
  font-size: 0.55em;
  vertical-align: 0.55em;
  margin-left: 1px;
}

/* Layout: flex row, sticky Promo-Container LEFT + 2×3 tile-grid RIGHT.
   Round-12.0 2026-05-16 · User-Direktive ramp.space-Layout:
   - Promo links als ad-fähige Container-Box (anthrazit, ramp-Stil)
   - Sticky muss die GANZE Zeit im Viewport bleiben während Tiles scrollen
   - Promo-Höhe < Viewport-Höhe → kein Inner-Clip, kein Sticky-Loss
   Mirror-Pendant ist AKTUELL (Promo RIGHT, Tiles LEFT). */
.gm-aufmacher__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(40px, 4vw, 64px);
}

/* ── PROMO Container (ramp.space-Adaption) ───────────────────────────
   Block-fill anthrazit (statt nacktes Cover), CTA-Pill oben, Cover
   gerahmt darunter, dann Issue-Meta + Title + Dek. Sticky-Verhalten
   bleibt auf top:96px (= header-clearance) bis Section endet. */
.gm-aufmacher__promo {
  flex: 0 0 clamp(280px, 28%, 380px);
  position: sticky;
  top: 96px;
  align-self: flex-start;
  /* Höhe < Viewport: damit Sticky 100% sichtbar bleibt auch auf 768h-
     Laptop-Viewports. Container-Innenhöhe ist kompakt
     (CTA 44 + cover ~360 + meta 14 + title ~72 + dek ~84 = ~574 + padding
     2×32 = 638px). max-height schützt vor Edge-Cases. */
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.gm-aufmacher__promo-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 32px;
  background: var(--color-ink);
  color: #F4EFE8;
  text-decoration: none;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out);
}
.gm-aufmacher__promo-link:hover {
  transform: translateY(-2px);
}
/* CTA-Pill am Container-Top (ramp-Pattern). Burgund-Akzent. */
.gm-aufmacher__promo-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 16px;
  margin-bottom: 6px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 200ms var(--ease-out);
}
.gm-aufmacher__promo-link:hover .gm-aufmacher__promo-cta {
  background: #9A2A33;
}
/* Cover-Bild als gerahmtes Element (nicht full-bleed) — wirkt wie
   ein Magazin-Foto im Schaufenster. aspect-ratio 3/4 statt 4/5,
   leicht schmaler und höher = magazin-typisch. */
.gm-aufmacher__promo-figure {
  margin: 4px 0 6px;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0F0F0F;
}
.gm-aufmacher__promo-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 280ms var(--ease-out);
}
.gm-aufmacher__promo-link:hover .gm-aufmacher__promo-figure img {
  transform: scale(1.02);
  filter: saturate(1) contrast(1.08);
}
.gm-aufmacher__promo-issue {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.6);
  margin-top: 4px;
}
.gm-aufmacher__promo-issue sup {
  font-size: 0.65em;
  vertical-align: 0.55em;
  margin-left: 1px;
}
.gm-aufmacher__promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.18;
  color: #FFFFFF;
  text-wrap: balance;
}
.gm-aufmacher__promo-link:hover .gm-aufmacher__promo-title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-aufmacher__promo-dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(244, 239, 232, 0.85);
  text-wrap: pretty;
}

/* ── AKTUELL Promo · Cream-Variante (Mirror-Pendant zu Aufmacher) ──
   Structure-Klone von gm-aufmacher__promo, nur Color-Tokens invertiert:
   cream Container, dark Text. Container ist 2. Werbe-Slot-Typ (z.B.
   Buchempfehlung, Newsletter, Partner-Promo). Inhalt aktuell:
   Brief-am-Donnerstag Newsletter. */
.gm-aktuell__promo-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 32px;
  background: var(--color-surface-warm);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out);
}
.gm-aktuell__promo-link:hover {
  transform: translateY(-2px);
}
.gm-aktuell__promo-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 16px;
  margin-bottom: 6px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 200ms var(--ease-out);
}
.gm-aktuell__promo-link:hover .gm-aktuell__promo-cta {
  background: #9A2A33;
}
.gm-aktuell__promo-figure {
  margin: 4px 0 6px;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ECE6DA;
}
.gm-aktuell__promo-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 280ms var(--ease-out);
}
.gm-aktuell__promo-link:hover .gm-aktuell__promo-figure img {
  transform: scale(1.02);
  filter: saturate(1) contrast(1.08);
}
.gm-aktuell__promo-issue {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 4px;
}
.gm-aktuell__promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.18;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-aktuell__promo-link:hover .gm-aktuell__promo-title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-aktuell__promo-dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* RIGHT · 2x3 grid of small tiles · vogue.de-style 1:1 cards */
.gm-aufmacher__grid {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
}
.gm-aufmacher-card { margin: 0; }
.gm-aufmacher-card__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.gm-aufmacher-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* vogue.de-discipline: 1:1 für grid */
  overflow: hidden;
  background: var(--color-surface-warm);
  margin-bottom: 4px;
}
.gm-aufmacher-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 280ms var(--ease-out);
}
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.08);
}
.gm-aufmacher-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.gm-aufmacher-card__kicker::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  flex: 0 0 6px;
}
.gm-aufmacher-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.22;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-aufmacher-card__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablet: stack promo above grid (sticky disengages) */
@media (max-width: 1100px) {
  .gm-aufmacher__layout {
    flex-direction: column;
    gap: 56px;
  }
  .gm-aufmacher__promo {
    flex: 1 1 auto;
    position: static;
    max-height: none;
    max-width: 540px;
    width: 100%;
  }
  .gm-aufmacher__grid {
    width: 100%;
  }
}
/* Mobile: 1-col grid, promo full-width */
@media (max-width: 600px) {
  .gm-aufmacher { padding: 64px 0 56px; }
  .gm-aufmacher__head { margin-bottom: 40px; }
  .gm-aufmacher__layout { gap: 40px; }
  .gm-aufmacher__promo { max-width: 100%; }
  .gm-aufmacher__promo-link { padding: 24px 22px 28px; }
  .gm-aufmacher__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
   v13 2026-05-16 Phase 4-redo2 — gm-program Event-Cards (Image-60-Pattern).
   User-Direktive: Map komplett raus ("extrem viel Noise").
   Pattern: GIANT light-grey date display + venue name (bold caps) + city/
   time + 1:1 hero image + Times-italic title + dek + small Sign-up link.
   3-col horizontal grid.
   ════════════════════════════════════════════════════════════════════ */
.gm-program__cards {
  list-style: none;
  /* v14 2026-05-16 fix: container max-width sodass nicht weiter als
   * gm-program__partner (die ebenfalls container-wide ist). Bisher hatte
   * Cards keine max-width → bei <1760px Screens optisch breiter als Partner.
   * User-Kritik: "die hat wirklich die volle Breite". */
  max-width: var(--container-wide);
  margin: 56px auto 0;
  padding: 0 var(--page-bleed);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.gm-program-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* GIANT date display — light-grey, almost decorative, scan-anchor */
.gm-program-card__date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.gm-program-card__date-day,
.gm-program-card__date-month {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #E5E2DC;          /* light-grey · scan-decoration */
  user-select: none;
}
.gm-program-card__date-month {
  letter-spacing: -0.01em;
}
/* Venue · bold caps name + city/time meta */
.gm-program-card__venue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.gm-program-card__venue-name {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-program-card__venue-meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}
/* Hero image · 1:1 */
.gm-program-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-warm);
  margin-top: 4px;
}
.gm-program-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
  transition: transform 700ms var(--ease-out), filter 280ms var(--ease-out);
}
.gm-program-card:hover .gm-program-card__media img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.08);
}
.gm-program-card__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.18;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-program-card__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.gm-program-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-ink);
}
.gm-program-card__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-primary-ink);
  font-size: 13px;
  transition: transform 240ms var(--ease-out), background 200ms var(--ease-out);
}
.gm-program-card__cta:hover .gm-program-card__cta-arrow {
  transform: translateX(4px);
  background: var(--color-primary);
}

/* Responsive */
@media (max-width: 1100px) {
  .gm-program__cards {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@media (max-width: 700px) {
  .gm-program__cards {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v14 2026-05-16 Phase 6 — Newsletter-Popup Octopus-Bote Integration.
   User-Brief: "der gleiche Oktopus muss in/auf/mit der Newsletter-Card
   interagieren". Existing Asset octopus-newsletter-alpha.png zeigt
   Octopus mit Brief + Wachs-Siegel — replaces boring TOC-Liste.
   ════════════════════════════════════════════════════════════════════ */
.nl-popup__octopus {
  margin: 18px auto 8px;
  display: flex;
  justify-content: center;
  /* No background, no border — just the transparent character on the
     existing cream brief-column background. */
}
.nl-popup__octopus img {
  display: block;
  width: clamp(160px, 70%, 240px);
  height: auto;
  /* Light drop-shadow to lift the octopus subtly from the cream surface */
  filter: drop-shadow(0 6px 12px rgba(122, 31, 38, 0.18));
}
.nl-popup__brief-claim {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  text-align: center;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.nl-popup__masthead {
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   v16 2026-05-16 Phase 5 final — THEATER native CSS sticky-overlay
   Pattern:
     Layer 0 · .gm-theater__stage  (position:sticky, top:0, z:0)
                — octopus video, always pinned during theater
     Layer 1 · .gm-theater__overlay (margin-top:-100vh, z:1)
                — opaque curtain panels + transparent fragments
                  scroll OVER the pinned stage.
   No GSAP, no JS-pin. Works in all browsers including Edge.
   ════════════════════════════════════════════════════════════════════ */
.gm-theater {
  position: relative;
  background: var(--color-bg);
  /* No explicit height — overlay (mantra 100vh + fragments 3×100vh + exit 100vh)
   * defines the scroll runway. Stage is sticky and tracks within. */
}

/* ── Layer 0 · Sticky stage ───────────────────────────────────── */
.gm-theater__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 4vw;
  background: var(--color-bg);
}
.gm-theater__octopus-wrap {
  position: relative;
  height: 84vh;
  display: flex;
  align-items: flex-end;
}
.gm-theater__octopus-video {
  display: block;
  height: 100%;
  width: auto;
  max-width: 46vw;
  filter: brightness(1.06) contrast(1.02);
}
.gm-theater__hotspot {
  position: absolute;
  /* Magazine bbox · video-relative percent (frame v4 720x900 via ffmpeg+Python) */
  left: 22%;
  top: 45%;
  width: 48%;
  height: 25%;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 12px 12px 0;
  transition: transform 380ms var(--ease-out);
}
.gm-theater__hotspot:hover { transform: translateY(-3px); }
.gm-theater__hotspot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 280ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.gm-theater__hotspot-badge svg { width: 13px; height: 13px; }
.gm-theater__hotspot:hover .gm-theater__hotspot-badge {
  opacity: 0.96;
  background: var(--color-primary);
  color: #fff;
}
.gm-theater__hotspot-hint {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.gm-theater__hotspot:hover .gm-theater__hotspot-hint { opacity: 0.92; }

/* ── Layer 1 · Overlay (scrolls over sticky stage) ─────────────── */
.gm-theater__overlay {
  position: relative;
  z-index: 1;
  margin-top: -100vh;       /* overlap the sticky stage from the start */
  pointer-events: none;
}
.gm-theater__overlay > * { pointer-events: auto; }

/* Panel shared base */
.gm-theater__panel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* PANEL A · Burgundy mantra — opaque (covers octopus initially) */
.gm-theater__panel--mantra {
  background: var(--color-primary);
  color: #fff;
}
.gm-theater__mantra-inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) clamp(32px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.gm-mantra__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.gm-mantra__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.gm-mantra__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: #fff;
}
.gm-mantra__title em {
  font-style: italic;
  color: #fff;
}
.gm-mantra__lead {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}

/* Scroller (transparent — octopus shows through) */
.gm-theater__scroller {
  position: relative;
}
.gm-theater__fragment {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12vh 11vw 12vh 8vw;
  padding-right: 50vw;       /* keep right side clear for octopus */
  background: transparent;
}
.gm-theater__fragment-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 240ms var(--ease-out);
}
.gm-theater__fragment-link:hover { transform: translateY(-2px); }
.gm-theater__fragment-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.gm-theater__fragment-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--color-primary);
}
.gm-theater__fragment-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-theater__fragment-title em { font-style: italic; }
.gm-theater__fragment-title sup { font-size: 0.55em; vertical-align: 0.55em; margin-left: 1px; }
.gm-theater__fragment-coda {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 480px;
}
.gm-theater__fragment-arrow {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  color: var(--color-ink);
  transition: transform 280ms var(--ease-out);
}
.gm-theater__fragment-link:hover .gm-theater__fragment-arrow {
  transform: translate(3px, -3px);
}
.gm-theater__pairings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 540px;
}
.gm-theater__pairings li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 20px;
  border-left: 2px solid var(--color-primary);
  background: rgba(252, 250, 246, 0.82);  /* subtle scrim so text reads over octopus */
  padding: 10px 14px 10px 20px;
}
.gm-toc {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  counter-reset: gm-toc;
  max-width: 580px;
  background: rgba(252, 250, 246, 0.92);  /* light-cream scrim for legibility over octopus */
  padding: 12px 20px;
}
.gm-toc li {
  counter-increment: gm-toc;
  padding: 18px 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.gm-toc li:last-child { border-bottom: 1px solid var(--color-line); }
.gm-toc li::before {
  content: counter(gm-toc, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-ink-soft);
  min-width: 32px;
}
.gm-toc li a {
  flex: 1;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
}
.gm-toc li a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-theater__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* PANEL C · Ivory exit — opaque (covers octopus on exit) */
.gm-theater__panel--exit {
  background: var(--color-surface-warm);
  color: var(--color-ink);
}
.gm-theater__exit-inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) clamp(32px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.gm-theater__exit-inner .gm-mantra__kicker {
  color: var(--color-ink-soft);
}
.gm-theater__exit-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.06;
  color: var(--color-ink);
}

/* Tablet */
@media (max-width: 1024px) {
  .gm-theater__fragment { padding-right: 42vw; padding-left: 8vw; }
  .gm-theater__octopus-wrap { height: 72vh; }
  .gm-theater__octopus-video { max-width: 50vw; }
}

/* Mobile — octopus centers, fragments full width, panels stack natural */
@media (max-width: 700px) {
  .gm-theater__stage {
    justify-content: center;
    padding-right: 0;
  }
  .gm-theater__octopus-wrap { height: 56vh; }
  .gm-theater__octopus-video { max-width: 90vw; }
  .gm-theater__fragment {
    padding: 8vh 6vw 8vh 6vw;
  }
}

/* Reduced motion / no JS — panels naturally stack */
@media (prefers-reduced-motion: reduce) {
  .gm-theater__overlay { margin-top: 0; }
  .gm-theater__stage { position: relative; }
}

/* ════════════════════════════════════════════════════════════════════
   v16 2026-05-16 Phase 7 · gm-wer · Brand-Explainer
   Pattern: centered single-column headline + dek + 3-col principles +
   2-CTA row. Editorial declaration, no image, lots of whitespace —
   pattern-break from the heavy-image sections around it.
   ════════════════════════════════════════════════════════════════════ */
.gm-wer {
  padding: clamp(96px, 14vh, 180px) clamp(32px, 6vw, 120px);
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.gm-wer__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gm-wer__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin-bottom: clamp(64px, 9vh, 112px);
}
.gm-wer__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-wer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  max-width: 1000px;
  text-wrap: balance;
}
.gm-wer__title em {
  font-style: italic;
  color: var(--color-ink);
}
.gm-wer__lede {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.gm-wer__principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 72px);
  border-top: 1px solid var(--color-line);
  padding-top: clamp(48px, 6vh, 80px);
}
.gm-wer__principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-wer__principle-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.gm-wer__principle-h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--color-ink);
}
.gm-wer__principle-p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.gm-wer__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
  margin-top: clamp(56px, 7vh, 96px);
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid var(--color-line);
}
.gm-wer__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms var(--ease-out);
}
.gm-wer__cta-primary:hover { background: var(--color-primary); }
.gm-wer__cta-ghost {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  transition: transform 240ms var(--ease-out);
}
.gm-wer__cta-ghost em {
  font-style: italic;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.gm-wer__cta-ghost-arrow {
  font-style: normal;
  color: var(--color-primary);
  transition: transform 240ms var(--ease-out);
}
.gm-wer__cta-ghost:hover .gm-wer__cta-ghost-arrow { transform: translate(3px, -3px); }

@media (max-width: 1024px) {
  .gm-wer__principles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .gm-wer { padding: clamp(72px, 10vh, 120px) 24px; }
  .gm-wer__principles { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .gm-wer__cta { flex-direction: column; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   v16 2026-05-16 Phase 3b · gm-archive · MAGAZINE Archive Strip
   Pattern: 4 covers horizontal with alternating tilt (-2deg/+2deg)
   for editorial spread feel. Each tile: cover + Nº-stamp + season +
   title. CTA: "Alle 176 Hefte". Pattern-break: no card-grid, no flat
   row — covers feel like a spread on a table.
   ════════════════════════════════════════════════════════════════════ */
.gm-archive {
  padding: clamp(96px, 12vh, 160px) clamp(32px, 5vw, 80px);
  background: var(--color-surface-warm);
}
.gm-archive__head {
  max-width: 880px;
  margin: 0 auto clamp(48px, 7vh, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gm-archive__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-archive__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-archive__title em { font-style: italic; }
.gm-archive__lede {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: 600px;
}

/* Strip: 4 covers horizontal */
.gm-archive__strip {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.gm-archive__item {
  transition: transform 380ms var(--ease-out);
}
.gm-archive__item--tilt-l { transform: rotate(-1.5deg); }
.gm-archive__item--tilt-r { transform: rotate(1.5deg); }
.gm-archive__item:hover { transform: rotate(0) translateY(-4px); }

.gm-archive__link {
  display: block;
  text-decoration: none;
  color: var(--color-ink);
}
.gm-archive__cover {
  position: relative;
  margin: 0 0 16px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 18px 36px -22px rgba(20, 12, 8, 0.32);
  transition: box-shadow 380ms var(--ease-out);
}
.gm-archive__link:hover .gm-archive__cover {
  box-shadow: 0 28px 56px -22px rgba(20, 12, 8, 0.42);
}
.gm-archive__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.92);
}
.gm-archive__stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.gm-archive__brand { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
.gm-archive__nr { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.8); }

.gm-archive__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.gm-archive__season {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-archive__h {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--color-ink);
}

/* CTA */
.gm-archive__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vh, 80px);
}
.gm-archive__more {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color 200ms var(--ease-out);
}
.gm-archive__more em { font-style: italic; }
.gm-archive__more-arrow {
  font-style: normal;
  color: var(--color-primary);
  transition: transform 200ms var(--ease-out);
}
.gm-archive__more:hover { color: var(--color-primary); }
.gm-archive__more:hover .gm-archive__more-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .gm-archive__strip { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 700px) {
  .gm-archive { padding: 80px 20px; }
  .gm-archive__strip { grid-template-columns: 1fr; gap: 48px; }
  .gm-archive__item--tilt-l,
  .gm-archive__item--tilt-r { transform: rotate(0); }
}

/* ─── Round-10 2026-05-16 · NEW SECTIONS ────────────────────────────
   Per Papa-Flow-Brief: Aktuell (Pos 5) + Portrait (Pos 8) + Brief (Pos 9).
   Print-DNA, Times-italic-Headlines, ruhig + editorial.
   ──────────────────────────────────────────────────────────────────── */

/* ─── gm-aktuell · 4 gleichberechtigte Karten quer ─────────────────── */
.gm-aktuell {
  padding: 100px 48px 80px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.gm-aktuell__head {
  max-width: 1480px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-aktuell__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gm-aktuell__kicker-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-aktuell__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-aktuell__title em { font-style: italic; }
/* Round-10 v2 · Lead-Story-Rhythmus statt 4-equal.
 * Lead-Card links: 2-Spalten + 3-Rows breit (große Inszenierung, langer Dek).
 * Secondary-Cards rechts: kompakte horizontale Reihen (image left + body right).
 * Mobile: alle stacken, Lead bekommt mehr Atmen via aspect-ratio. */
.gm-aktuell__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1480px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-auto-rows: min-content;
  gap: 32px 40px;
}
.gm-aktuell-card { margin: 0; }
.gm-aktuell-card--lead {
  grid-row: span 3;
}
.gm-aktuell-card__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 220ms var(--ease-out);
}
/* Round-11.5 2026-05-16 · Lead+Rail+Grid hat den Lead aus dem Grid
   ausgelagert (eigener .gm-aktuell__lead-Container). Die alten
   --lead-Conditional-Rules sind nicht mehr nötig — Grid-Cards sind
   jetzt alle gleichartig (column-flex). Diese 2 Rules waren der Grund,
   warum Cards plötzlich row-flexed wirkten nach JS-Refactor. */
.gm-aktuell-card__inner:hover { transform: translateY(-3px); }
.gm-aktuell-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-line);
  flex-shrink: 0;
}
.gm-aktuell-card--lead .gm-aktuell-card__media { aspect-ratio: 4 / 3; }
.gm-aktuell-card:not(.gm-aktuell-card--lead) .gm-aktuell-card__media {
  aspect-ratio: 1 / 1;
  width: 140px;
}
.gm-aktuell-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gm-aktuell-card--lead .gm-aktuell-card__body { gap: 14px; }
.gm-aktuell-card__lead-mark {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  align-self: flex-start;
}
.gm-aktuell-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms var(--ease-out), filter 380ms var(--ease-out);
}
.gm-aktuell-card__inner:hover .gm-aktuell-card__media img {
  transform: scale(1.03);
  filter: brightness(0.96);
}
.gm-aktuell-card__rubric {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gm-aktuell-card__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-aktuell-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.002em;
  color: var(--color-ink);
}
.gm-aktuell-card--lead .gm-aktuell-card__title {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.1;
  text-wrap: balance;
}
.gm-aktuell-card__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-aktuell-card--lead .gm-aktuell-card__dek {
  font-size: 16px;
  line-height: 1.55;
  -webkit-line-clamp: 4;
}
.gm-aktuell__foot {
  max-width: 1480px;
  margin: 48px auto 0;
  text-align: right;
}
.gm-aktuell__more {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 4px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.gm-aktuell__more:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 1024px) {
  .gm-aktuell__grid { grid-template-columns: 1fr; gap: 32px; }
  .gm-aktuell-card--lead { grid-row: auto; }
}
@media (max-width: 700px) {
  .gm-aktuell { padding: 64px 20px 56px; }
  .gm-aktuell__head { margin-bottom: 32px; }
  .gm-aktuell__grid { gap: 28px; }
  .gm-aktuell-card:not(.gm-aktuell-card--lead) .gm-aktuell-card__media { width: 110px; }
  .gm-aktuell__foot { text-align: left; }
}

/* ─── gm-portrait · 3 editorial portrait cards ─────────────────────── */
.gm-portrait {
  padding: 100px 48px 80px;
  background: var(--color-cream, #f7f2eb);
  border-top: 1px solid var(--color-line);
}
.gm-portrait__head {
  max-width: 1320px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-portrait__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.gm-portrait__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-portrait__title em { font-style: italic; }
.gm-portrait__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.gm-portrait-card { margin: 0; }
.gm-portrait-card__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 220ms var(--ease-out);
}
.gm-portrait-card__inner:hover { transform: translateY(-3px); }
.gm-portrait-card__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-line);
}
.gm-portrait-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15);
  transition: transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}
.gm-portrait-card__inner:hover .gm-portrait-card__media img {
  filter: grayscale(0);
  transform: scale(1.02);
}
.gm-portrait-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gm-portrait-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.002em;
  color: var(--color-ink);
}
.gm-portrait-card__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.gm-portrait-card__dek {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-ink);
}
.gm-portrait-card__more {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gm-portrait-card__more-arrow {
  font-style: normal;
  transition: transform 200ms var(--ease-out);
}
.gm-portrait-card__inner:hover .gm-portrait-card__more-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 1024px) {
  .gm-portrait__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (max-width: 700px) {
  .gm-portrait { padding: 64px 20px 56px; }
  .gm-portrait__head { margin-bottom: 36px; }
  .gm-portrait__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── gm-brief · inline Newsletter (Position 9, ersetzt Octopus) ──── */
.gm-brief {
  position: relative;
  padding: 100px 48px 96px;
  background: var(--color-surface);
}
.gm-brief__rule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 2px;
  background: var(--color-primary);
}
.gm-brief__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gm-brief__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.gm-brief__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
.gm-brief__title em { font-style: italic; }
.gm-brief__lede {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  text-wrap: balance;
}
.gm-brief__form {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.gm-brief__input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  color: var(--color-ink);
  transition: border-color 200ms var(--ease-out);
}
.gm-brief__input:focus {
  outline: none;
  border-color: var(--color-ink);
}
.gm-brief__submit {
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: #fff;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 200ms var(--ease-out);
}
.gm-brief__submit:hover { background: var(--color-primary); }
.gm-brief__submit-arrow { transition: transform 200ms var(--ease-out); }
.gm-brief__submit:hover .gm-brief__submit-arrow { transform: translateX(3px); }
.gm-brief__privacy {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
.gm-brief__sig {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-ink-soft);
}

@media (max-width: 700px) {
  .gm-brief { padding: 72px 20px 64px; }
  .gm-brief__form { flex-direction: column; gap: 10px; }
  .gm-brief__submit { width: 100%; justify-content: center; }
}

/* ─── Round-10 v2 · A11y + reduced-motion universal rules ─────────────
   Honoriert prefers-reduced-motion durchgängig: alle Transitions auf
   1ms, transform/opacity bleibt erhalten aber ohne Bewegung. Plus:
   sichtbarer Focus-Ring fix für Keyboard-Nutzer durchgängig.
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus-Visible: roter Burgund-Outline, 2px, leichtes offset. Browser-
 * default ist meist zu subtil oder ganz aus (Chrome). Wichtig für
 * Keyboard-Nutzer (NVDA/JAWS/Voice-Control). */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-Link für Keyboard-Nutzer — versteckt bis fokussiert, dann
 * sichtbar oben-links, springt direkt zu <main>. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── events.html · Phenomenon-Studio-style layout · Round-10 Phase 2a ─
   Hero featured event + horizontal carousel + year-filter.
   Class-prefix: evp- (events page). Reuses tokens from tokens.css.
   ────────────────────────────────────────────────────────────────── */

/* ── HERO · 50/50 split (image left, meta right) ── */
.evp-hero {
  padding: 96px 48px 80px;
  background: var(--color-cream, #f7f2eb);
  border-bottom: 1px solid var(--color-line);
}
.evp-hero__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.evp-hero__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-line);
  text-decoration: none;
}
.evp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease-out);
}
.evp-hero__media:hover img { transform: scale(1.02); }
.evp-hero__media-corner {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
}
.evp-hero__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.evp-hero__kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.evp-hero__kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
}
.evp-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--color-ink);
  text-wrap: balance;
}
.evp-hero__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 560px;
}
.evp-hero__venue {
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--color-ink);
}
.evp-hero__seats {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  font-weight: 600;
}
.evp-hero__cta {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 200ms var(--ease-out);
}
.evp-hero__cta:hover { background: var(--color-primary); }
.evp-hero__cta-arrow { transition: transform 200ms var(--ease-out); }
.evp-hero__cta:hover .evp-hero__cta-arrow { transform: translateX(3px); }

/* ── CAROUSEL · horizontal scroll-snap ── */
.evp-carousel {
  padding: 80px 0 64px 48px;
  background: var(--color-surface);
}
.evp-carousel__head {
  max-width: 1480px;
  margin: 0 auto 40px;
  padding-right: 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.evp-carousel__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.evp-carousel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.evp-carousel__title em { font-style: italic; }
.evp-carousel__hint {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.evp-carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 48px;
  scrollbar-width: thin;
  padding-bottom: 24px;
}
.evp-carousel__track::-webkit-scrollbar { height: 6px; }
.evp-carousel__track::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 3px;
}
.evp-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 220ms var(--ease-out);
}
.evp-card:hover { transform: translateY(-4px); }
.evp-card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-line);
}
.evp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 380ms var(--ease-out);
}
.evp-card:hover .evp-card__media img { transform: scale(1.04); }
.evp-card__body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.evp-card__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  border-right: 1px solid var(--color-line);
  padding-right: 18px;
  min-width: 64px;
}
.evp-card__day {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
}
.evp-card__month {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-top: 4px;
}
.evp-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.evp-card__venue {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.evp-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--color-ink);
}
.evp-card__cta {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ── YEAR-FILTER · tabs + grid ── */
.evp-year {
  padding: 96px 48px 80px;
  background: var(--color-cream, #f7f2eb);
  border-top: 1px solid var(--color-line);
}
.evp-year__head {
  max-width: 1320px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evp-year__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.evp-year__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.evp-year__title em { font-style: italic; }
.evp-year__lede {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink-soft);
  max-width: 540px;
}
.evp-year__tabs {
  max-width: 1320px;
  margin: 0 auto 32px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap;
}
.evp-year__tab {
  padding: 14px 22px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.evp-year__tab:hover { color: var(--color-ink); }
.evp-year__tab.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-primary);
}
.evp-year__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.evp-year-row {
  margin: 0;
  border-bottom: 1px solid var(--color-line);
}
.evp-year-row__link {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--color-ink);
  transition: padding 220ms var(--ease-out);
}
.evp-year-row__link:hover { padding-left: 12px; }
.evp-year-row__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 80px;
}
.evp-year-row__day {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink);
}
.evp-year-row__month {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-top: 6px;
}
.evp-year-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.evp-year-row__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.evp-year-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--color-ink);
}
.evp-year-row__venue {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink-soft);
}
.evp-year-row__arrow {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-primary);
  transition: transform 200ms var(--ease-out);
}
.evp-year-row__link:hover .evp-year-row__arrow { transform: translateX(6px); }
.evp-year__empty {
  max-width: 540px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--color-ink-soft);
}

/* ── Events-page mobile breakpoints ── */
@media (max-width: 1024px) {
  .evp-hero { padding: 64px 24px 56px; }
  .evp-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .evp-carousel { padding-left: 24px; }
  .evp-carousel__head { padding-right: 24px; }
  .evp-card { flex: 0 0 300px; }
  .evp-year { padding: 64px 24px 56px; }
}
@media (max-width: 700px) {
  .evp-hero__title { font-size: clamp(32px, 8vw, 44px); }
  .evp-carousel { padding-left: 20px; padding-bottom: 48px; }
  .evp-carousel__head { padding-right: 20px; margin-bottom: 28px; }
  .evp-card { flex: 0 0 260px; }
  .evp-year__tabs { overflow-x: auto; flex-wrap: nowrap; }
  .evp-year__tab { white-space: nowrap; padding: 12px 16px; font-size: 12px; }
  .evp-year-row__link { gap: 18px; padding: 18px 0; }
  .evp-year-row__date { min-width: 60px; }
  .evp-year-row__day { font-size: 36px; }
  .evp-year-row__arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Round-11 · Papa-Vorlage 2026-05-16
   Direkt-Korrekturen aus Mail 09:54+10:01 + Screenshots papa-vorlage-{1..4}.
   ──────────────────────────────────────────────────────────────────── */

/* ── Section-Header-Pattern (kicker + optional right-link) ────────────
   Wiederverwendet von AKTUELL, EVENT, PORTRAIT, MAGAZINE. */
.gm-aktuell__head,
.gm-program__head,
.gm-portrait__head,
.gm-magazine__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-ink);
}
.gm-aktuell__kicker,
.gm-program__kicker,
.gm-portrait__kicker,
.gm-magazine__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-aktuell__kicker-dot,
.gm-program__kicker-dot,
.gm-portrait__kicker-dot,
.gm-magazine__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-aktuell__more--head,
.gm-program__more--head,
.gm-portrait__more--head,
.gm-magazine__more--head {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.gm-aktuell__more--head:hover,
.gm-program__more--head:hover,
.gm-portrait__more--head:hover,
.gm-magazine__more--head:hover {
  opacity: 0.7;
}

/* ── AKTUELL · Lead + Side-Rail + 4-Karten-Reihe ────────────────────── */
.gm-aktuell {
  padding: 80px var(--page-bleed, 48px);
  background: var(--color-bg);
}
.gm-aktuell__lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.gm-aktuell__lead {
  position: relative;
  margin: 0;
}
.gm-aktuell-lead__inner {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gm-aktuell-lead__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-line);
  margin-bottom: 22px;
  overflow: hidden;
}
.gm-aktuell-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out, ease-out);
}
.gm-aktuell-lead__inner:hover .gm-aktuell-lead__media img {
  transform: scale(1.02);
}
.gm-aktuell-lead__mark {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 6px 10px;
  border: 1px solid var(--color-ink);
  border-radius: 2px;
  margin-bottom: 12px;
}
.gm-aktuell-lead__inner .gm-aktuell-card__rubric {
  margin-bottom: 8px;
}
.gm-aktuell-lead__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}
.gm-aktuell-lead__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 58ch;
}

/* Side-Rail · 3 kleine Landscape-Thumbs */
.gm-aktuell__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gm-aktuell-rail__item { margin: 0; }
.gm-aktuell-rail__inner {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
}
.gm-aktuell__rail .gm-aktuell-rail__item:last-child .gm-aktuell-rail__inner {
  border-bottom: 0;
  padding-bottom: 0;
}
.gm-aktuell-rail__media {
  aspect-ratio: 4 / 3;
  background: var(--color-line);
  overflow: hidden;
}
.gm-aktuell-rail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gm-aktuell-rail__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-aktuell-rail__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}
.gm-aktuell-rail__dek {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rubric-Chip (shared zwischen lead + rail + card) */
.gm-aktuell-card__rubric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.gm-aktuell-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* 4-Karten-Reihe darunter */
.gm-aktuell__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.gm-aktuell-card { margin: 0; }
.gm-aktuell-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.gm-aktuell-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-line);
  margin-bottom: 14px;
  overflow: hidden;
}
.gm-aktuell-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out, ease-out);
}
.gm-aktuell-card__inner:hover .gm-aktuell-card__media img {
  transform: scale(1.02);
}
.gm-aktuell-card__body { display: flex; flex-direction: column; gap: 4px; }
.gm-aktuell-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}
.gm-aktuell-card__dek {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── EVENT · 4 Cards in einer Reihe, KEINE Riesendaten ──────────────── */
.gm-program {
  padding: 80px var(--page-bleed, 48px);
  background: var(--color-bg);
}
.gm-program__cards {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.gm-program-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.gm-program-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-line);
  margin-bottom: 14px;
  overflow: hidden;
}
.gm-program-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gm-program-card__meta {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-program-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}
.gm-program-card__dek {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-program-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  align-self: flex-start;
  margin-top: auto;
}
.gm-program-card__cta:hover { opacity: 0.7; }

/* DEAD: alte Giant-Date-Typo neutralisieren (kein DOM mehr, defensive). */
.gm-program-card__date,
.gm-program-card__date-day,
.gm-program-card__date-month,
.gm-program-card__venue { display: none !important; }

/* ── PORTRAIT · 4 Cards ─────────────────────────────────────────────── */
.gm-portrait {
  padding: 80px var(--page-bleed, 48px);
  background: var(--color-bg);
}
.gm-portrait__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.gm-portrait-card { margin: 0; }
.gm-portrait-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.gm-portrait-card__media {
  margin: 0 0 16px;
  aspect-ratio: 4 / 5;
  background: var(--color-line);
  overflow: hidden;
}
.gm-portrait-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out, ease-out);
}
.gm-portrait-card__inner:hover .gm-portrait-card__media img {
  transform: scale(1.02);
}
.gm-portrait-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}
.gm-portrait-card__role {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gm-portrait-card__dek {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gm-portrait-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  align-self: flex-start;
}

/* ── MAGAZINE · 4 Cover-Cards ───────────────────────────────────────── */
.gm-magazine {
  padding: 80px var(--page-bleed, 48px);
  background: var(--color-surface-warm, #FBF9F4);
}
.gm-magazine__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.gm-magazine-card { margin: 0; }
.gm-magazine-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.gm-magazine-card__media {
  aspect-ratio: 3 / 4;
  background: var(--color-line);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(26,26,26,0.08);
}
.gm-magazine-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out, ease-out);
}
.gm-magazine-card__inner:hover .gm-magazine-card__media img {
  transform: scale(1.02);
}
.gm-magazine-card__issue {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.gm-magazine-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}
.gm-magazine-card__meta {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}

/* ── FOOTER · schlank, Logo statt Heft-Box, ohne Redaktion-Liste ────── */
.gm-footer--colophon .gm-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 48px;
}
.gm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.gm-footer__brand-link {
  display: inline-block;
  text-decoration: none;
}
.gm-footer__brand-logo {
  width: auto;
  height: 36px;
}
.gm-footer__brand-claim {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 32ch;
}
.gm-footer__brand-claim em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink);
}

/* DEAD: alte Heft-Stempel + Redaktion-Roster Styles deaktivieren falls
   noch jemand das DOM rendert (sollte aber raus sein). */
.gm-footer__stamp,
.gm-footer__roster { display: none !important; }

/* ── Red-Text-Neutralization (Papa: "Rot nur als Akzent, nie Schrift") ──
   Override aller previously red-tinted text spans. Hairlines/Buttons/Dots
   behalten ihre Burgund-Akzentfunktion. */
.gm-aktuell-card__rubric,
.gm-aktuell-card__title em,
.gm-aktuell-card__dek em,
.gm-program-card__title em,
.gm-program-card__dek em,
.gm-portrait-card__name em,
.gm-aufmacher-card__category,
.gm-aufmacher-card__title em,
.gm-archive__more { color: var(--color-ink) !important; }
.gm-archive__more:hover { color: var(--color-ink) !important; opacity: 0.7; }

/* ── Hero LCP polish · main image fetchpriority ─────────────────────── */
.hero-cinema__stack img:first-child {
  /* Hint for browser: this is the LCP candidate */
  content-visibility: auto;
}

/* ── Responsive Breakpoints ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gm-aktuell__grid,
  .gm-program__cards,
  .gm-portrait__grid,
  .gm-magazine__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .gm-aktuell__lead-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gm-footer--colophon .gm-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@media (max-width: 640px) {
  .gm-aktuell,
  .gm-program,
  .gm-portrait,
  .gm-magazine { padding: 56px 20px; }
  .gm-aktuell__grid,
  .gm-program__cards,
  .gm-portrait__grid,
  .gm-magazine__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gm-aktuell-rail__inner {
    grid-template-columns: 96px 1fr;
    gap: 12px;
  }
  .gm-aktuell__lead-title { font-size: 26px; }
  .gm-footer--colophon .gm-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gm-aktuell__head,
  .gm-program__head,
  .gm-portrait__head,
  .gm-magazine__head {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ── Round-11 · STRONG OVERRIDES für alte Round-10-Rules ─────────────
   Die alte gm-aktuell-Round-10 nutzte 2-col Grid (1.45fr/1fr) +
   horizontale Secondary-Cards (img-left/text-right, 140px square).
   Round-11 ist 4-col Grid mit vollbreiten landscape-Cards. */
.gm-aktuell .gm-aktuell__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 28px !important;
  max-width: none !important;
}
.gm-aktuell .gm-aktuell__grid > .gm-aktuell-card {
  grid-row: auto !important;
  grid-column: auto !important;
}
.gm-aktuell .gm-aktuell__grid > .gm-aktuell-card .gm-aktuell-card__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.gm-aktuell .gm-aktuell__grid > .gm-aktuell-card .gm-aktuell-card__media {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  flex-shrink: 1 !important;
}

/* Rail thumbs — landscape 4:3, fixed 112px wide */
.gm-aktuell .gm-aktuell__rail .gm-aktuell-rail__media {
  aspect-ratio: 4 / 3;
  width: 112px;
  height: auto;
}

/* Program cards override — was 3-col previously, now 4-col */
.gm-program .gm-program__cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}
/* Portrait — was 3-col, now 4-col */
.gm-portrait .gm-portrait__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

/* Responsive overrides re-applied with higher specificity */
@media (max-width: 1100px) {
  .gm-aktuell .gm-aktuell__grid,
  .gm-program .gm-program__cards,
  .gm-portrait .gm-portrait__grid,
  .gm-magazine .gm-magazine__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gm-aktuell .gm-aktuell__lead-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .gm-aktuell .gm-aktuell__grid,
  .gm-program .gm-program__cards,
  .gm-portrait .gm-portrait__grid,
  .gm-magazine .gm-magazine__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Round-11.2 · Slim Issue-Modul + EditorialMosaic + Container-Unify
   2026-05-16 · User-Direktive: keine 4 gleichen Card-Grids hintereinander.
   ──────────────────────────────────────────────────────────────────── */

/* Shared section container — exakt gleiche Breite/Einrückung über alle
   Sections, damit nichts mehr "schlecht eingerückt" wirkt. */
.gm-section__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 80px);
  box-sizing: border-box;
}

/* ── gm-issue · SLIM Aktuelle-Ausgabe-Modul (kompakt, kein zweites Grid) */
.gm-issue {
  padding: 96px 0 64px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.gm-issue__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 80px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.gm-issue__cover { margin: 0; }
.gm-issue__cover-link {
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(26,26,26,0.18), 0 8px 24px rgba(26,26,26,0.10);
  transition: transform 500ms var(--ease-out);
}
.gm-issue__cover-link:hover { transform: translateY(-3px); }
.gm-issue__cover-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.gm-issue__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gm-issue__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-issue__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
}
.gm-issue__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}
.gm-issue__title sup { font-size: 0.55em; vertical-align: super; }
.gm-issue__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
}
.gm-issue__highlights {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.gm-issue__hl { margin: 0; border-bottom: 1px solid var(--color-line); }
.gm-issue__hl-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
  transition: color 200ms var(--ease-out);
}
.gm-issue__hl-link:hover { color: var(--color-ink); }
.gm-issue__hl-link:hover .gm-issue__hl-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.gm-issue__hl-rubric {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.gm-issue__hl-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  text-transform: none;
  color: var(--color-ink);
}
.gm-issue__cta-row {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.gm-issue__cta-primary,
.gm-issue__cta-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.gm-issue__cta-primary {
  background: var(--color-ink);
  color: #fff;
}
.gm-issue__cta-primary:hover { transform: translateY(-2px); background: var(--color-primary); }
.gm-issue__cta-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.gm-issue__cta-ghost:hover { transform: translateY(-2px); background: var(--color-ink); color: #fff; }
.gm-issue__meta {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ── Wrap kicker dot styling for ed-mosaic (shares look with others) ── */
.ed-mosaic .gm-aktuell__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* ── Container-Unify: alle Sections nach Hero teilen gleiche Achse ──
   Outer-padding bleibt sektion-spezifisch (background-Farbe etc), aber
   das inner content nutzt .gm-section__inner mit max-width: 1480px. */
.gm-program,
.gm-portrait,
.gm-magazine {
  padding: 80px 0 !important;
}
.gm-program .gm-section__inner,
.gm-portrait .gm-section__inner,
.gm-magazine .gm-section__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 80px);
}

/* The ed-mosaic + ed-break already use --sp-9 padding; keep but ensure
   inner uses our container-unify. */
.ed-mosaic { padding: 96px 0; }
.ed-mosaic__inner.gm-section__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 80px);
}

/* Ed-Mosaic-Grid + Card-Variants nutzen die bereits funktionierenden Rules
   weiter oben in dieser Datei (Round-10 .ed-card--{bild,aufmacher,color,quote}).
   Round-11.2 fügt hier NUR Container-Wiring + Burgund-Break-Polish hinzu. */

/* ════════════════════════════════════════════════════════════════════
   Round-11.4 · User 2026-05-16: Aufmacher kleiner, Card-Text größer,
   AKTUELL = exakt gleiches 4-Card-Grid wie EVENT/PORTRAIT.
   ──────────────────────────────────────────────────────────────────── */

/* ── Aufmacher: gesamt eine Stufe kleiner ───────────────────────────── */
.gm-aufmacher {
  /* Round-11.6 2026-05-16 · User: Sticky-Lead muss FRÜHER engagieren.
     Section padding-top stark gekürzt + head zu single-line kicker+more
     reduziert (statt h2). Natural-top des sticky main = section_top + 56px
     statt vorher ~200px → sticky engagiert wenn Section gerade in Viewport
     erscheint. */
  padding-top: 32px !important;
  padding-bottom: 56px !important;
}
.gm-aufmacher__head {
  /* Single-line: kicker LEFT + more-link RIGHT + hairline. Konsistent mit
     gm-aktuell/program/portrait/magazine/lifestyle __head Pattern. */
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 24px !important;
  max-width: none !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--color-ink) !important;
}
.gm-aufmacher__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body);
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-ink);
}
.gm-aufmacher__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-aufmacher__more--head {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.gm-aufmacher__more--head:hover { opacity: 0.7; }
/* Legacy h2/eyebrow CSS noch im Datei aber Markup ist weg — wirkungslos. */
.gm-aufmacher__layout {
  gap: clamp(28px, 4vw, 60px) !important;
}
/* Cover-Heft auf der LINKEN Seite kleiner.
   Round-11.6: max-height von 540 → 460 damit Lead-Block insgesamt unter
   600px höhe bleibt und auf 768h-Viewport mit sticky_top=80 komplett
   sichtbar ist (Main_total ≈ 460+18+24+24+22+50 ≈ 600). */
.gm-aufmacher__main-figure {
  max-width: 420px;
  margin-inline: 0;
}
.gm-aufmacher__main-figure img {
  max-height: 460px;
  width: auto;
  object-fit: cover;
}
.gm-aufmacher__main-title {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  margin-top: 16px !important;
}
.gm-aufmacher__main-dek {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-top: 10px !important;
}
.gm-aufmacher__main-cta-row {
  margin-top: 18px !important;
  gap: 12px !important;
}
.gm-aufmacher__cta-primary,
.gm-aufmacher__cta-ghost {
  padding: 12px 20px !important;
  font-size: 12.5px !important;
}

/* RECHTE Seite (6-Tiles): Cards selbst kompakter, ABER Schrift + Hashtags
   etwas größer für bessere Lesbarkeit. */
.gm-aufmacher__grid {
  gap: 22px !important;
}
.gm-aufmacher-card__media {
  aspect-ratio: 16 / 10 !important;
  margin-bottom: 12px !important;
}
.gm-aufmacher-card__category,
.gm-aufmacher-card__kicker {
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 8px !important;
}
.gm-aufmacher-card__title {
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.22 !important;
  margin-bottom: 8px !important;
}
.gm-aufmacher-card__intro,
.gm-aufmacher-card__dek {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--color-ink-soft) !important;
  margin-bottom: 10px !important;
}
.gm-aufmacher-card__tags {
  margin-top: 6px !important;
  gap: 6px !important;
}
.gm-aufmacher-card__tags li {
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Round-11.7 2026-05-16 · Scrolling Marquee (Type7/ramp.space pattern)
   Endlos-scrollender Burgund-Strip zwischen Aufmacher und AKTUELL.
   ──────────────────────────────────────────────────────────────────── */
.gm-marquee {
  background: var(--color-primary);
  color: #fff;
  overflow: hidden;
  padding: 22px 0;
  width: 100%;
  position: relative;
}
.gm-marquee__track {
  display: flex;
  width: max-content;
  animation: gm-marquee-scroll 38s linear infinite;
  will-change: transform;
}
.gm-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding-right: clamp(24px, 3vw, 44px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.005em;
  line-height: 1;
}
.gm-marquee__sep {
  opacity: 0.55;
  font-style: normal;
}
@keyframes gm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.gm-marquee:hover .gm-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gm-marquee__track { animation: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Round-11.6 2026-05-16 · AKTUELL Mirror-Sticky
   6 Tiles (2×3) LINKS scrollend + großer Lead-Beitrag RECHTS sticky.
   Gespiegelt zu Aufmacher. Tiles reuse .gm-aufmacher-card visual class.
   ──────────────────────────────────────────────────────────────────── */
.gm-aktuell {
  padding: 32px 0 56px !important;
  background: var(--color-bg);
}
.gm-aktuell .gm-section__inner {
  /* Round-11.7 · Spiegel der Aufmacher-Breite (1760px) damit beide 2×3
     Grids in exakt gleichen X-Positionen liegen → bilden zusammen ein
     2×6-Grid (wenn man die marquee dazwischen wegdenkt).
     padding-inline auf 0 weil .gm-aufmacher auch ohne inner-padding läuft;
     beide Sections benutzen var(--page-bleed) auf der Section-Ebene. */
  max-width: 1760px;
  margin: 0 auto;
  padding-inline: 0;
}
.gm-aktuell {
  padding-inline: var(--page-bleed) !important;
}
.gm-aktuell__layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 60px);
}
/* LEFT: 2×3 tiles · reuse .gm-aufmacher__grid styling on the same OL.
   Constrain the OL to expand into the available space. */
.gm-aktuell__tiles {
  flex: 1 1 auto;
}
/* RIGHT: sticky lead-article · mirror of .gm-aufmacher__main. */
.gm-aktuell__lead {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
.gm-aktuell-lead__link {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.gm-aktuell-lead__figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-warm);
}
.gm-aktuell-lead__figure img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
  transition: transform 700ms var(--ease-out, ease-out), filter 280ms var(--ease-out, ease-out);
}
.gm-aktuell-lead__link:hover .gm-aktuell-lead__figure img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.08);
}
.gm-aktuell-lead__stamp {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-left: 2px solid var(--color-primary);
}
.gm-aktuell-lead__stamp-rubric {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.gm-aktuell-lead__stamp-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--color-ink);
}
.gm-aktuell-lead__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
  color: var(--color-ink);
  text-wrap: balance;
}
.gm-aktuell-lead__link:hover .gm-aktuell-lead__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.gm-aktuell-lead__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}
.gm-aktuell-lead__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  align-self: flex-start;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 4px;
  transition: color 200ms var(--ease-out, ease-out), border-color 200ms var(--ease-out, ease-out);
}
.gm-aktuell-lead__cta-arrow {
  font-size: 14px;
  transition: transform 240ms var(--ease-out, ease-out);
}
.gm-aktuell-lead__link:hover .gm-aktuell-lead__cta {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.gm-aktuell-lead__link:hover .gm-aktuell-lead__cta-arrow {
  transform: translateX(3px);
}
/* Responsive: bei <1100px stack — Lead rückt nach oben (oder unten)
   und Tiles fallen darunter / darüber. Stacked mirrror: Lead first. */
@media (max-width: 1100px) {
  .gm-aktuell__layout {
    flex-direction: column-reverse;
    gap: clamp(28px, 5vw, 48px);
  }
  .gm-aktuell__lead {
    position: static;
    flex: 1 1 auto;
    top: auto;
    max-width: none;
  }
  .gm-aktuell-lead__figure {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* ── Old .gm-aktuell-card / lead-row / rail CSS (lines ~12200+/13200+)
   ist nicht mehr referenziert vom neuen Markup (das .gm-aktuell__tiles +
   .gm-aktuell-lead nutzt). Dead code, wird im nächsten Cleanup gelöscht. */
.gm-aktuell__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-bottom: 18px !important;
  margin-bottom: 36px !important;
  border-bottom: 1px solid var(--color-ink) !important;
}
/* Round-11.5 2026-05-16 · Lead+Rail revived per User-Plan + Papa-vorlage-1.
   Round-11.4 hatte sie versteckt; jetzt zeigen wir Lead+Rail oberhalb der
   4-Karten-Grid wieder. CSS für die Sub-Komponenten siehe Block @13205+. */
.gm-aktuell .gm-aktuell__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  grid-auto-rows: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.gm-aktuell .gm-aktuell__grid > .gm-aktuell-card .gm-aktuell-card__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  text-decoration: none !important;
  color: inherit !important;
}
.gm-aktuell .gm-aktuell__grid > .gm-aktuell-card .gm-aktuell-card__media {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  flex-shrink: 1 !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .gm-aufmacher__layout {
    grid-template-columns: 1fr !important;
  }
  .gm-aufmacher__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gm-aktuell .gm-aktuell__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .gm-aufmacher { padding-top: 48px !important; padding-bottom: 32px !important; }
  .gm-aufmacher__grid { grid-template-columns: 1fr !important; }
  .gm-aktuell .gm-aktuell__grid { grid-template-columns: 1fr !important; }
}

.ed-mosaic__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  transition: all 220ms var(--ease-out);
}
.ed-mosaic__cta a:hover { background: var(--color-ink); color: #fff; transform: translateY(-2px); }

/* ── EditorialBreak (Burgund stage) ─────────────────────────────────── */
.ed-break {
  padding: 96px 0;
  position: relative;
  color: #fff;
}
.ed-break::before {
  /* override JS-set background with token if we want — but JS sets rubric.
     leave as-is; ed-break gets background:var(--rub-dine) via JS. */
}
.ed-break__inner {
  max-width: 920px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 80px);
  text-align: center;
}
.ed-break__kicker {
  justify-content: center;
}
.ed-break__quote {
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.18;
  text-align: center;
  text-transform: none;
  color: #fff;
  max-width: 22ch;
}
.ed-break__q { opacity: 0.5; padding: 0 6px; }
.ed-break__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.85);
}
.ed-break__author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ed-break__role {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
}
.ed-break__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 1100px) {
  .gm-issue__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ed-mosaic__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(220px, auto);
  }
  .ed-reveal[data-type="aufmacher"] { grid-column: span 2; }
  .ed-reveal[data-type="quote"]     { grid-column: span 2; }
}
@media (max-width: 640px) {
  .gm-issue { padding: 56px 0 32px; }
  .gm-issue__title { font-size: 32px; }
  .gm-issue__hl-link {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .ed-mosaic { padding: 56px 0; }
  .ed-mosaic__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .ed-reveal { grid-column: span 1 !important; grid-row: auto !important; }
  .ed-reveal[data-type="aufmacher"] .ed-card__media { aspect-ratio: 16 / 10; }
  .ed-break { padding: 64px 0; }
  .ed-break__foot { flex-direction: column; gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   Round-11.5 · gm-lifestyle (Papa-Mail 12:08 / 12:12 vogue.de)
   Single rotating feature zwischen EVENT und PORTRAIT. Pattern: ein
   großes 16:9-Bild oben, Kicker + Title zentriert darunter, dezente
   Dot-Pagination am Fuß. Auto-rotate alle 7s via initLifestyle.
   ──────────────────────────────────────────────────────────────────── */
.gm-lifestyle {
  padding: 80px var(--page-bleed, 48px);
  background: var(--color-bg);
}
.gm-lifestyle__head {
  /* erbt das shared section-header-pattern aus dem Round-11-Block oben
     (gm-aktuell__head/gm-program__head/gm-portrait__head sind dort
     zusammen mit gm-lifestyle__head gestyled). Hier nur scope-specific. */
  max-width: var(--container-wide, 1480px);
  margin: 0 auto 32px;
}
.gm-lifestyle__feature {
  position: relative;
  max-width: var(--container-wide, 1480px);
  margin: 0 auto;
}
.gm-lifestyle-feature {
  display: none;
  text-decoration: none;
  color: inherit;
}
.gm-lifestyle-feature.is-active {
  display: block;
  animation: gm-lifestyle-fade 600ms var(--ease-out, ease-out);
}
@keyframes gm-lifestyle-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gm-lifestyle-feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-line);
  overflow: hidden;
  margin-bottom: 28px;
}
.gm-lifestyle-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease-out, ease-out);
}
.gm-lifestyle-feature:hover .gm-lifestyle-feature__media img {
  transform: scale(1.015);
}
.gm-lifestyle-feature__body {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
}
.gm-lifestyle-feature__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 14px;
}
.gm-lifestyle-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}

/* Round-11.6 · Click-Zones · linke/rechte Bildhälfte = prev/next ─────── */
.gm-lifestyle__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Höhe matched die 16:9-Aspect der gm-lifestyle-feature__media. */
  aspect-ratio: 16 / 9;
  display: flex;
  z-index: 2;
  pointer-events: none;
}
.gm-lifestyle__nav-zone {
  flex: 1 1 50%;
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: background 200ms var(--ease-out, ease-out);
  position: relative;
}
.gm-lifestyle__nav-zone--prev { cursor: w-resize; }
.gm-lifestyle__nav-zone--next { cursor: e-resize; }
.gm-lifestyle__nav-zone:hover {
  background: linear-gradient(
    to var(--grad-dir, right),
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0) 35%
  );
}
.gm-lifestyle__nav-zone--next:hover { --grad-dir: left; }
.gm-lifestyle__nav-zone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -10px;
}
/* Subtle arrow indicators on hover — bottom of zone, small svg-less Unicode. */
.gm-lifestyle__nav-zone::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  transform: translateY(-50%) scale(0);
  transition: transform 280ms var(--ease-out, ease-out);
  pointer-events: none;
}
.gm-lifestyle__nav-zone--prev::before { content: '‹'; left: 20px; }
.gm-lifestyle__nav-zone--next::before { content: '›'; right: 20px; }
.gm-lifestyle__nav-zone:hover::before { transform: translateY(-50%) scale(1); }

/* Dot-Pagination — subtle, doctor-audience-friendly */
.gm-lifestyle__dots {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  max-width: var(--container-wide, 1480px);
  display: flex;
  justify-content: center;
  gap: 10px;
}
.gm-lifestyle-dot-wrap { margin: 0; }
.gm-lifestyle-dot {
  width: 32px;
  height: 2px;
  border: 0;
  background: var(--color-line);
  cursor: pointer;
  padding: 0;
  transition: background 300ms var(--ease-out, ease-out);
}
.gm-lifestyle-dot:hover { background: var(--color-ink-soft); }
.gm-lifestyle-dot.is-active { background: var(--color-primary); }

@media (max-width: 800px) {
  .gm-lifestyle { padding: 56px 20px; }
  .gm-lifestyle-feature__media { margin-bottom: 22px; }
  .gm-lifestyle-feature__kicker { margin-bottom: 10px; }
  .gm-lifestyle__dots { margin-top: 22px; }
  .gm-lifestyle-dot { width: 24px; }
}

/* gm-lifestyle__head needs to be in the shared section-header-pattern
   list at line ~13148+. Inject the selector here as a safety net so the
   underline + flex-justify-between work without touching the prior block. */
.gm-lifestyle__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-ink);
}
.gm-lifestyle__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.gm-lifestyle__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.gm-lifestyle__more--head {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.gm-lifestyle__more--head:hover { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════════
   Round-12.0 2026-05-16 · ramp.space-LAYOUT (User-Direktive)
   ──────────────────────────────────────────────────────────────────
   Pattern: 1 sticky Promo-Container (anthrazit OR cream) + 2×3 Tile-
   Grid. Aufmacher Promo LEFT (Werbe-Slot-ready), AKTUELL Promo RIGHT
   (Mirror). Sticky bleibt die GANZE Zeit im Viewport.
   Tile-Grids beider Sections lesen visuell als kontinuierliches 2×6
   (gleiche Tile-Größen, gleicher Gap).
   ──────────────────────────────────────────────────────────────────── */

/* Sections: container-wide, page-bleed-Padding. */
.gm-aufmacher,
.gm-aktuell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: var(--page-bleed) !important;
  padding-block: clamp(40px, 5vh, 72px) !important;
}

/* Round-12.3 2026-05-16 · 3-Zone Grid Alignment (User-Direktive)
   User: "wenn wir die Marquee entfernen, soll es aussehen als wären das 2×3
   und das 2×3 — praktisch komplett mittig, links und rechts immer die
   gleichen Dinge."
   ──────────────────────────────────────────────────────────────────
   Grid: [outer-left] [tiles-center] [outer-right]
   - Tiles immer in der Mitte → beide Sections aligned horizontal
   - Aufmacher Promo in outer-left, AKTUELL Promo in outer-right
   - Outer-Zonen sind groß genug für promo (~380-420px max)
   - Layout span volle Viewport-Breite minus page-bleed
   ──────────────────────────────────────────────────────────────── */
.gm-aufmacher__layout,
.gm-aktuell__layout {
  display: grid !important;
  grid-template-columns:
    [outer-left] minmax(320px, 1fr)
    [tiles-start] minmax(0, 840px) [tiles-end]
    minmax(320px, 1fr) [outer-right] !important;
  align-items: start !important;
  /* Round-12.5 User: "zwischen dem Schwarzen und den Texten wieder
     ein bisschen mehr space zum Atmen" → bigger column-gap. */
  column-gap: clamp(40px, 4vw, 88px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Round-12.4 2026-05-16 · Promo bleed + full-height fill
   User: "wieder nicht ganz links am Rand … nimmt nicht die volle Höhe ein"
   Lösung: Container BLEED zur Viewport-Edge + align-self: stretch =
   füllt full row height mit Background-Color. Sticky-Content bleibt
   im Inner-Link gepinnt.
   ──────────────────────────────────────────────────────────────── */
.gm-aufmacher__promo {
  grid-column: outer-left / tiles-start !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  /* Round-12.8 User: "Black-Section ist zu breit, schaffen wir nicht
     auszufüllen" → padding-left-compensation reduziert. Container bleibt
     visually narrower, Content rückt näher zum Viewport-Edge. */
  width: calc(100% + var(--page-bleed)) !important;
  margin-left: calc(-1 * var(--page-bleed)) !important;
  margin-right: 0 !important;
  background: var(--color-ink) !important;
  position: relative !important;
  max-height: none !important;
  max-width: none !important;
  padding-left: clamp(20px, 2vw, 44px) !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.gm-aktuell__promo {
  grid-column: tiles-end / outer-right !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: calc(100% + var(--page-bleed)) !important;
  margin-right: calc(-1 * var(--page-bleed)) !important;
  margin-left: 0 !important;
  /* Round-12.8 User: "AKTUELL nicht ganz rechts" → darker cream
     so der Container-Rand visuell vom page-bg unterscheidet,
     plus padding-right reduziert. */
  background: #ECE6D8 !important;
  position: relative !important;
  max-height: none !important;
  max-width: none !important;
  padding-right: clamp(20px, 2vw, 44px) !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Inner promo-link is now sticky inside the stretched container.
   Sticky-content stays pinned at viewport top; dark/cream fill below. */
.gm-aufmacher__promo-link,
.gm-aktuell__promo-link {
  position: sticky !important;
  top: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important; /* container hat schon bg */
}

/* Tile-Grid: 2×3, beide Sections im tiles-center-Slot.
   Round-12.5 User: "müssen praktisch an der gleichen Stelle anfangen, ist
   aber egal, wo sie aufhören" → TOP-aligned, bottoms variieren.
   "Die nächste Section beginnt da, wo der längere aufhört" → row-height =
   tallest tile, kürzere tiles haben empty space UNTER sich (natürliches
   align-items: start Verhalten). */
.gm-aufmacher__grid,
.gm-aktuell__tiles {
  grid-column: tiles-start / tiles-end !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(36px, 3vw, 56px) clamp(28px, 2.6vw, 48px) !important;
  align-items: start !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Varied tile aspect-ratios → editorial rhythm.
   Round-12.6 User: alternating zwischen Rows.
   Pattern (1-indexed, 2-col grid):
   - Tiles 1, 4, 5, 8 (Row1-col1, Row2-col2, Row3-col1, ...) = 4/3 landscape (kürzer)
   - Tiles 2, 3, 6, 7 (Row1-col2, Row2-col1, Row3-col2, ...) = 3/4 portrait (länger)
   = Row1 tall RIGHT, Row2 tall LEFT, Row3 tall RIGHT — alternierend. */
.gm-aufmacher-card:nth-child(4n+1) .gm-aufmacher-card__media,
.gm-aufmacher-card:nth-child(4n) .gm-aufmacher-card__media,
[data-aktuell-tiles] > li:nth-child(4n+1) .gm-aufmacher-card__media,
[data-aktuell-tiles] > li:nth-child(4n) .gm-aufmacher-card__media {
  aspect-ratio: 4 / 3 !important;
}
.gm-aufmacher-card:nth-child(4n+2) .gm-aufmacher-card__media,
.gm-aufmacher-card:nth-child(4n+3) .gm-aufmacher-card__media,
[data-aktuell-tiles] > li:nth-child(4n+2) .gm-aufmacher-card__media,
[data-aktuell-tiles] > li:nth-child(4n+3) .gm-aufmacher-card__media {
  aspect-ratio: 3 / 4 !important;
}

/* TILE-TYPO Konsistenz für beide Sections */
.gm-aufmacher-card__title {
  font-size: clamp(20px, 1.5vw, 24px) !important;
  line-height: 1.22 !important;
  margin-bottom: 8px !important;
}
.gm-aufmacher-card__intro,
.gm-aufmacher-card__dek {
  font-size: 17px !important;
  line-height: 1.5 !important;
}
.gm-aufmacher-card__category,
.gm-aufmacher-card__kicker {
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}

/* Vertikaler Rhythmus zwischen Sections.
   Round-12.7 User: "mache das [marquee] noch bisschen breiter" → padding-block
   18 → 32 + font-size bump für mehr Präsenz. */
.gm-marquee {
  padding: 32px 0 !important;
}
.gm-marquee__group {
  font-size: clamp(26px, 2.8vw, 38px) !important;
}
.gm-program,
.gm-portrait,
.gm-magazine,
.gm-lifestyle {
  padding-block: clamp(48px, 6vh, 72px) !important;
}
.gm-brief {
  padding-block: clamp(48px, 6vh, 72px) !important;
}

/* Responsive: Tablet/Mobile — Round-12.4 reset bleed + sticky */
@media (max-width: 1100px) {
  .gm-aufmacher__layout,
  .gm-aktuell__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .gm-aufmacher__promo,
  .gm-aktuell__promo {
    grid-column: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: var(--color-ink) !important;
  }
  .gm-aktuell__promo {
    background: var(--color-surface-warm) !important;
  }
  .gm-aufmacher__promo-link,
  .gm-aktuell__promo-link {
    position: static !important;
    padding: 32px 28px 36px !important;
  }
  .gm-aufmacher__grid,
  .gm-aktuell__tiles {
    grid-column: auto !important;
    width: 100% !important;
    align-items: stretch !important; /* mobile: stretch, kein editorial rhythm */
  }
}
@media (max-width: 640px) {
  .gm-aufmacher__grid,
  .gm-aktuell__tiles {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .gm-aufmacher__promo,
  .gm-aktuell__promo {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Round-12.0 2026-05-16 · Readability Sweep (Doctor-Audience 45+)
   User-Regel: Body-Text min 17px (Healy WebDesign / NN-Group Senior).
   Touches ONLY content-text (intros, deks, leads, article-body). UI-
   meta (kickers, labels, categories, dates) bleibt klein.
   ──────────────────────────────────────────────────────────────────── */

/* Card intros / deks across sections */
.gm-aufmacher-card__intro,
.gm-aufmacher-card__dek,
.gm-portrait-card__dek,
.gm-magazine-card__dek,
.gm-lifestyle-feature__caption,
.gm-program-card__dek,
.gm-aktuell-lead__dek,
.gm-latest-row__dek {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* Hero copy (slide-fg) dek — visible body-text not eyebrow */
.hero-cinema__dek {
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.55 !important;
}

/* Article-page body text — main reading surface */
.article-body p,
.article-content p,
.gm-article__body p {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* Brief / Newsletter explainer lead */
.gm-brief__lede,
.nl-block__lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* Footer link-list rows — slightly less critical, but still readable */
.gm-footer__col a,
.gm-footer__col li {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ════════════════════════════════════════════════════════════════════
   Round-12.1 2026-05-16 · ramp.space Layout-Polish
   User-Vergleich Image 14 vs 15: ramp's tiles haben (a) landscape Bilder
   statt 1:1 square, (b) Kategorie UNTEN statt oben, (c) mehr visual
   weight aufs Bild. Plus marquee-fix, section-padding bump.
   ──────────────────────────────────────────────────────────────────── */

/* ── Tile-Cards: ramp-style landscape image + category at bottom ──── */
.gm-aufmacher-card__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.gm-aufmacher-card__media {
  aspect-ratio: 4 / 3 !important;
  margin-bottom: 4px !important;
  order: 1 !important;
}
.gm-aufmacher-card__title    { order: 2 !important; }
.gm-aufmacher-card__intro,
.gm-aufmacher-card__dek      { order: 3 !important; margin-bottom: 4px !important; }
.gm-aufmacher-card__category {
  order: 4 !important;
  margin-top: 2px !important;
}
.gm-aufmacher-card__tags     { order: 5 !important; }

/* Category: drop the dot (ramp uses pure uppercase, no dot). Letterspacing-
   driven elegance, not graphic-marker. */
.gm-aufmacher-card__category .gm-aufmacher-card__dot { display: none !important; }
.gm-aufmacher-card__category {
  letter-spacing: 0.2em !important;
  color: var(--color-ink-soft) !important;
  font-weight: 600 !important;
}

/* ── Marquee · ensure animation runs + Round-12.2 schneller ─────────
   User-Feedback 2026-05-16: marquee soll spürbar schneller laufen.
   36s → 22s (≈40% schneller, aber nicht hyper). */
@keyframes gm-marquee-scroll-12 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.gm-marquee__track {
  animation: gm-marquee-scroll-12 22s linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
.gm-marquee:hover .gm-marquee__track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .gm-marquee__track { animation-duration: 80s !important; }
}

/* ── Section padding bump: Events/Lifestyle/Portrait (User-Wunsch) ── */
.gm-program,
.gm-portrait,
.gm-lifestyle {
  padding-block: clamp(64px, 8vh, 104px) !important;
}

/* ── Lifestyle: classic carousel-arrows (Round-12.9 User-Korrektur) ──
   User: "Pfeile müssen von Anfang an sichtbar, nicht erst on hover."
   Existing CSS Round-11.6 hatte ::before { transform: scale(0) } default
   und scale(1) auf hover → muss überschrieben werden für immer-sichtbar.
   ──────────────────────────────────────────────────────────────────── */
.gm-lifestyle__nav-zone {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  flex: none !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(20, 20, 20, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out), border-color 200ms var(--ease-out) !important;
  z-index: 3 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gm-lifestyle__nav-zone--prev {
  left: 20px !important;
  right: auto !important;
  cursor: pointer !important;
}
.gm-lifestyle__nav-zone--next {
  right: 20px !important;
  left: auto !important;
  cursor: pointer !important;
}
.gm-lifestyle__nav-zone:hover {
  background: rgba(20, 20, 20, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-50%) scale(1.06) !important;
}
/* ::before override: existing Round-11.6 CSS hatte scale(0) → muss
   immer sichtbar sein als simple Chevron-Text im Button. */
.gm-lifestyle__nav-zone::before {
  content: '‹' !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  display: block !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  pointer-events: none !important;
}
.gm-lifestyle__nav-zone--next::before { content: '›' !important; }
.gm-lifestyle__nav-zone:hover::before {
  transform: none !important;
}

/* Aufmacher-Card hover: war color #5d5d5d (grau) → schlecht lesbar.
   Round-12.9 User: hover soll burgund unterstrichen sein, kein grau. */
.gm-aufmacher-card__inner:hover .gm-aufmacher-card__title {
  color: var(--color-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-primary) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
}

/* Header-Alignment (User-Wunsch 3:2:2:3):
   Kicker links ALIGNS mit promo-edge (Aufmacher) / tile-grid-edge (AKTUELL).
   Link rechts ALIGNS mit tile-grid-edge (Aufmacher) / promo-edge (AKTUELL).
   Strategie: header bekommt SAME 3-zone grid wie layout, kicker und link
   sitzen in der entsprechenden zone. */
.gm-aufmacher__head,
.gm-aktuell__head {
  display: grid !important;
  grid-template-columns:
    [outer-left] minmax(280px, 1fr)
    [tiles-start] minmax(0, 840px) [tiles-end]
    minmax(280px, 1fr) [outer-right] !important;
  column-gap: clamp(40px, 4vw, 88px) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(24px, 3vh, 40px) 0 !important;
  flex-wrap: nowrap !important;
}
/* Aufmacher: kicker im outer-left, link im tiles-Bereich, beide am Edge */
.gm-aufmacher__kicker {
  grid-column: outer-left / tiles-start !important;
  justify-self: start !important;
  margin-left: calc(-1 * var(--page-bleed)) !important;
  padding-left: clamp(20px, 2vw, 44px) !important;
}
.gm-aufmacher__more--head {
  grid-column: tiles-start / tiles-end !important;
  justify-self: end !important;
}
/* AKTUELL (mirror): kicker im tiles-Bereich, link im outer-right */
.gm-aktuell__kicker {
  grid-column: tiles-start / tiles-end !important;
  justify-self: start !important;
}
.gm-aktuell__more--head {
  grid-column: tiles-end / outer-right !important;
  justify-self: end !important;
  margin-right: calc(-1 * var(--page-bleed)) !important;
  padding-right: clamp(20px, 2vw, 44px) !important;
}
/* Mobile: simple flex header */
@media (max-width: 1100px) {
  .gm-aufmacher__head,
  .gm-aktuell__head {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .gm-aufmacher__kicker,
  .gm-aufmacher__more--head,
  .gm-aktuell__kicker,
  .gm-aktuell__more--head {
    grid-column: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Round-12.2 2026-05-16 · Editorial-Polish auf ramp-Quality-Level
   User: "Mach aus dem linken Design die Qualität und Struktur des
   rechten Designs." Konkret: mehr Weißraum, kräftigere Headline-Typo,
   großzügigere Bilder, sauberes Grid-Alignment. Brand-DNA bleibt
   (Times italic, burgund accent).
   ──────────────────────────────────────────────────────────────────── */

/* SECTION-Padding deutlich großzügiger (luftiger Editorial) */
.gm-aufmacher,
.gm-aktuell {
  padding-block: clamp(72px, 9vh, 128px) !important;
}

/* TILE-CARDS: Round-12.8 — Texte bigger (User: "alles zu klein, bisschen größer") */
.gm-aufmacher-card__inner {
  gap: 14px !important;
}
.gm-aufmacher-card__media {
  margin-bottom: 4px !important;
}
.gm-aufmacher-card__title {
  font-size: clamp(20px, 1.5vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  text-wrap: balance;
}
.gm-aufmacher-card__intro,
.gm-aufmacher-card__dek {
  font-size: 17px !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  margin: 0 !important;
  color: var(--color-ink-soft) !important;
}
.gm-aufmacher-card__category {
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--color-ink-soft) !important;
  margin-top: 2px !important;
}

/* TAGS: small hashtag chips below intro (per User-Wunsch zurück) */
.gm-aufmacher-card__tags {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  order: 4 !important;
  margin-top: 2px !important;
}
.gm-aufmacher-card__tags li {
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-muted) !important;
  letter-spacing: 0.02em !important;
}

/* category sits AFTER tags */
.gm-aufmacher-card__category { order: 5 !important; }

/* TILE-GRID: kompakter als Round-12.2 — User: Tiles deutlich kleiner */
.gm-aufmacher__grid,
.gm-aktuell__tiles {
  gap: clamp(36px, 3vw, 56px) clamp(24px, 2.4vw, 40px) !important;
}

/* PROMO-Container Inner-Link: Round-12.7 noch kompakter + image-frame.
   User: "noch immer zu viel, beide Sections konsistent, cool wie ramp.space"
   → padding 24/22/28 → 18/18/22, gap 11 → 8, plus colored image-frame
   für cover-image-staging wie bei ramp (Image auf Background-Farbe). */
.gm-aufmacher__promo-link,
.gm-aktuell__promo-link {
  padding: 18px 18px 22px !important;
  gap: 8px !important;
}

/* Round-12.8 · Promo-issue (meta) size bump für Lesbarkeit */
.gm-aufmacher__promo-issue,
.gm-aktuell__promo-issue {
  font-size: 12.5px !important;
  letter-spacing: 0.2em !important;
}

/* Round-12.7 · Image-Frame (ramp-pattern): Cover sitzt auf separater
   Background-Color, kontrastiert mit Container → "Object auf Bühne". */
.gm-aufmacher__promo-figure {
  background: #0B0B0B !important; /* tiefere Schwärze als anthrazit container */
  padding: 14px !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}
.gm-aufmacher__promo-figure img {
  /* image sits centered on the dark frame */
  background: transparent !important;
}
.gm-aktuell__promo-figure {
  background: #E9E2D2 !important; /* dunkleres warm cream als Frame */
  padding: 14px !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}
.gm-aktuell__promo-figure img {
  background: transparent !important;
}

/* PROMO-Title kräftiger, magazine-mäßig */
.gm-aufmacher__promo-title,
.gm-aktuell__promo-title {
  font-size: clamp(26px, 2.1vw, 36px) !important;
  line-height: 1.12 !important;
  margin: 2px 0 0 !important;
}
.gm-aufmacher__promo-dek,
.gm-aktuell__promo-dek {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* PROMO-CTA: schmalere höhere Pill (ramp-style) */
.gm-aufmacher__promo-cta,
.gm-aktuell__promo-cta {
  align-self: stretch !important;
  justify-content: space-between !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  border-radius: 999px !important;
}

/* HEADER · "Aktuelle Ausgabe" Kicker + "Alle Beiträge" Link
   Round-12.9 mirror: SAME 3-zone grid wie der Layout → kicker und link
   sitzen in der korrekten zone (User-Wunsch 3:2:2:3 alignment).
   - Aufmacher: kicker in outer-left (bleed), link in tiles-area right
   - AKTUELL: kicker in tiles-area left, link in outer-right (bleed) */
.gm-aufmacher__head,
.gm-aktuell__head {
  display: grid !important;
  grid-template-columns:
    [outer-left] minmax(320px, 1fr)
    [tiles-start] minmax(0, 840px) [tiles-end]
    minmax(320px, 1fr) [outer-right] !important;
  column-gap: clamp(40px, 4vw, 88px) !important;
  align-items: center !important;
  margin-bottom: clamp(28px, 3vh, 48px) !important;
  max-width: none !important;
  width: 100% !important;
}
.gm-aufmacher__kicker,
.gm-aktuell__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-soft) !important;
}
.gm-aufmacher__kicker-dot,
.gm-aktuell__kicker-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--color-primary) !important;
}
.gm-aufmacher__more--head,
.gm-aktuell__more--head {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--color-ink) !important;
  padding-bottom: 2px !important;
}

/* TOP-NAV · schmaler Header, kleineres Logo links, gesperrte Links
   User-Direktive: "klare Top-Navigation wie rechts: schmaler Header,
   kleines Logo links, gesperrte Menülinks, Icons rechts" */
.gm-header {
  padding-block: 14px !important;
}
.gm-header__logo img {
  height: 28px !important;
  width: auto !important;
}
.gm-nav {
  gap: clamp(24px, 2.8vw, 48px) !important;
}
.gm-nav a {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* MOBILE: bei < 1100px → Promo stackt oben, Tiles drunter (1-col Stack) */
@media (max-width: 1100px) {
  .gm-aufmacher,
  .gm-aktuell {
    padding-block: clamp(56px, 7vh, 96px) !important;
  }
  .gm-aufmacher-card__title {
    font-size: clamp(20px, 4vw, 28px) !important;
  }
}
@media (max-width: 640px) {
  .gm-aufmacher-card__inner { gap: 14px !important; }
  .gm-aufmacher__grid,
  .gm-aktuell__tiles { gap: 56px !important; }
}

/* Hero · etwas breiter (User-Wunsch Round-12.2): copy-Block max-width 760→960 */
.hero-cinema__copy {
  max-width: 960px !important;
  right: 280px !important;
}
.hero-cinema__dek {
  max-width: 620px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Round-12.10 2026-05-16 · Universal Section-Header Consistency
   User: "die Überschriften (Lifestyle, Portrait usw.) sind extrem klein,
   und der Strich darunter ist überall unterschiedlich — muss konsistent."
   ──────────────────────────────────────────────────────────────────── */

/* All section kickers — same treatment across page */
.gm-aufmacher__kicker,
.gm-aktuell__kicker,
.gm-program__kicker,
.gm-portrait__kicker,
.gm-magazine__kicker,
.gm-lifestyle__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--color-ink) !important;
  white-space: nowrap !important;
}

/* All kicker-dots — same */
.gm-aufmacher__kicker-dot,
.gm-aktuell__kicker-dot,
.gm-program__kicker-dot,
.gm-portrait__kicker-dot,
.gm-magazine__kicker-dot,
.gm-lifestyle__kicker-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--color-primary) !important;
  flex-shrink: 0 !important;
}

/* All "Alle X →" links — same treatment */
.gm-aufmacher__more--head,
.gm-aktuell__more--head,
.gm-program__more--head,
.gm-portrait__more--head,
.gm-magazine__more--head,
.gm-lifestyle__more--head {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--color-ink) !important;
  padding-bottom: 3px !important;
  white-space: nowrap !important;
}

/* Tags: better readability — bigger + darker contrast (User: schlecht lesbar) */
.gm-aufmacher-card__tags li {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  background: var(--color-surface-warm, #FBF9F4) !important;
  border: 1px solid var(--color-line, #E6E1D8) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}