/* ============================================================
   join.code.berlin — Landing page
   Mobile-first. All tokens inherited from ./colors_and_type.css.
   CODE is square: radius 0 everywhere.
   ============================================================ */

@import "./colors_and_type.css";

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  overflow-x: hidden;
}

/* Fix 3: account for fixed header — content starts below nav bar.
   --nav-height is defined in the HERO section tokens block below.
   Fallback 4rem (64px) in case of parse-order edge cases. */
body {
  padding-top: var(--nav-height, 4rem);
}

body { font-size: 18px; }

img, svg, video, iframe { display: block; max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: inherit; text-decoration: none; border-bottom: 0; }

/* ============================================================
   Container
   ============================================================ */
.code-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px)  { .code-container { max-width: 760px;  padding: 0 var(--space-7); } }
@media (min-width: 1200px) { .code-container { max-width: 1200px; padding: 0 var(--space-8); } }

/* ============================================================
   Eyebrow — `// UPPERCASE MONO`
   ============================================================ */
.code-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--space-3);
  display: inline-block;
}
.code-eyebrow::before { content: "// "; color: var(--fg-3); }

/* Statement variant — long claims/taglines.
   Drops the "// " prefix; renders as italic sans, slightly larger,
   sentence-case with tighter letter-spacing so long strings read
   as a quote-style tagline (not a category label). */
.code-eyebrow--statement {
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.45;
  max-width: 56ch;
}
.code-eyebrow--statement::before { content: none; }

/* ============================================================
   Buttons — 0 radius, DM Mono uppercase, trailing > chevron.
   Heights match design-system tokens: 40px default, 36px small.
   Text wraps (no cutoff on narrow screens).
   ============================================================ */
.code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: normal;
  text-align: left;
  width: auto;
  transition:
    background var(--dur-color) var(--ease-tailwind),
    color var(--dur-color) var(--ease-tailwind),
    border-color var(--dur-color) var(--ease-tailwind),
    transform var(--dur-quick) var(--ease-standard);
}
.code-btn__label { flex: 0 1 auto; }
.code-btn__chev  { flex: 0 0 auto; font-size: 14px; line-height: 1; opacity: 0.9; transition: transform var(--dur-medium) var(--ease-spring); }
.code-btn:hover .code-btn__chev { transform: translateX(3px); }

.code-btn--full  { width: 100%; padding: 10px 16px; min-height: 44px; justify-content: space-between; }
.code-btn--small { min-height: 32px; padding: 0 12px; font-size: 11px; gap: 12px; }

.code-btn--primary        { background: var(--cta); color: var(--cta-ink); }
.code-btn--primary:hover  { background: var(--cta-hover); }
.code-btn--primary:active { transform: translateY(1px); }

.code-btn--ghost-light       { background: transparent; color: var(--fg-1); border: 1px solid rgba(255,255,255,0.45); }
.code-btn--ghost-light:hover { border-color: var(--fg-1); background: rgba(255,255,255,0.04); }

/* ============================================================
   Site header — floating island matching code.berlin's nav.
   4px gap to viewport on all sides, 10px radius (frosted-glass
   token), blurred dark bg with 1px grey border. Theme-swaps
   dark→light when user scrolls past the dark hero.
   Visual-only mirror of code.berlin — content stays Logo + 1 CTA.
   ============================================================ */
.site-header {
  position: fixed;
  top: var(--space-1);              /* 4px — matches code.berlin */
  left: var(--space-1);
  right: var(--space-1);
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3.25rem, 5.5vh + 2rem, 4.5rem);   /* ~52–72px fluid */
  padding-inline: clamp(var(--space-4), 2.5vw, var(--space-6));

  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid rgb(95, 95, 95);
  border-radius: var(--radius-window);   /* 10px — frosted-glass token */

  transition:
    background 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

/* Scroll-past-hero: theme flip to light (mirrors code.berlin behaviour
   where the header swaps to light when entering light sections). */
.site-header--scrolled {
  background: rgba(244, 244, 244, 0.9);
  border-color: rgb(200, 200, 200);
  color: var(--light-fg-1);
}
.site-header--scrolled .site-header__logo { filter: invert(1); }

/* Inner row — aligns with page container max-width.
   Single row: Logo left, CTA right. */
.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transition: filter 0.3s ease-in-out;
}
/* Fluid logo height: ~15px → 18px */
.site-header__logo {
  height: clamp(0.9375rem, 1.1vw + 0.5rem, 1.125rem);
  width: auto;
  display: block;
}

.site-header__actions { flex: 0 0 auto; }
.site-header__actions .code-btn { white-space: nowrap; flex: 0 0 auto; }
.site-header__actions .code-btn__label { flex: 0 0 auto; }

/* Mobile (<48rem): drop the "Jetzt " prefix so "Bewerben" fits */
.show-sm-up { display: none; }
@media (min-width: 48rem) {
  .show-sm-up { display: inline; }
}

/* ============================================================
   Sections — variation via background, NOT via hairline rules.
   Generous vertical rhythm — every section gets room to breathe.
   ============================================================ */
.section { padding: var(--space-8) 0; position: relative; }
@media (min-width: 768px)  { .section { padding: var(--space-9) 0; } }

