/* ============================================================
   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 — synchronized 2026-05-13 ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
h1 { letter-spacing: 0.015em; }

/* 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-primary);
}
.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;
}

/* ── Header ─────────────────────────────────────────── */
.gm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding var(--dur-fast) var(--ease-out);
}
.gm-header.is-narrow {
  padding: 14px 32px;
}
.gm-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.gm-header.is-narrow .gm-header__logo img { height: 32px; }

.gm-nav {
  display: flex;
  gap: 32px;
}
.gm-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gm-nav a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-primary);
}
.gm-nav a.is-active {
  color: var(--color-primary);
}
.gm-nav a.is-active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--color-primary);
  margin-top: 2px;
}
.gm-mobile-menu__nav a.is-active {
  color: 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-primary); }
.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-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
}
.pill--inverted {
  color: var(--color-primary);
  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-primary);
  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-primary);
}
.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-primary);
  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-primary);
  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__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);
}

/* ── Footer ─────────────────────────────────────────── */
.gm-footer {
  background: var(--color-dark);
  color: var(--color-dark-fg);
  font-family: var(--font-body);
}
.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-primary); }
.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-primary); }
.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-primary);
  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-primary); }
.nl-popup__lead {
  margin: 0 0 var(--sp-5);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 320px;
}
.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-primary);
}
.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);
  font-size: 96px;
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.035em;
  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-primary);
  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-primary);
}
.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-primary);
  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-primary);
  color: var(--color-primary);
}
.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-primary);
  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-primary);
  margin-bottom: var(--sp-5);
}
.rubric-manifest__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.03em;
  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-primary);
  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-primary);
  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-primary);
  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;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}
.rubric-grid__more {
  margin-top: var(--sp-8);
  text-align: center;
}
.rubric-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.rubric-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  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.15;
  letter-spacing: -0.01em;
  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);
}
.rubric-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rubric-card__tags span {
  padding: 3px 9px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.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-primary); }
.archive-section__rubric {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.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-primary);
}

/* ── 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-primary); 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-primary);
  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-primary);
}
.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-primary);
}
.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-primary); }
.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-primary);
}
.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-primary);
  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-primary);
}
.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-primary);
  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-primary);
  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-primary);
  margin-bottom: 28px;
}
.prose-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 96px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  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-primary);
  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-primary);
}
.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-primary); }
.notfound__rubric {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.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: 128px; }
  .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: 96px; }
  .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: 96px; }
  .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) {
  .gm-nav { display: none; }
  .gm-burger { display: inline-flex; }
}
@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: 96px; }
  .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);
}

/* 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-primary);
}
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; }

/* ── 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); }
}
@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; }
}

@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(40px, 11vw, 72px); }
  .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(--rub-dine);
  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__rubric {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.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; }
}

/* ── Rubrik-Tour · cinema-driven 5-stage rubric showcase ─────────
 * Sits between Editorial Mosaic and Feature Spotlight. Each stage =
 * full-bleed image of one Rubrik (Dine/Medical/Travel/Lifestyle/Event),
 * tinted with that rubric's color via a 135°-gradient overlay. Only
 * one stage is .is-active at a time; cursor-nav.js handles prev/next
 * via the shared [data-cursor-zone] mechanism.
 *
 * Height: 88vh on desktop (big but not full — keeps the "next section
 * exists" affordance), min-600px to handle short laptop screens, 76vh
 * on mobile. */
.rubric-tour {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 600px;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
}
.rubric-tour__stages {
  position: absolute;
  inset: 0;
}
.rubric-tour__stage {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
  pointer-events: none;
}
.rubric-tour__stage.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rubric-tour__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Two-layer overlay per stage:
 * 1. Rubric-colored diagonal wash (top-right → bottom-left) gives each
 *    stage its identity without dominating the photography.
 * 2. Uniform 42% darken floor — same ramp.space-inspired technique as
 *    the Hero, slightly heavier here because the content sits left and
 *    needs more consistent contrast.
 */
.rubric-tour__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rub) 55%, transparent) 0%,
      color-mix(in srgb, var(--rub) 25%, transparent) 35%,
      rgba(0, 0, 0, 0) 70%),
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42));
}
.rubric-tour__content {
  position: absolute;
  left: 64px;
  bottom: 120px;
  right: 360px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
}
.rubric-tour__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.rubric-tour__eyebrow-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
}
.rubric-tour__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
  /* Override the global h2 uppercase rule — italic Garamond lives
   * in mixed case so its serif rhythm and italic ductus can read. */
  text-transform: none;
}
.rubric-tour__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.88);
}
.rubric-tour__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: var(--sp-3);
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rubric-tour__cta:hover {
  color: #fff;
  border-color: #fff;
}
.rubric-tour__indicators {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.rubric-tour__indicator {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: background 220ms var(--ease-out), height 220ms var(--ease-out);
}
.rubric-tour__indicator:hover {
  background: rgba(255, 255, 255, 0.6);
}
.rubric-tour__indicator.is-active {
  background: #fff;
  height: 2px;
}

@media (max-width: 900px) {
  .rubric-tour { height: 76vh; min-height: 540px; }
  .rubric-tour__content {
    left: 24px;
    right: 24px;
    bottom: 110px;
    gap: 18px;
  }
  .rubric-tour__title { font-size: clamp(40px, 10vw, 64px); }
  .rubric-tour__dek   { font-size: 17px; }
  .rubric-tour__indicators { bottom: 40px; }
}

/* ── Feature Spotlight · ramp.space-inspired dark split panel ───
 * Sits between the Editorial Mosaic and the Editorial Break.
 * Left half: dark surface, EB Garamond display headline, dek, CTA.
 * Right half: full-bleed image of the spotlight subject.
 * On narrow viewports collapses to stacked image-over-text. */
.feature-spotlight {
  background: var(--color-dark);
  color: #fff;
}
.feature-spotlight__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.feature-spotlight__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-9) var(--sp-8);
}
.feature-spotlight__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.feature-spotlight__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: #fff;
  text-wrap: balance;
}
.feature-spotlight__dek {
  margin: 0;
  max-width: 480px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.feature-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: var(--sp-3);
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  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);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.feature-spotlight__cta:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.feature-spotlight__media {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.feature-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .feature-spotlight__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .feature-spotlight__text {
    padding: var(--sp-8) var(--sp-6);
    gap: var(--sp-4);
  }
  .feature-spotlight__media {
    min-height: 320px;
    order: -1;
  }
}
@media (max-width: 480px) {
  .feature-spotlight__text { padding: var(--sp-7) var(--sp-5); }
  .feature-spotlight__title { font-size: 32px; }
  .feature-spotlight__dek { font-size: 17px; }
}

/* ── 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); }
}