/* =======================================================================
   qoob8 — "Warum Eisbaden" / The Cold Journal
   Loaded in addition to index.css + home.css + custom.css.

   Covers three things:
     1. The "Warum Eisbaden" nav flyout / mega-menu (desktop + mobile)
     2. The Cold-Journal landing page  (warum-eisbaden.html)
     3. The five category overview pages (cold-journal-*.html)

   Reuses shared classes as-is: .page-shell, .button(-light/-dark/-outline),
   .eyebrow, .home-header, .nav-links, .site-footer, .faq-* ...
   Everything new is namespaced .cj-* so it can't collide with the rest
   of the site. No JS/UI library added — behaviour lives in cold-journal.js.
   ======================================================================= */

:root {
  --cj-ink: var(--ink, #10100f);
  --cj-muted: var(--muted, #686760);
  --cj-line: var(--line, #d8d5cd);
  --cj-paper: var(--paper, #f6f5f4);
  --cj-serif: "Playfair Display", Georgia, serif;
  --cj-header-h: 86px; /* .home-header-inner min-height (desktop) */
  /* evidence badges */
  --cj-ev-strong: #1f5c3d;
  --cj-ev-strong-bg: #e3efe7;
  --cj-ev-early: #6b5a2f;
  --cj-ev-early-bg: #f6f0e6;
  --cj-ev-unclear: #5a564d;
  --cj-ev-unclear-bg: #eceae6;
}

/* =======================================================================
   1 · NAV FLYOUT  (the "Warum Eisbaden" mega-menu)
   ======================================================================= */

/* The wrap is a normal flex child of .nav-links, between the other top-level
   links. It carries no size of its own beyond its trigger row; the panel it
   contains is a full-screen fixed overlay (remarkable.com style). */
.nav-flyout-wrap {
  position: static;
  display: flex;
  align-items: center;
}
.nav-flyout-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* the visible menu item — a real link to the landing page */
.home-header .nav-links a.cj-nav-link {
  padding: 0;
}
/* chevron button: opens/closes the flyout, fully keyboard operable */
.cj-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}
.cj-nav-toggle svg {
  width: 11px;
  height: 11px;
  transition: transform 0.25s ease;
}
.nav-flyout-wrap.is-open .cj-nav-toggle svg {
  transform: rotate(180deg);
}
.home-header .nav-links .cj-nav-toggle {
  color: #fff;
}
.home-header-light:not(.is-scrolled) .nav-links .cj-nav-toggle {
  color: var(--cj-ink);
}

/* Desktop panel text/links stay dark whatever the header theme is (the header
   paints links white on dark pages, and .is-scrolled flips them too). Scoped
   to desktop so the mobile accordion can still inherit the menu's own colour. */
@media (width >= 901px) {
  .home-header .nav-links .cj-flyout,
  .home-header .nav-links .cj-flyout a {
    color: var(--cj-ink);
  }
  .home-header .nav-links .cj-flyout-cat-topics a {
    color: var(--cj-muted);
  }
  .home-header .nav-links .cj-flyout-cat-topics a:hover {
    color: var(--cj-ink);
  }
  .home-header .nav-links .cj-flyout-right,
  .home-header .nav-links .cj-flyout-right a {
    color: var(--cj-ink);
  }

  /* While the flyout is open the whole header bar turns solid white, so the
     navigation sits on one uniform surface instead of the hero image showing
     through behind the other menu items. Applies on every page — the light
     header variant already has dark text/logo, the dark one gets flipped. */
  .home-header:has(.nav-flyout-wrap.is-open) .home-header-bg {
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .home-header:has(.nav-flyout-wrap.is-open) .nav-links a,
  .home-header:has(.nav-flyout-wrap.is-open) .cj-nav-toggle {
    color: var(--cj-ink);
  }
  .home-header:has(.nav-flyout-wrap.is-open) .home-brand img {
    filter: brightness(0);
  }
  .home-header:has(.nav-flyout-wrap.is-open) .home-icon-btn,
  .home-header:has(.nav-flyout-wrap.is-open) .menu-button {
    border-color: #10100f33;
  }
  .home-header:has(.nav-flyout-wrap.is-open) .bag-icon,
  .home-header:has(.nav-flyout-wrap.is-open) .bag-icon::before {
    border-color: var(--cj-ink);
  }
}

/* ---- The panel: full-width bar below the header, only a bottom edge ---- */
.cj-flyout {
  position: fixed;
  top: var(--cj-header-h, 86px);
  left: 0;
  right: 0;
  bottom: auto;
  max-height: calc(100dvh - var(--cj-header-h, 86px));
  overflow-y: auto;
  z-index: 50; /* below the header (60) so the trigger stays visible/clickable */
  background: #fff;
  color: var(--cj-ink);
  border-bottom: 1px solid var(--cj-line);
  box-shadow: 0 22px 50px -26px rgba(16, 16, 15, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}
.nav-flyout-wrap.is-open .cj-flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* the panel spans the viewport; the content is a shell-aligned three-column grid:
   intro (left) · categories (middle) · current post (right) */
.cj-flyout-grid {
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  box-sizing: border-box;
  width: min(1340px, 100% - 8vw);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px) 0 clamp(30px, 3.5vw, 44px);
}

.cj-flyout-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.cj-flyout-intro .cj-flyout-cta {
  margin-top: 4px;
}
.cj-flyout-intro h2 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.03em;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.05;
  margin: 0 0 6px;
}
.cj-flyout-intro p {
  color: var(--cj-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.cj-flyout-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* keep the trailing arrow clear of the underline */
.cj-flyout-cta span {
  text-decoration: none;
}
.cj-flyout-cta:hover {
  opacity: 0.65;
}

/* category list — big editorial links with a thin topic line under each */
.cj-flyout-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}
.cj-flyout-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-header .nav-links a.cj-flyout-cat-title {
  font-family: "Montserrat", var(--font-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding: 0;
  white-space: normal;
}
.home-header .nav-links a.cj-flyout-cat-title:hover {
  opacity: 0.6;
}
.cj-flyout-cat-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}
.home-header .nav-links .cj-flyout-cat-topics a {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  padding: 0;
  white-space: normal;
}
.cj-flyout-cat-topics a:not(:last-child)::after {
  content: "·";
  margin: 0 8px;
  color: var(--cj-line);
}

/* right pane — the current featured article as a small card */
.cj-flyout-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-header .nav-links .cj-flyout-right,
.home-header .nav-links .cj-flyout-right span {
  white-space: normal;
}
.cj-flyout-right-media {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: var(--cj-paper);
}
.cj-flyout-right-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cj-flyout-right-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cj-flyout-right-title {
  font-family: "Montserrat", var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--cj-ink);
}
.cj-flyout-right-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--cj-muted);
}
.cj-flyout-right-ca {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cj-ink);
}
.cj-flyout-right-ca span {
  text-decoration: none;
}
.cj-flyout-right:hover .cj-flyout-right-ca {
  opacity: 0.65;
}