.section__h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(30px, 6.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
  max-width: 20ch;
}

/* ============================================================
   HERO — BG matches code.berlin: #111111 (near-black, not pure black).
   Pattern variant controlled via ?hero=v13a|v13b|p0 URL param.
   v13a (default) = green dot-grid halo behind video
   v13b           = glitch-mint full-spectrum halo behind video
   p0             = no pattern (baseline)
   Top padding: --nav-height offsets fixed header.
   ============================================================ */

/* --- Nav-height offset token ---
   Floating nav: top:4px + nav height (≤72px) + small visual buffer.
   Kept tight so the hero starts close under the floating island
   (matches code.berlin's compact nav-to-content relationship). */
:root {
  --nav-height: 4rem;     /* 64px mobile: 4 + 52 + 8 */
  --page-gutter: 1.25rem;
  --container-max: 75rem; /* 1200px */
}
@media (min-width: 48rem) {
  :root { --nav-height: 5rem; }   /* 80px desktop: 4 + 72 + 4 */
}

.hero {
  position: relative;
  isolation: isolate;
  /* body already has padding-top: --nav-height, so hero just needs its own top space */
  padding: var(--space-7) 0 var(--space-8);
  /* Fix 4: code.berlin hero BG = #111111, NOT pure #000 */
  background: #111111;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding: var(--space-8) 0 var(--space-9); }
}


/* --- Inner: mobile-first single column (flex), desktop two-column (grid).
   DOM order of .hero__inner direct children (Reveal wrappers):
     :nth-child(1) eyebrow
     :nth-child(2) headline (h1)
     :nth-child(3) lead paragraph
     :nth-child(4) video wrapper
     :nth-child(5) partners block
     :nth-child(6) CTA row
   Mobile: single flex column; desktop (≥64rem): 2-col grid where video
   moves to the right column and spans the full height of the text stack. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container-max), calc(100% - 2 * var(--page-gutter)));
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (min-width: 64rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-6), 5vw, var(--space-8));
    align-items: start;
  }
  /* Video sits in column 2, spanning only eyebrow+headline+lead rows
     so it visually anchors next to the headline (not floating down
     toward the CTA). Partners and CTA flow below in column 1. */
  .hero__inner > :nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    margin: 0;
  }
  .hero__inner > :nth-child(1),
  .hero__inner > :nth-child(2),
  .hero__inner > :nth-child(3),
  .hero__inner > :nth-child(5),
  .hero__inner > :nth-child(6) {
    grid-column: 1;
  }
  .hero__inner > :nth-child(3) { max-width: 44ch; }
}

.hero__headline {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: clamp(2.5rem, 8.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
  max-width: 100%;
}
@media (min-width: 48rem) {
  .hero__headline { max-width: 16ch; }
}

.hero__lead {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--space-7);
  max-width: 58ch;
}
.hero__lead strong { color: var(--fg-1); font-weight: 500; }

/* ---- Hero CTA row ----
   Mobile: row centers the button, button is full container-width.
   Tablet+: row left-aligned, button auto-width.
   Fix 1: extra margin-top ensures clear separation from video/halo area. */
.hero__cta-row {
  width: 100%;
  display: flex;
  justify-content: center;   /* mobile: center */
  margin-top: 0;              /* partners already carries the space-5 gap — no doubled spacing */
}
@media (min-width: 48rem) {
  .hero__cta-row {
    justify-content: flex-start;  /* desktop: left */
  }
}

/* ---- Hero CTA button ----
   Mobile: full-width, prominent block-padding, slightly larger font.
   Tablet+: auto-width, left-aligned. */
.hero__cta-row .code-btn--primary {
  width: 100%;
  justify-content: space-between;
  padding-block: clamp(1rem, 4vw, 1.35rem);
  padding-inline: 1.5rem;
  font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
}
@media (min-width: 48rem) {
  .hero__cta-row .code-btn--primary {
    width: auto;
    justify-content: flex-start;
    padding-block: clamp(0.8rem, 1.8vw, 1.1rem);
    padding-inline: 1.5rem;
    font-size: 0.8125rem;
  }
}

/* ---- Video wrapper — contains halo + video ----
   Fix 1: overflow visible so halo bleeds top/left/right.
   clip-path allows negative inset on 3 sides but clips at bottom
   so halo does NOT paint over the partner logos or CTA below. */
.hero__video-wrapper {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0 0 var(--space-6);
  overflow: visible;
  /* Clip bottom flush at wrapper edge; allow ~28px bleed on other 3 sides */
  clip-path: inset(clamp(-1rem, -2.5vw, -1.25rem) clamp(-1rem, -2.5vw, -1.25rem) 0 clamp(-1rem, -2.5vw, -1.25rem));
}

/* ---- Halo element — sits BEHIND the video ----
   Fix 1: tight uniform bleed (~20-30px) on all 4 sides.
   wrapper overflow:hidden + padding-bottom clips and reveals the
   bottom bleed so it shows as a thin fringe (like reference shots).
   z-index: 0. Video sits on z-index: 1 above it. */
.hero__video-halo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* ~20-30px uniform bleed beyond video on all sides */
  inset: clamp(-1rem, -2.5vw, -1.25rem);
  background-repeat: repeat;
  background-size: cover;
}

