/* ============================================================
   CASE STUDY — DIE GESCHICHTE SUCHT IHRE FORM (subpage)
   Dritte Case Study. Triptychon: Methode (O'Neal) ·
   Werk (Drees & Sommer) · Quelle (diese Seite).
   Builds on styles.css + case-oneal.v2.css.
   ============================================================ */

/* Section padding mirror — keep prose centered like other cases */
#statement,
#deepdance,
#macrolicious,
#dusty-roads,
#the-signal,
#verbindung {
  padding-top: clamp(80px, 9vw, 140px);
  padding-bottom: clamp(80px, 9vw, 140px);
}
#statement > *,
#deepdance > *,
#macrolicious > *,
#dusty-roads > *,
#the-signal > *,
#verbindung > * {
  max-width: var(--page-max, 1600px);
  margin-left: auto;
  margin-right: auto;
}

/* Film player matches landing-page showreel — uses showcase-frame chrome */

.cf-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
.cf-mono.dim { color: var(--corp); opacity: 0.7; }

/* ──────────────────────────────────────────────────────────
   01 — HERO  Mosaic of 4 frames, layered grade + content overlay
   ────────────────────────────────────────────────────────── */
.cf-hero {
  position: relative;
  min-height: 96vh;
  padding: 24px var(--pad-x) 56px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.cf-hero-loop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cf-hero-loop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-hero-loop-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,28,41,0.55) 0%, rgba(15,28,41,0.10) 18%, rgba(15,28,41,0.10) 50%, rgba(15,28,41,0.92) 100%),
    linear-gradient(90deg, rgba(15,28,41,0.55) 0%, rgba(15,28,41,0.18) 50%, rgba(15,28,41,0.40) 100%);
  pointer-events: none;
}

.cf-hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 0;
}
.cf-mosaic-tile {
  position: relative;
  overflow: hidden;
  background: #050a10;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1100ms cubic-bezier(.2,.8,.2,1), transform 1400ms cubic-bezier(.2,.8,.2,1);
}
/* Progressive enhancement: only stage entry if React mounted before
   first paint and applied the gate class. Default is fully visible. */
.cf-hero-mosaic.is-staged .cf-mosaic-tile {
  opacity: 0;
  transform: scale(1.04);
}
.cf-hero-mosaic.is-staged.is-in .cf-mosaic-tile {
  opacity: 1;
  transform: scale(1);
}
.cf-mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-tile-placeholder {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.035) 0,
      rgba(255,255,255,0.035) 10px,
      rgba(255,255,255,0.015) 10px,
      rgba(255,255,255,0.015) 20px
    ),
    linear-gradient(180deg, rgba(232,242,245,0.05), rgba(232,242,245,0.015));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--ink-2);
}
.cf-tile-placeholder-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--corp);
  opacity: 0.85;
}
.cf-tile-placeholder-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: var(--letter-display);
  text-transform: uppercase;
  color: var(--ink);
}
.cf-tile-placeholder-note {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 28ch;
  opacity: 0.75;
}
.cf-tile-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,28,41,0.0) 0%, rgba(15,28,41,0.0) 35%, rgba(15,28,41,0.55) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(15,28,41,0.5) 100%);
  pointer-events: none;
}
.cf-tile-corner {
  position: absolute;
  bottom: 14px;
  left: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.cf-tile-corner .cf-tile-n {
  color: var(--corp);
}

/* Final grade over mosaic — pulls everything to one cinematic key
   and ensures the headline reads cleanly */
.cf-mosaic-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,28,41,0.55) 0%, rgba(15,28,41,0.10) 18%, rgba(15,28,41,0.10) 50%, rgba(15,28,41,0.92) 100%),
    linear-gradient(90deg, rgba(15,28,41,0.55) 0%, rgba(15,28,41,0.20) 50%, rgba(15,28,41,0.40) 100%);
  pointer-events: none;
}