/* shared "kicker" label (category tag on cards) */
.cj-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cj-muted);
}

/* ---- Flyout — tablet / mobile: becomes an inline accordion ---- */
@media (width <= 900px) {
  .nav-flyout-wrap {
    display: block;
    width: 100%;
    border-bottom: 1px solid #ffffff26;
  }
  .home-header-light:not(.is-scrolled) .nav-flyout-wrap {
    border-bottom-color: #10100f1a;
  }
  /* list the "Warum Eisbaden" menu item last, below Kontakt */
  .home-header .nav-links .nav-flyout-wrap {
    order: 1;
    border-bottom: 0;
  }
  .home-header .nav-links a:last-child {
    border-bottom: 1px solid #ffffff26;
  }
  .home-header-light:not(.is-scrolled) .nav-links a:last-child {
    border-bottom-color: #10100f1a;
  }
  .nav-flyout-head {
    justify-content: space-between;
    width: 100%;
  }
  .home-header .nav-links a.cj-nav-link {
    width: auto;
    flex: 1;
    border-bottom: 0;
    padding: 14px 0;
  }
  .cj-nav-toggle {
    width: 44px;
    height: 44px;
    flex: none;
  }
  .cj-nav-toggle svg {
    width: 13px;
    height: 13px;
  }

  .cj-flyout {
    position: static;
    inset: auto;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav-flyout-wrap.is-open .cj-flyout {
    max-height: 1400px;
  }
  .cj-flyout-grid {
    height: auto;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    padding: 4px 0 14px;
  }
  .cj-flyout-intro {
    order: 2;
    gap: 0;
    padding-left: 16px;
  }
  .cj-flyout-intro h2,
  .cj-flyout-intro p,
  .cj-flyout-cat-topics,
  .cj-flyout-right {
    display: none;
  }
  .cj-flyout-intro .cj-flyout-cta {
    margin-top: 0;
    padding-top: 0;
  }
  .cj-flyout-cta {
    color: inherit;
    margin: 6px 0 12px;
  }
  .cj-flyout-cats {
    order: 1;
    display: block;
  }
  /* no divider lines — just indent the sub-items under "Warum Eisbaden" */
  .cj-flyout-cat {
    padding: 9px 0 9px 16px;
    border-top: 0;
  }
  .home-header .nav-links a.cj-flyout-cat-title {
    font-family: "Inter", var(--font-sans);
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 600;
    color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cj-flyout,
  .cj-nav-toggle svg {
    transition: none;
  }
}

/* =======================================================================
   2 · COLD-JOURNAL LANDING PAGE  (warum-eisbaden.html)
   ======================================================================= */

.cj-page {
  background: #fff;
}

/* ---- Hero: full-bleed image + title, same pattern as the other pages ---- */
.cj-page .home-hero {
  min-height: 62vh;
  min-height: 62svh;
  border-bottom: 1px solid var(--cj-line);
}
.cj-page .home-hero-media img {
  object-position: 50% 40%;
}
@media (width > 900px) {
  .cj-page .home-hero-shade {
    background: linear-gradient(90deg, #000000cc 0%, #0000008f 40%, #00000024 72%);
  }
}
@media (width <= 900px) {
  .cj-page .home-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 72vh;
    min-height: 72svh;
  }
  .cj-page .home-hero-media img {
    object-position: 62% 38%;
  }
  .cj-page .home-hero-shade {
    background: linear-gradient(180deg, #0000005c 0%, #00000038 34%, #0000008f 72%, #000000d9 100%);
  }
}
.cj-page .home-hero-content h1,
.cj-page .home-hero-lead {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}
.cj-page .home-hero-content h1 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.05em;
}
.cj-page .home-hero-lead {
  max-width: 42ch;
}
@media (width > 900px) {
  .cj-page .home-hero-content {
    max-width: none;
    width: min(1340px, 100% - 8vw);
    margin: 0 auto;
    padding: clamp(140px, 17vh, 200px) 0 clamp(56px, 8vh, 96px);
  }
}
@media (width <= 900px) {
  .cj-page .home-hero-content {
    padding-top: 96px;
    padding-bottom: 28px;
  }
}
.cj-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--cj-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.cj-meta > * + *::before {
  content: "·";
  margin-right: 14px;
  color: var(--cj-line);
}
/* ---- Generic section frame ---- */
.cj-section {
  padding: clamp(70px, 9vw, 120px) 0;
  border-bottom: 1px solid var(--cj-line);
}
.cj-section.is-paper {
  background: var(--cj-paper);
}
.cj-section.is-ink {
  background: var(--cj-ink);
  color: #fff;
}
.cj-section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.cj-section-head h2 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.04em;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  margin: 10px 0 0;
}
.cj-section-head p {
  color: var(--cj-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 16px 0 0;
}
.cj-section.is-ink .cj-section-head p {
  color: #b9b7b0;
}
.cj-section.is-ink .cj-kicker {
  color: #8a8880;
}
/* the science heading stays on one line on larger screens */
#cj-science-title {
  white-space: nowrap;
}
@media (width <= 680px) {
  #cj-science-title {
    white-space: normal;
  }
}