/* ---- v13a — Green Dot-Grid Halo ----
   pumpkin-dot-grid.png hue-rotated to mint/green.
   screen blend on #111 BG renders as luminous green dots.
   Radial mask: fully opaque at edges, fades toward video center.
   Fix 1: tighter inset = halo only ~20-30px beyond video edge. */
.hero__video-halo--v13a {
  background-image: url("./assets/patterns/pumpkin-dot-grid.png");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: hue-rotate(120deg) saturate(1.3) brightness(1.1);
  -webkit-mask-image: radial-gradient(
    ellipse 70% 65% at center,
    transparent 30%,
    rgba(0,0,0,0.6) 55%,
    black 80%
  );
  mask-image: radial-gradient(
    ellipse 70% 65% at center,
    transparent 30%,
    rgba(0,0,0,0.6) 55%,
    black 80%
  );
}

/* ---- v13b — Glitch-Mint Full-Spectrum Halo ----
   glitch-mint-full-spectrum.png — vivid multi-color glitch tiles.
   screen blend. Dual-direction fade: visible at outer edges,
   transparent toward center so video stays clean. */
.hero__video-halo--v13b {
  background-image: url("./assets/patterns/glitch-mint-full-spectrum.png");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(
    ellipse 65% 60% at center,
    transparent 28%,
    rgba(0,0,0,0.5) 50%,
    black 76%
  );
  mask-image: radial-gradient(
    ellipse 65% 60% at center,
    transparent 28%,
    rgba(0,0,0,0.5) 50%,
    black 76%
  );
}

/* ---- Video element inside wrapper ---- */
.hero__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--code-black);
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero__video > iframe,
.hero__video > .yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* YouTube facade */
.yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: var(--code-black);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.yt-facade__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.2s ease;
}
.yt-facade:hover .yt-facade__thumb { opacity: 0.85; }
.yt-facade__play {
  position: relative; z-index: 1;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 0.125rem 0.5rem rgba(0,0,0,.5));
}
.yt-facade:hover .yt-facade__play { transform: scale(1.1); }

/* ---- Partner logos ----
   Spacing to CTA below is kept tight (space-5 = 24px on 8pt grid)
   — partners + CTA visually form one block, not two islands. */
.hero__partners {
  width: 100%;
  margin: 0 0 var(--space-5);      /* 24px gap to CTA row (was space-6 = 32px) */
}
.hero__partners .code-eyebrow {
  margin: 0 0 var(--space-3);      /* tight label-to-logos gap (was space-4) */
  display: block;
  text-align: center;
}
@media (min-width: 48rem) {
  .hero__partners .code-eyebrow {
    text-align: left;
    display: inline-block;
  }
}
/* Mobile: row centered, max 80% width so logos don't overflow */
.hero__partners-row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: min(80%, 28rem);
  margin-inline: auto;
}
.hero__partners-row img {
  width: auto;
  height: clamp(2.5rem, 10vw, 3.25rem);
  object-fit: contain;
  max-width: 100%;
  display: block;
  opacity: 0.85;
}
@media (min-width: 48rem) {
  .hero__partners-row {
    justify-content: flex-start;
    max-width: 100%;
    margin-inline: 0;
  }
  .hero__partners-row img {
    height: clamp(1.75rem, 3.5vw, 2.5rem);
  }
}

/* ============================================================
   LERNKONZEPT — Fix 5: white/light background (matches code.berlin
   sections after hero). Text inverted to dark on light.
   WCAG AA: black #222 on white #fff = 16.1:1 (passes AAA).
   Body copy #444 on white = 9.73:1 (passes AA).
   ============================================================ */
.lernkonzept {
  background: #ffffff;                /* Fix 5: white BG */
  color: var(--light-fg-1);           /* dark text on light */
}

/* Eyebrow on light BG: dark fg-3 token */
.lernkonzept .code-eyebrow {
  color: var(--code-ink-4);           /* #787878 — still readable on white, 4.5:1 AA */
}
.lernkonzept .code-eyebrow::before {
  color: var(--code-ink-4);
}

/* Section H2 on white */
.lernkonzept .section__h2 {
  color: var(--light-fg-1);           /* #000 */
}

.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-7);
    margin-top: var(--space-7);
  }
}

.pillar {
  display: grid;
  /* Fluid icon column: 3rem (48px) → 3.5rem (56px) based on viewport. */
  grid-template-columns: 0.25rem clamp(3rem, 4.5vw, 3.5rem) minmax(0, 1fr);
  column-gap: clamp(var(--space-4), 2vw, var(--space-5));
  align-items: start;
}
.pillar__bar  { align-self: stretch; width: 0.25rem; }
.pillar__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.pillar__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.4vw, 1.5rem);   /* 20px → 24px */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--light-fg-1);
  margin: 0 0 var(--space-2);
}
.pillar__body {
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 1.1vw, 1rem);   /* 15px → 16px */
  line-height: 1.55;
  color: var(--light-fg-2);
  margin: 0;
  max-width: 50ch;
}

/* ============================================================
   KONZEPT — eyebrow → h2 → photo+pattern → body → CTA
   (Matches the original LP's vertical flow.)
   ============================================================ */