/* Top bar mirrors blueway/oneal */
.cf-hero-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cf-hero-content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 1400px;
  padding: 14vh 0 6vh;
  transition: opacity 900ms cubic-bezier(.2,.8,.2,1);
  opacity: 1;
}
/* default visible; the gate class only applies when React explicitly
   sets it before mount, otherwise the hero text is shown immediately. */

.cf-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.cf-hero-meta .case-client-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--highlight);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(0, 255, 174, 0.06);
  border: 1px solid rgba(0, 255, 174, 0.20);
  box-shadow: 0 0 24px rgba(0, 255, 174, 0.08);
}
.cf-hero-meta .case-year-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.72;
}

.cf-hero-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 8.4vw, 144px);
  line-height: 0.94;
  letter-spacing: var(--letter-display);
  margin: 0;
  text-wrap: balance;
  text-transform: uppercase;
  max-width: 14ch;
  color: var(--ink);
}
.cf-hero-display em {
  font-weight: 300;
  font-style: italic;
  color: var(--highlight);
}

.cf-hero-sub {
  margin: 28px 0 0;
  max-width: 56ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.92;
  text-wrap: pretty;
}

.cf-hero-tags {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.cf-hero-tags .sep { opacity: 0.4; color: var(--corp); }

.cf-hero-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.78;
}
.cf-hero-bottom .scroll-tick {
  width: 36px; height: 1px;
  background: currentColor;
  position: relative; overflow: hidden;
  display: inline-block;
  margin-left: 12px;
}
.cf-hero-bottom .scroll-tick::after {
  content: '';
  position: absolute; left: -36px;
  width: 36px; height: 1px;
  background: var(--highlight);
  box-shadow: 0 0 8px var(--highlight);
  animation: scrolltick 2.4s cubic-bezier(.6,.0,.2,1) infinite;
}

@media (max-width: 720px) {
  .cf-hero { min-height: 88vh; padding-bottom: 40px; }
  .cf-hero-content { padding: 10vh 0 3vh; }
  .cf-hero-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-auto-rows: 0; }
}

/* ──────────────────────────────────────────────────────────
   02 — STATEMENT
   ────────────────────────────────────────────────────────── */
.cf-statement {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.cf-statement-mark {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.cf-statement-line {
  width: 56px;
  height: 1px;
  background: var(--corp);
  opacity: 0.7;
}
.cf-statement-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--corp);
}
.cf-statement-headline {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.0;
  letter-spacing: var(--letter-display);
  text-transform: uppercase;
  margin: 0 0 36px;
  text-wrap: balance;
  color: var(--ink);
}
.cf-statement-headline .dim {
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  color: var(--highlight);
  opacity: 0.95;
}
.cf-statement-body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 60ch;
}
.cf-statement-body p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.92;
  margin: 0;
  text-wrap: pretty;
}
.cf-statement-body p.cf-statement-coda {
  font-style: italic;
  color: var(--ink-2);
  font-size: clamp(16px, 1.3vw, 20px);
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}
@media (max-width: 980px) {
  .cf-statement { grid-template-columns: 1fr; gap: 28px; }
  .cf-statement-headline,
  .cf-statement-body { grid-column: 1; }
}

/* ──────────────────────────────────────────────────────────
   03–06 — FILM SECTIONS  (one module, repeated)
   ────────────────────────────────────────────────────────── */
.cf-film-section + .cf-film-section {
  border-top: 1px solid var(--line-light);
}

.cf-film-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  margin-bottom: 22px;
}
@media (max-width: 980px) {
  .cf-film-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}

.cf-film-titleblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-film-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7.4vw, 116px);
  line-height: 0.94;
  letter-spacing: var(--letter-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.cf-film-year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--corp);
}
.cf-film-quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.25;
  color: var(--highlight);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 28ch;
  padding-left: 0;
  border-left: 0;
}

.cf-film-context {
  margin: 0 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.85;
}