/* ---- Section 2 · category grid (four equal cards) ---- */
.cj-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.cj-cat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--cj-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cj-cat-card:hover {
  transform: translateY(-3px);
  border-color: #a9a69f;
}
.cj-cat-card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.cj-cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-cat-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cj-cat-card-body h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}
.cj-cat-card-body p {
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.cj-cat-card-body .cj-flyout-cta {
  margin-top: auto;
  padding-top: 12px;
}

/* ---- Section 3 · "Neu im Cold Journal" — lead + compact list ---- */
.cj-latest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.cj-latest-secondary {
  display: grid;
  gap: 18px;
  align-content: start;
}
.cj-article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cj-article-card .cj-article-media {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.cj-article-card.is-lead {
  max-width: 82%;
}
.cj-article-card.is-lead .cj-article-media {
  /* keep the lead image roughly as tall as the three stacked cards on the
     right so the row stays balanced and fits without much scrolling */
  aspect-ratio: 16 / 9;
}
.cj-article-card.is-lead .cj-article-media img {
  object-position: center 46%;
}
.cj-latest-secondary .cj-article-card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.cj-latest-secondary .cj-article-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cj-latest-secondary .cj-article-media {
  flex: 0 0 116px;
  aspect-ratio: 1 / 1;
}
.cj-article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-article-card h3 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1.22;
  margin: 0;
}
.cj-latest-secondary .cj-article-card h3 {
  font-size: 14px;
}
.cj-article-card.is-lead h3 {
  font-size: clamp(19px, 2vw, 25px);
  margin: 4px 0 0;
}
.cj-article-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cj-article-card p {
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 0;
}
.cj-latest-secondary .cj-article-card p {
  display: none;
}
.cj-latest-secondary .cj-article-card .cj-meta {
  margin-top: 4px;
  font-size: 11px;
  gap: 4px 10px;
}
.cj-latest-secondary .cj-meta > * + *::before {
  margin-right: 10px;
}

/* ---- Section 4 · science slider ---- */
.cj-science-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--cj-line) transparent;
}
.cj-science-slider::-webkit-scrollbar {
  height: 6px;
}
.cj-science-slider::-webkit-scrollbar-thumb {
  background: var(--cj-line);
  border-radius: 999px;
}
.cj-science-grid {
  display: flex;
  gap: 20px;
}
.cj-science-card {
  flex: 0 0 clamp(280px, 44%, 460px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--cj-line);
  border-radius: 16px;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cj-science-card h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 4px 0 0;
}
.cj-science-card p {
  color: var(--cj-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.cj-science-card .cj-meta {
  margin-top: 2px;
  font-size: 12px;
}
.cj-science-card .cj-flyout-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
}

.cj-trust {
  margin-top: 30px;
  border: 1px solid var(--cj-line);
  border-radius: 16px;
  background: #fff;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 20px 28px;
  align-items: center;
}
.cj-trust dl {
  margin: 0;
}
.cj-trust dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cj-muted);
  margin-bottom: 4px;
}
.cj-trust dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cj-ink);
}
.cj-trust .cj-flyout-cta {
  white-space: nowrap;
}