.konzept {
  background: var(--bg);
}

.konzept__media {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  margin: var(--space-5) 0 var(--space-6);
}
.konzept__pattern {
  position: absolute;
  top: 0; right: 0;
  width: 70%;
  height: 55%;
  background: url("./assets/patterns/rose-orchid-pixel.png") center/cover no-repeat;
  z-index: 0;
  filter: saturate(1.1);
}
.konzept__accent {
  position: absolute;
  bottom: 0; left: 0;
  width: 38%;
  height: 26%;
  background: var(--code-lime);
  z-index: 0;
}
.konzept__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.copy {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
  max-width: 58ch;
}
@media (min-width: 768px) { .copy { font-size: 18px; } }
.copy strong { color: var(--fg-1); font-weight: 500; }

/* Desktop ≥64rem — Konzept goes 2-column: media left, text+CTA right.
   DOM order of .konzept .code-container direct children:
     :nth-child(1) eyebrow
     :nth-child(2) h2
     :nth-child(3) media (photo + pattern + accent)
     :nth-child(4) copy paragraph
     :nth-child(5) CTA button wrapper
   Media sits in column 1 spanning all rows; text flows in column 2. */
@media (min-width: 64rem) {
  .konzept .code-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-6), 5vw, var(--space-8));
    align-items: center;
  }
  .konzept .code-container > :nth-child(1) { grid-column: 2; grid-row: 1; }   /* eyebrow */
  .konzept .code-container > :nth-child(2) { grid-column: 2; grid-row: 2; }   /* h2 */
  .konzept .code-container > :nth-child(3) {                                  /* media */
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
    margin: 0;
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
    max-width: none;
  }
  .konzept .code-container > :nth-child(4) { grid-column: 2; grid-row: 3; }   /* copy */
  .konzept .code-container > :nth-child(5) { grid-column: 2; grid-row: 4; }   /* CTA */
  .konzept__photo { aspect-ratio: 4 / 5; }
}

/* ============================================================
   STUDIENGÄNGE — white/light background for rhythm alternation.
   Konzept (before) = black; Studiengänge = white; Professoren (after) = dark.
   Mobile: single column stack of full-width cards.
   Tablet (≥48rem): 2-column grid.
   Desktop (≥64rem): same 2-col grid, 5th card spans full width.
   ============================================================ */
.studiengaenge {
  background: var(--light-bg);
  color: var(--light-fg-1);
}

.studiengaenge .code-eyebrow {
  color: var(--light-fg-3);
}
.studiengaenge .code-eyebrow::before {
  color: var(--light-fg-3);
}

.studiengaenge__h2 {
  color: var(--light-fg-1);
}

/* Cards container: constrained width on desktop, full-bleed on mobile */
.studiengaenge__cards {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 48rem) {
  .studiengaenge__cards {
    padding: 0 var(--space-7);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
@media (min-width: 64rem) {
  .studiengaenge__cards {
    padding: 0 var(--space-8);
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* Individual program card — light surface with soft shadow on white bg */
.program-card {
  display: flex;
  flex-direction: column;
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-medium) var(--ease-standard),
              border-color var(--dur-color) var(--ease-tailwind),
              box-shadow var(--dur-medium) var(--ease-standard);
}
.program-card:hover {
  transform: translateY(-2px);
  border-color: var(--program-accent, var(--code-lime));
  box-shadow: var(--shadow-lg);
}

/* Photo area */
.program-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.program-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, 500ms) var(--ease-standard);
}
.program-card:hover .program-card__photo {
  transform: scale(1.03);
}

/* Degree badge — accent-colored chip in bottom-left of photo */
.program-card__badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--program-accent, var(--code-lime));
  padding: var(--space-2) var(--space-3);
}
.program-card__degree {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--program-ink, #000);
  display: block;
}

/* Card body */
.program-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Accent bar above title */
.program-card__accent-bar {
  width: 2rem;
  height: 3px;
  background: var(--program-accent, var(--code-lime));
  flex-shrink: 0;
}

.program-card__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--light-fg-1);
  margin: 0;
}

.program-card__text {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  line-height: 1.6;
  color: var(--light-fg-2);
  margin: 0;
  flex: 1;
  max-width: 52ch;
}

.program-card__cta {
  margin-top: var(--space-3);
}

/* 5th card (Innovation Design) spans full width on 2-col tablet/desktop */
@media (min-width: 48rem) {
  .studiengaenge__cards > :last-child {
    grid-column: 1 / -1;
  }
  /* On full-width card, lay out photo + body side by side */
  .studiengaenge__cards > :last-child .program-card {
    flex-direction: row;
  }
  .studiengaenge__cards > :last-child .program-card__media {
    flex: 0 0 45%;
    aspect-ratio: auto;
  }
  .studiengaenge__cards > :last-child .program-card__body {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   PROFESSOREN — mid-dark background (#111) with orchid pattern accent.
   Mobile: photo stacked above text.
   Desktop (≥64rem): photo left, text right, side by side.
   ============================================================ */
.professoren {
  background: var(--bg-elev-1);
}

.professoren__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Photo + pattern composite */
.professoren__media {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
}

.professoren__pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 60%;
  background: url("./assets/patterns/orchid-comet-diagonal.png") center / cover no-repeat;
  z-index: 0;
  opacity: 0.75;
}

.professoren__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Text side */
.professoren__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

.professoren__h2 {
  color: var(--fg-1);
  max-width: 16ch;
}

.professoren__copy {
  color: var(--fg-2);
  max-width: 52ch;
}
.professoren__copy strong { color: var(--fg-1); }

/* Desktop ≥64rem — side by side: photo left, text right */
@media (min-width: 64rem) {
  .professoren__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--space-7), 6vw, var(--space-9));
  }
  .professoren__media {
    flex: 0 0 48%;
  }
  .professoren__photo {
    aspect-ratio: 4 / 5;
  }
  .professoren__content {
    flex: 1;
  }
}