/* ── Film showcase player overrides ──
   Reuses .showcase-frame / .showcase-inner / .showcase-corner / .showcase-cta
   from styles.css. Adds: hide overlays + reveal controls when sound is on. */

/* Defensive sizing — guarantee the player frame reserves a 16:9 box even
   if the <video>/HLS child fails to give the inner element intrinsic
   dimensions at certain breakpoints (observed: container collapsed at 980px). */
.cf-film-showcase .showcase-inner {
  min-height: 240px;
  aspect-ratio: 16 / 9;
}
.cf-film-showcase .showcase-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-film-showcase.with-sound .showcase-corner,
.cf-film-showcase.with-sound .showcase-vignette {
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.cf-film-showcase .showcase-corner,
.cf-film-showcase .showcase-vignette {
  transition: opacity 360ms ease;
}
.cf-film-showcase .showcase-controls {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}
.cf-film-showcase.with-sound .showcase-controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Mobile: nur die unteren Corner-Overlays ausblenden — bottom-left dopplet
   Title/Kontext (stehen bereits über dem Player), bottom-right ist redundant
   mit der zentrierten Sound-CTA. Top-Corners bleiben (Tool/Year + Film-Nr). */
/* Intermediate + mobile: anchor bottom labels at the actual frame bottom
   (not at default bottom:60px which collides with the centered Sound CTA),
   shrink them, and lift the CTA above. */
@media (max-width: 980px) {
  .cf-film-showcase .showcase-corner.bottom-left,
  .cf-film-showcase .showcase-corner.bottom-right {
    bottom: 0;
    padding: 12px 14px;
  }
  .cf-film-showcase .showcase-corner.bottom-right {
    text-align: right;
    align-items: flex-end;
    max-width: 45%;
  }
  .cf-film-showcase .showcase-corner.bottom-left {
    max-width: 55%;
  }
  .cf-film-showcase .showcase-corner.bottom-left .corner-title {
    font-size: 16px;
    line-height: 1.15;
  }
  .cf-film-showcase .showcase-corner.bottom-right span {
    font-size: 10px;
  }
  /* Lift the centered Sound CTA so it doesn't overlap the bottom labels */
  .cf-film-showcase .showcase-cta {
    top: 40%;
  }
}

@media (max-width: 720px) {
  .cf-film-showcase .showcase-corner {
    padding: 10px 12px;
    font-size: 10px;
  }
  .cf-film-showcase .showcase-corner.bottom-left .corner-client,
  .cf-film-showcase .showcase-corner.bottom-right span {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .cf-film-showcase .showcase-corner.bottom-left .corner-title {
    font-size: 13px;
  }
}

/* Very narrow: drop the right-side meta entirely to avoid two-column
   crowding; keep the brand/title on the left. */
@media (max-width: 520px) {
  .cf-film-showcase .showcase-corner.bottom-right {
    display: none;
  }
  .cf-film-showcase .showcase-corner.bottom-left {
    max-width: calc(100% - 24px);
  }
}

/* Native fullscreen on the <video> element — let the browser show
   default controls; ensure no crop. */
.cf-film-showcase .showcase-video:fullscreen,
.cf-film-showcase .showcase-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
}

/* Fake fullscreen — used when the iframe sandbox blocks the real Fullscreen API.
   Fixes the frame to fill the viewport. */
.cf-film-showcase.is-fake-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  z-index: 9999;
  border-radius: 0;
  background: #000;
  margin: 0 !important;
}
.cf-film-showcase.is-fake-fs .showcase-inner {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.cf-film-showcase.is-fake-fs .showcase-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cf-film-showcase.is-fake-fs .showcase-corner,
.cf-film-showcase.is-fake-fs .showcase-vignette {
  opacity: 0;
  pointer-events: none;
}
/* Larger hit area + grabbable dot for the scrub bar */
.cf-film-showcase .ctrl-progress {
  height: 22px;
  touch-action: none;
}
.cf-film-showcase .ctrl-progress-dot {
  width: 12px; height: 12px;
  cursor: grab;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cf-film-showcase .ctrl-progress:hover .ctrl-progress-dot,
.cf-film-showcase .ctrl-progress:active .ctrl-progress-dot {
  transform: translate(-50%, 0) scale(1.25);
  box-shadow: 0 0 0 6px rgba(0, 255, 209, 0.18), 0 0 18px rgba(0, 255, 209, 0.65);
}
.cf-film-showcase .ctrl-progress:active .ctrl-progress-dot {
  cursor: grabbing;
}
/* Headphones CTA — match showcase-cta layout but use a ring (not a play triangle) */
.cf-film-showcase .showcase-cta.cf-headphones-cta .showcase-cta-ring svg path,
.cf-film-showcase .showcase-cta.cf-headphones-cta .showcase-cta-ring svg rect {
  stroke: currentColor;
  fill: none;
}

/* Placeholder fallback (no hlsSrc) */
.cf-film-player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-film-player-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-film-player-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(15,28,41,0.6) 100%);
  pointer-events: none;
}