/* ---- Section 5 · routines (image-strong) ---- */
.cj-routine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cj-routine-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.cj-routine-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cj-routine-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0000 18%, #00000030 46%, #000000e6);
}
.cj-routine-card > div {
  position: relative;
  z-index: 1;
  padding: 20px;
}
.cj-routine-card .cj-kicker {
  color: #d8d5cd;
  margin-bottom: 6px;
}
.cj-routine-card h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.cj-routine-card .cj-meta {
  margin-top: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.cj-routine-card .cj-meta > * + *::before {
  color: #ffffff8c;
  margin-right: 10px;
}

/* ---- Section 6 · person / member story ---- */
.cj-person {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.cj-person-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 260px;
}
.cj-person-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-person blockquote {
  margin: 0;
}
.cj-person blockquote p {
  font-family: "Inter", var(--font-sans);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.cj-section.is-ink .cj-person blockquote p {
  color: #fff;
}
.cj-person-name {
  font-size: 15px;
  font-weight: 700;
}
.cj-person-role {
  color: var(--cj-muted);
  font-size: 13px;
  margin-top: 2px;
}
.cj-section.is-ink .cj-person-role {
  color: #b9b7b0;
}
.cj-person-cta {
  margin-top: 26px;
}
.cj-person-routine {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #ffffff12;
  font-size: 13.5px;
  line-height: 1.6;
}
.cj-section:not(.is-ink) .cj-person-routine {
  background: var(--cj-paper);
  color: var(--cj-muted);
}

/* ---- Section 7 · Cold Spaces ---- */
.cj-spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cj-space-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cj-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.cj-space-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.cj-space-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-space-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cj-space-body h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0;
}
.cj-space-body p {
  color: var(--cj-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.cj-space-body .cj-flyout-cta {
  margin-top: auto;
  padding-top: 10px;
}
.cj-spaces-foot {
  margin-top: 34px;
}

/* ---- Section 8 · Genesis CTA (quiet product bridge) ---- */
.cj-genesis {
  border-bottom: 0;
}
.cj-genesis-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.cj-genesis h2 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.05em;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 0.98;
  margin: 12px 0 0;
}
.cj-genesis p {
  color: #b9b7b0;
  font-size: 17px;
  line-height: 1.6;
  margin: 20px 0 30px;
  max-width: 46ch;
}
.cj-genesis-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cj-genesis-media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.cj-genesis-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =======================================================================
   3 · CATEGORY OVERVIEW PAGES  (cold-journal-*.html)
   ======================================================================= */
.cj-cat-hero {
  padding: clamp(102px, 11vw, 114px) 0 clamp(38px, 5vw, 56px);
  border-bottom: 1px solid var(--cj-line);
}
.cj-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cj-muted);
  margin-bottom: 22px;
}
.cj-breadcrumb a:hover {
  color: var(--cj-ink);
}
.cj-breadcrumb span[aria-current] {
  color: var(--cj-ink);
}
.cj-cat-hero h1 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.05em;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 0.98;
  margin: 0 0 18px;
}
.cj-cat-hero p {
  color: var(--cj-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: 78ch;
  margin: 0;
}

.cj-cat-featured {
  padding: clamp(48px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--cj-line);
}
.cj-cat-featured-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cj-cat-featured-media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-width: 80%;
}
.cj-cat-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cj-cat-featured-body h2 {
  font-family: "Montserrat", var(--font-sans);
  letter-spacing: -0.03em;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.12;
  margin: 12px 0;
}
.cj-cat-featured-body p {
  color: var(--cj-muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 52ch;
}
.cj-cat-featured-body .button {
  margin-top: 22px;
}

.cj-cat-list {
  padding: clamp(56px, 7vw, 90px) 0 clamp(70px, 9vw, 120px);
}
.cj-cat-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
  margin-bottom: 56px;
}
.cj-cat-list-grid .cj-article-card p {
  display: block;
}
.cj-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-ink);
}
.cj-back-link:hover {
  opacity: 0.6;
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (width <= 1100px) and (width >= 901px) {
  .cj-flyout-grid {
    gap: clamp(20px, 3vw, 40px);
  }
}
@media (width <= 1100px) {
  .cj-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cj-spaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cj-spaces-grid .cj-space-card:last-child {
    grid-column: 1 / -1;
  }
  .cj-routine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cj-trust {
    grid-template-columns: repeat(2, 1fr);
  }
  .cj-trust .cj-flyout-cta {
    grid-column: 1 / -1;
  }
  .cj-cat-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 900px) {
  .cj-latest-grid,
  .cj-person,
  .cj-genesis-inner,
  .cj-cat-featured-inner {
    grid-template-columns: 1fr;
  }
  .cj-article-card.is-lead {
    max-width: none;
  }
}

@media (width <= 640px) {
  .cj-spaces-grid,
  .cj-cat-list-grid,
  .cj-trust {
    grid-template-columns: 1fr;
  }
  /* Kategorien: 2×2 so all four fit on one screen */
  .cj-section {
    padding: clamp(48px, 12vw, 64px) 0;
  }
  .cj-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cj-cat-card-body {
    padding: 12px 13px 15px;
    gap: 4px;
  }
  .cj-cat-card-body h3 {
    font-size: 15px;
  }
  .cj-cat-card-body p {
    display: none;
  }
  /* "Kälte, die in Deinen Alltag passt": horizontal slider, next card peeking */
  .cj-routine-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .cj-routine-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }
  /* "Neu im Cold Journal": horizontal slider, next card peeking */
  .cj-latest-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .cj-latest-secondary {
    display: contents;
  }
  .cj-latest-grid .cj-article-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .cj-article-card.is-lead .cj-article-media {
    aspect-ratio: 16 / 10;
  }
  .cj-latest-secondary .cj-article-card {
    flex-direction: column;
    gap: 12px;
  }
  .cj-latest-secondary .cj-article-media {
    flex-basis: auto;
    aspect-ratio: 16 / 10;
  }
  .cj-latest-secondary .cj-article-card p {
    display: block;
  }
  .cj-latest-secondary .cj-article-card h3 {
    font-size: 15px;
  }
  /* card meta: category alone on line 1, reading time + date together on line 2
     instead of an awkward mid-item wrap */
  .cj-article-card .cj-meta,
  .cj-science-card .cj-meta,
  .cj-routine-card .cj-meta {
    row-gap: 2px;
  }
  .cj-article-card .cj-meta > :first-child,
  .cj-science-card .cj-meta > :first-child,
  .cj-routine-card .cj-meta > :first-child {
    flex-basis: 100%;
  }
  .cj-article-card .cj-meta > :nth-child(2)::before,
  .cj-science-card .cj-meta > :nth-child(2)::before,
  .cj-routine-card .cj-meta > :nth-child(2)::before {
    content: none;
  }
}