/* ============================================================
   ARBEITGEBER & ALUMNI — white/light background.
   Professoren (#111 dark) → Arbeitgeber (white) → Startups (#000 dark).
   eyebrow + h2 + body + logo grid + CTA, single column.
   ============================================================ */
.arbeitgeber {
  background: var(--light-bg);
  color: var(--light-fg-1);
}

.arbeitgeber .code-eyebrow {
  color: var(--light-fg-3);
}
.arbeitgeber .code-eyebrow::before {
  color: var(--light-fg-3);
}

.arbeitgeber__h2 {
  color: var(--light-fg-1);
}

.arbeitgeber__copy {
  color: var(--light-fg-2);
  margin-bottom: var(--space-4);
}
.arbeitgeber__copy strong {
  color: var(--light-fg-1);
}
.arbeitgeber__copy:last-of-type {
  margin-bottom: 0;
}

/* Logo tile-grid — square white tiles with centered black logo.
   Mobile: 2 cols, Tablet: 3 cols, Desktop: 4 cols. */
.arbeitgeber__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
@media (min-width: 48rem) {
  .arbeitgeber__tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}
@media (min-width: 64rem) {
  .arbeitgeber__tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.arbeitgeber__tile {
  aspect-ratio: 1 / 1;
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-4), 3.5vw, var(--space-6));
  transition: transform var(--dur-medium) var(--ease-spring),
              border-color var(--dur-color) var(--ease-tailwind);
}
.arbeitgeber__tile:hover {
  transform: translateY(-2px);
  border-color: var(--light-fg-3);
}

.arbeitgeber__tile-logo {
  max-width: 100%;
  max-height: 55%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Mobile (2-col): if last tile is alone on its row (odd count),
   center it across both columns so the grid reads cleanly. */
@media (max-width: 47.9375rem) {
  .arbeitgeber__tiles > .arbeitgeber__tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
}

/* CTA wrapper — centered within section */
.arbeitgeber__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ============================================================
   STARTUPS — dark background (#000).
   Arbeitgeber (white) → Startups (#000) → Partnerunternehmen (white).
   eyebrow + h2 + body + logo grid + CTA + YouTube embed + testimonial.
   ============================================================ */
.startups {
  background: var(--bg);
}

/* Startup logo grid — HTML tiles, 2-col mobile → 4-col desktop */
/* Tile-grid — dense ecosystem grid. Mobile 2-col → Tablet 5-col → Desktop 9-col.
   "+230 weitere" tile = lime accent. */
.startups__tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-7);
}
@media (min-width: 48rem) {
  .startups__tile-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 64rem) {
  .startups__tile-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

.startups__tile {
  aspect-ratio: 1 / 1;
  background: var(--light-bg);
  color: var(--light-fg-1);
  padding: clamp(var(--space-2), 1.2vw, var(--space-3));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
  transition: transform var(--dur-medium) var(--ease-spring);
}
.startups__tile:hover {
  transform: translateY(-2px);
}

.startups__tile-funding {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(8px, 0.8vw, 10px);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--light-fg-2);
  text-transform: uppercase;
  max-width: 100%;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.startups__tile-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(11px, 1.3vw, 15px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--light-fg-1);
  align-self: center;
  margin: auto;
  text-align: center;
}

.startups__tile-logo {
  max-width: 100%;
  max-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
  align-self: center;
  margin: auto;
  display: block;
}

.startups__tile--more {
  background: var(--code-lime);
  color: var(--code-black);
}
.startups__tile--more .startups__tile-funding,
.startups__tile--more .startups__tile-name {
  color: var(--code-black);
}

/* YouTube embed — 16:9 aspect, full container width */
.startups__video {
  margin: var(--space-7) 0;
  aspect-ratio: 16 / 9;
  background: var(--code-black);
  overflow: hidden;
  position: relative;
}
.startups__video > .yt-facade,
.startups__video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Incubator video caption — eyebrow above the YouTube embed */
.startups__video-figure {
  margin: var(--space-7) 0;
}
.startups__video-caption {
  margin: 0 0 var(--space-3);
}

/* Mona Feder spotlight — large photo + quote on a pattern background.
   Mobile stacked, Desktop 2-col. Lives inside the dark startups section. */
.startups__spotlight {
  position: relative;
  margin: var(--space-7) 0 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: center;
}

.startups__spotlight-pattern {
  position: absolute;
  inset: 0;
  background: url("./assets/patterns/glitch-mint-full-spectrum.png") center / cover no-repeat;
  opacity: 0.35;
  z-index: -1;
}

.startups__spotlight-media {
  position: relative;
}

.startups__spotlight-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.startups__spotlight-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.startups__spotlight-quote {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.startups__spotlight-caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.startups__spotlight-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.startups__spotlight-role {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .startups__spotlight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .startups__spotlight-photo {
    max-height: 520px;
  }
}

/* ============================================================
   PARTNERUNTERNEHMEN & UNTERSTÜTZER — dark background.
   Startups (#000) → Partnerunternehmen (#000) kept dark per original LP rhythm;
   contrast reset comes from the following Testimonials block's pattern overlay.
   h2 + body + CTA + partner logo grid.
   ============================================================ */
.partnerunternehmen {
  background: var(--bg);
  color: var(--fg-1);
}

.partnerunternehmen__h2 {
  color: var(--fg-1);
}

.partnerunternehmen__copy {
  color: var(--fg-2);
  margin-bottom: var(--space-6);
}
.partnerunternehmen__copy strong {
  color: var(--fg-1);
}

/* Partner logo grid — composite has dark logos; invert on dark background. */
.partnerunternehmen__logos {
  margin-top: var(--space-7);
}
.partnerunternehmen__logos img {
  width: 100%;
  height: auto;
  display: block;
  filter: invert(1) hue-rotate(180deg);
}

/* Desktop ≥64rem — two-column text layout */
@media (min-width: 64rem) {
  .partnerunternehmen .code-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-6), 5vw, var(--space-8));
    align-items: start;
  }
  /* h2 in col 1, row 1 */
  .partnerunternehmen .code-container > :nth-child(1) { grid-column: 1; grid-row: 1; }
  /* copy in col 2, row 1 */
  .partnerunternehmen .code-container > :nth-child(2) { grid-column: 2; grid-row: 1; }
  /* CTA in col 2, row 2 */
  .partnerunternehmen .code-container > :nth-child(3) { grid-column: 2; grid-row: 2; }
  /* logos span full width, row 3 */
  .partnerunternehmen .code-container > :nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-7);
  }
}