/* Foot line under each film player */
.cf-film-foot.showcase-foot {
  margin-top: 18px;
  margin-bottom: 8px;
}

/* Reflection — Ich-Form text under each player */
.cf-film-reflection {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
@media (max-width: 980px) {
  .cf-film-reflection { grid-template-columns: 1fr; gap: 24px; }
}
.cf-film-reflection-mark {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--corp);
  padding-top: 8px;
}
.cf-film-reflection-rule {
  width: 40px;
  height: 1px;
  background: var(--corp);
  opacity: 0.5;
}
.cf-film-reflection-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cf-film-reflection-body p {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.92;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ──────────────────────────────────────────────────────────
   07 — VERBINDUNG
   ────────────────────────────────────────────────────────── */
.cf-verbindung-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 116px);
  line-height: 0.94;
  letter-spacing: var(--letter-display);
  text-transform: uppercase;
  margin: 0 0 56px;
  text-wrap: balance;
  max-width: 18ch;
  color: var(--ink);
}
.cf-verbindung-headline em {
  font-weight: 300;
  font-style: italic;
  color: var(--highlight);
}

.cf-verbindung-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
@media (max-width: 980px) {
  .cf-verbindung-grid { grid-template-columns: 1fr; gap: 40px; }
}

.cf-verbindung-prose {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 60ch;
}
.cf-verbindung-prose p {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.92;
  text-wrap: pretty;
}
.cf-verbindung-prose .em-highlight {
  color: var(--highlight);
  font-style: italic;
  font-weight: 300;
}
.cf-verbindung-prose em {
  color: var(--ink);
  font-style: italic;
  opacity: 0.95;
}
.cf-verbindung-prose p.cf-verbindung-coda {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.96;
}

.cf-verbindung-aside {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 28px;
  border-radius: 10px;
  background: rgba(232, 242, 245, 0.025);
  border: 1px solid var(--line-light);
}
.cf-verbindung-aside-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
}
.cf-verbindung-aside-row:last-child { border-bottom: 0; }
.cf-verbindung-aside-row.is-self {
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(0, 255, 174, 0.07), transparent 70%);
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
}
.cf-verbindung-aside-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: var(--letter-display);
  color: var(--corp);
  line-height: 1;
}
.cf-verbindung-aside-row.is-self .cf-verbindung-aside-n {
  color: var(--highlight);
}
.cf-verbindung-aside-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-verbindung-aside-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--letter-mono);
  text-transform: uppercase;
  color: var(--corp);
}
.cf-verbindung-aside-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: var(--letter-display);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.cf-verbindung-aside-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────
   Reveal helpers fallback (in case styles.css's reveal-init
   would hide content) — keep visible if JS already toggled.
   ────────────────────────────────────────────────────────── */
.cf-section.reveal-init { opacity: 1; transform: none; }
.cf-section.reveal-in { opacity: 1; transform: none; }