/* ============================================================
   TESTIMONIALS — dark background (#222) with orchid accent.
   Partnerunternehmen (white) → Testimonials (#222) → Stanford (white).
   3 quote cards (mobile: stack, tablet+: 3-col grid) + YouTube embed.
   ============================================================ */
.testimonials {
  background: var(--bg-elev-2);
}

/* 3-card grid: mobile single col, tablet 3-col */
.testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
@media (min-width: 48rem) {
  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* Reveal wrappers are the grid items — make them fill row height so cards can stretch equally */
.testimonials__grid > * { height: 100%; }

/* Individual testimonial card — dark with signature pattern behind portrait,
   real quote text, brand logo beside name/role. Photos aspect-preserving (contain). */
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  isolation: isolate;
  transition: transform var(--dur-medium) var(--ease-standard);
  height: 100%;
  overflow: hidden;
}
.testimonial-card:hover {
  transform: translateY(-2px);
}

/* Signature pattern behind the portrait — subtle, brand-accented */
.testimonial-card__pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  z-index: -1;
}

/* Portrait media wrapper — aspect-preserving contain, no crop */
.testimonial-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4) 0;
}

.testimonial-card__portrait {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Quote + footer below the photo */
.testimonial-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  flex: 1;
}

.testimonial-card__quote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.5;
  color: var(--fg-1);
  margin: 0;
  letter-spacing: -0.01em;
  flex: 1;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}

.testimonial-card__brand {
  width: clamp(2.25rem, 4vw, 3rem);
  height: clamp(2.25rem, 4vw, 3rem);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.testimonial-card__brand--invert {
  filter: invert(1);
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.testimonial-card__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.2;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.testimonial-card__role {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 14px);
  letter-spacing: 0.02em;
  color: var(--fg-2);
  line-height: 1.35;
}

/* YouTube embed */
.testimonials__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--code-black);
  overflow: hidden;
}
.testimonials__video > .yt-facade,
.testimonials__video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.testimonials__video-label {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   STANFORD — white/light background, stacked flow:
   eyebrow → H2 → Stanford campus photo → body → dark quote-card → CTA.
   Quote-card reuses the `.testimonial-card` dark treatment from WP-5.
   ============================================================ */
.stanford {
  background: var(--light-bg);
  color: var(--light-fg-1);
}

.stanford__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stanford .code-eyebrow,
.stanford .code-eyebrow::before {
  color: var(--light-fg-3);
}

.stanford__h2 {
  color: var(--light-fg-1);
}

.stanford__copy {
  color: var(--light-fg-2);
  margin: 0;
}
.stanford__copy strong {
  color: var(--light-fg-1);
}

/* Hero campus photo — sits under the H2, full-width, dominant */
.stanford__hero-media {
  width: 100%;
}
.stanford__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Quote-card in Stanford adopts the shared .testimonial-card dark treatment
   (already defined in WP-5 CSS). Horizontal layout on desktop: photo left, body right. */
.stanford__quote-card {
  max-width: 100%;
}

@media (min-width: 48rem) {
  .stanford__quote-card {
    flex-direction: row;
  }
  .stanford__quote-card .testimonial-card__pattern {
    top: 0; left: 0; right: auto;
    width: 55%;
    height: 100%;
  }
  .stanford__quote-card .testimonial-card__media {
    flex: 0 0 48%;
    aspect-ratio: auto;
    align-self: stretch;
    padding: var(--space-5);
  }
  .stanford__quote-card .testimonial-card__portrait {
    max-height: 100%;
  }
  .stanford__quote-card .testimonial-card__body {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   Section 11 — Campus & Community
   bg: var(--bg-elev-1) dark (alternates after Stanford light)
   ============================================================ */
.campus {
  background: var(--bg-elev-1);
}

.campus__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.campus__header {
  display: flex;
  flex-direction: column;
}

.campus__h2 {
  color: var(--fg-1);
  margin-top: var(--space-2);
}

/* Rendering — full-width hero image */
.campus__rendering-wrap {
  width: 100%;
}

.campus__rendering {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Body copy */
.campus__copy {
  color: var(--fg-2);
  max-width: 68ch;
}

.campus__copy strong {
  color: var(--fg-1);
  font-weight: 600;
}

@media (min-width: 64rem) {
  .campus__rendering {
    aspect-ratio: 21 / 9;
  }
}

/* ============================================================
   Campus Slider — manually controlled carousel (prev/next + dots).
   Desktop: 2 slides visible; Mobile: 1. Keyboard arrows when focused.
   ============================================================ */
.campus-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  outline: none;
}

.campus-slider__viewport {
  width: 100%;
  overflow: hidden;
}

.campus-slider__track {
  display: flex;
  will-change: transform;
}

.campus-slider__slide {
  box-sizing: border-box;
  padding: 0 var(--space-2);
  min-width: 0;
}

.campus-slider__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.campus-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.campus-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 18px;
  cursor: pointer;
  transition:
    background var(--dur-color) var(--ease-tailwind),
    border-color var(--dur-color) var(--ease-tailwind),
    color var(--dur-color) var(--ease-tailwind);
}
.campus-slider__btn:hover:not(:disabled) {
  background: var(--bg-elev-1);
  border-color: var(--fg-1);
}
.campus-slider__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.campus-slider__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.campus-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  background: var(--fg-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--dur-color) var(--ease-tailwind),
    transform var(--dur-quick) var(--ease-standard);
}
.campus-slider__dot:hover {
  background: var(--fg-2);
}
.campus-slider__dot--active {
  background: var(--code-lime);
  transform: scale(1.35);
}

/* ============================================================
   Section 12 — Auswahlprozess
   bg: var(--light-bg) white (alternates after Campus dark)
   ============================================================ */
.auswahlprozess {
  background: var(--light-bg);
  color: var(--light-fg-1);
}

.auswahlprozess .code-eyebrow {
  color: var(--light-fg-3);
}
.auswahlprozess .code-eyebrow::before {
  color: var(--light-fg-3);
}

.auswahlprozess__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.auswahlprozess__h2 {
  color: var(--light-fg-1);
  margin-top: var(--space-2);
}

/* Photo wrap with signature background pattern halo behind the image. */
.auswahlprozess__photo-wrap {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.auswahlprozess__photo-pattern {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: calc(var(--space-4) * -1);
  right: calc(var(--space-4) * -1);
  bottom: calc(var(--space-4) * -1);
  background: url("./assets/patterns/mint-city-halftone.jpg") center / cover no-repeat;
  opacity: 0.35;
  z-index: -1;
}

.auswahlprozess__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.auswahlprozess__copy {
  color: var(--light-fg-2);
  max-width: 68ch;
}

.auswahlprozess__copy strong {
  color: var(--light-fg-1);
  font-weight: 600;
}

/* Steps list */
.auswahlprozess__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auswahlprozess__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  background: var(--bg);
  color: var(--fg-1);
  border-left: 3px solid var(--code-lime);
  padding: var(--space-5);
}

.auswahlprozess__step-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--code-lime);
  flex-shrink: 0;
  min-width: 2.5ch;
}

.auswahlprozess__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.auswahlprozess__step-title {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.3;
}

.auswahlprozess__step-copy {
  color: var(--fg-2);
  margin: 0;
  font-size: 0.9375rem;
}

/* Step icon — invert for light→dark so strokes show on dark card */
.auswahlprozess__step-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: contain;
  filter: invert(1);
}

/* Step content wrapper (num + body text) */
.auswahlprozess__step-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex: 1;
}

/* CTA wrapper — stacked: label above, button below, both centered */
.auswahlprozess__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.auswahlprozess__cta-label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--light-fg-2);
  margin: 0;
}

@media (min-width: 64rem) {
  .auswahlprozess__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(var(--space-7), 6vw, var(--space-9));
    row-gap: clamp(var(--space-5), 3vw, var(--space-7));
  }

  /* Direct children of grid: header, reveal(photo), reveal(copy), steps(ol), reveal(btn) */
  .auswahlprozess__inner > :nth-child(1) { grid-column: 1; grid-row: 1; }   /* header */
  .auswahlprozess__inner > :nth-child(2) { grid-column: 2; grid-row: 1 / 5; } /* photo reveal */
  .auswahlprozess__inner > :nth-child(3) { grid-column: 1; grid-row: 2; }   /* copy reveal */
  .auswahlprozess__inner > :nth-child(4) { grid-column: 1; grid-row: 3; }   /* steps ol */
  .auswahlprozess__inner > :nth-child(5) { grid-column: 1; grid-row: 4; }   /* btn reveal */

  .auswahlprozess__photo {
    aspect-ratio: 3 / 4;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================================
   Accessibility — respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Section 13 — Finanzierung
   bg: var(--bg) black (alternates after Auswahlprozess white)
   ============================================================ */
.finanzierung {
  background: var(--bg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Signature background pattern — large, decorative, subtle (same signature as Hero). */
.finanzierung__pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: min(70vw, 820px);
  height: 100%;
  background: url("./assets/patterns/pumpkin-dot-grid-amber.png") right center / cover no-repeat;
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}

.finanzierung__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 62ch;
}

.finanzierung__h2 {
  color: var(--fg-1);
  margin: 0;
  max-width: 22ch;
}

.finanzierung__copy-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.finanzierung__copy-block .copy {
  color: var(--fg-2);
  margin: 0;
}

.finanzierung__copy-block strong {
  color: var(--fg-1);
  font-weight: 600;
}

/* ============================================================
   Section 14 — FAQ
   bg: var(--light-bg) white (alternates after Finanzierung black)
   ============================================================ */
.faq {
  background: var(--light-bg);
  color: var(--light-fg-1);
}

.faq .code-eyebrow {
  color: var(--light-fg-3);
}
.faq .code-eyebrow::before {
  color: var(--light-fg-3);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.faq__h2 {
  color: var(--light-fg-1);
  margin-top: var(--space-2);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.faq__item {
  border-top: 1px solid var(--light-border, var(--light-fg-3));
}

.faq__item:last-child {
  border-bottom: 1px solid var(--light-border, var(--light-fg-3));
}

.faq__details {
  width: 100%;
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { display: none; }

.faq__summary-text {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.8vw, 1.0625rem);
  font-weight: 600;
  color: var(--light-fg-1);
  line-height: 1.4;
  flex: 1;
}

.faq__summary-icon {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--light-fg-3);
  flex-shrink: 0;
  transition: transform 250ms ease;
  line-height: 1;
}

.faq__details[open] .faq__summary-icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding-bottom: var(--space-5);
}

.faq__answer-copy {
  color: var(--light-fg-2);
  margin: 0;
}

@media (min-width: 64rem) {
  .faq__inner {
    max-width: 760px;
  }
}

/* ============================================================
   Section 15 — Closing CTA
   bg: var(--bg) black (alternates after FAQ white)
   ============================================================ */
.closing-cta {
  background: var(--bg);
}

.closing-cta__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.closing-cta__h2 {
  color: var(--fg-1);
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 var(--space-5);
}

.closing-cta__copy {
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

.closing-cta__content {
  display: flex;
  flex-direction: column;
}

.closing-cta__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .closing-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--space-7), 6vw, var(--space-9));
  }

  .closing-cta__content {
    flex: 1;
  }

  .closing-cta__media {
    flex: 0 0 44%;
  }

  .closing-cta__photo {
    aspect-ratio: 3 / 4;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--bg-elev-1);
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.site-footer__logo {
  height: 28px;
  width: auto;
  opacity: 0.7;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 0;
  transition: color 200ms ease;
}

.site-footer__link:hover {
  color: var(--fg-1);
}

.site-footer__sep {
  color: var(--fg-3);
  font-size: 11px;
}

@media (min-width: 48rem) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   WP-1 — Section CTA wrappers (global alignment rules).
   Hero CTA keeps its own full-width mobile behaviour via .hero__cta-row.
   All other section CTAs are NOT full-width — they align per section.
   ============================================================ */

/* Studiengaenge program-card CTA — left-aligned, content width. */
.program-card__cta {
  display: flex;
  justify-content: flex-start;
}

/* Startups CTA — centered at end of grid. */
.startups__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Partnerunternehmen CTA — centered. */
.partnerunternehmen__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Stanford CTA — left under content column. */
.stanford__cta-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-6);
}

/* Closing CTA — centered under copy. */
.closing-cta__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Give all non-hero primary CTAs a consistent, brand-conform size */
.program-card__cta .code-btn--primary,
.arbeitgeber__cta-wrap .code-btn--primary,
.startups__cta-wrap .code-btn--primary,
.partnerunternehmen__cta-wrap .code-btn--primary,
.stanford__cta-wrap .code-btn--primary,
.auswahlprozess__cta-wrap .code-btn--primary,
.closing-cta__cta-wrap .code-btn--primary {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 12px;
}

/* ============================================================
   WP-1 — Professoren vertical rhythm alignment.
   Align spacing to match neighbouring sections (Studiengaenge / Arbeitgeber).
   ============================================================ */
.professoren__content {
  gap: var(--space-4);
}
.professoren__h2 {
  margin: 0 0 var(--space-2);
}
.professoren__copy {
  margin: 0;
}