/* ===================================================================
 *  PRO SHINE — STORY ENGINE v2
 *  Editorial scroll storytelling. Each section has its own choreography.
 * =================================================================== */

@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;
  }
}

/* =====================================================
   1. CUSTOM CURSOR — top of stack (z-index: 10000)
   ===================================================== */
.ps-cursor,
.ps-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
  mix-blend-mode: difference;
}
.ps-cursor {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201, 169, 97, 0.7);
  border-radius: 50%;
  transition: opacity 0.4s ease,
              width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              background 0.4s ease,
              border-radius 0.4s ease;
}
.ps-cursor-dot {
  width: 4px;
  height: 4px;
  background: #C9A961;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}
.ps-cursor.is-visible,
.ps-cursor-dot.is-visible { opacity: 1; }

.ps-cursor.is-hover {
  width: 64px;
  height: 64px;
  border-color: rgba(201, 169, 97, 0.9);
  background: rgba(201, 169, 97, 0.08);
}
.ps-cursor.is-text {
  width: 2px;
  height: 32px;
  border-radius: 1px;
  border-color: transparent;
  background: rgba(201, 169, 97, 0.7);
}
.ps-cursor.is-media {
  width: 92px;
  height: 92px;
  border-color: rgba(244, 242, 238, 0.5);
  background: transparent;
}
.ps-cursor.is-media::before {
  content: 'view';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #F4F2EE;
}

@media (hover: none), (pointer: coarse) {
  .ps-cursor, .ps-cursor-dot { display: none !important; }
}

body.ps-cursor-active,
body.ps-cursor-active * {
  cursor: none !important;
}
@media (hover: none), (pointer: coarse) {
  body.ps-cursor-active,
  body.ps-cursor-active * { cursor: auto !important; }
}

/* =====================================================
   2. SCROLL PROGRESS
   ===================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A961 30%, #C9A961 70%, transparent);
  z-index: 100;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* =====================================================
   3. REVEAL VARIANTS
   ===================================================== */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-fade.in { opacity: 1; }

.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.in { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

/* =====================================================
   4. IMAGE REVEAL — signature curtain effect
   ===================================================== */
.image-reveal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.image-reveal img,
.image-reveal video,
.image-reveal picture {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.image-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0A0A0A;
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 1.4s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
  pointer-events: none;
}
.image-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #C9A961;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
  pointer-events: none;
}
.image-reveal.in::before { transform: scaleY(0); }
.image-reveal.in::after {
  animation: goldLineDrop 1.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.image-reveal.in img,
.image-reveal.in video,
.image-reveal.in picture {
  opacity: 1;
  transform: scale(1);
}

@keyframes goldLineDrop {
  0%   { top: 0%; transform: scaleX(0); opacity: 1; }
  20%  { top: 0%; transform: scaleX(1); opacity: 1; }
  80%  { top: 100%; transform: scaleX(1); opacity: 0.6; }
  100% { top: 100%; transform: scaleX(1); opacity: 0; }
}

/* =====================================================
   5. HEADLINE STAGGER
   ===================================================== */
.headline-stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(80%);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--wi, 0) * 80ms);
}
.headline-stagger.in .word { opacity: 1; transform: translateY(0); }

/* =====================================================
   6. HAIRLINE GROW
   ===================================================== */
.hairline-grow {
  position: relative;
  overflow: hidden;
}
.hairline-grow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #C9A961;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.hairline-grow.in::after { transform: scaleX(1); }

/* =====================================================
   7. MAGNETIC HOVER
   ===================================================== */
.magnetic {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* =====================================================
   8. FANCY LINK
   ===================================================== */
.fancy-link {
  position: relative;
  display: inline-block;
}
.fancy-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #C9A961;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.fancy-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* =====================================================
   9. PROJECT CARDS — gold corner accent
   ===================================================== */
.project { position: relative; }
.project::after,
.project::before {
  content: '';
  position: absolute;
  background: #C9A961;
  z-index: 2;
  pointer-events: none;
}
.project::after {
  top: 16px;
  right: 16px;
  width: 0;
  height: 1px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.project::before {
  top: 16px;
  right: 16px;
  width: 1px;
  height: 0;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.project:hover::after { width: 28px; }
.project:hover::before { height: 28px; }

/* =====================================================
   10. PAGE TRANSITION
   ===================================================== */
.page-transition {
  position: fixed;
  inset: 0;
  background: #0A0A0A;
  z-index: 9998;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-transition.active { transform: translateY(0); }
.page-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #C9A961;
}

/* =====================================================
   11. PARALLAX
   ===================================================== */
.parallax {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* =====================================================
   12. CHAPTER MARKER — vertical dots showing position
   ===================================================== */
.chapter-marker {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.chapter-marker.is-visible { opacity: 1; }
.chapter-marker .dot {
  width: 5px;
  height: 5px;
  background: rgba(201, 169, 97, 0.25);
  border-radius: 50%;
  transition: background 0.6s ease, transform 0.6s ease, width 0.6s ease, height 0.6s ease;
}
.chapter-marker .dot.active {
  background: #C9A961;
  transform: scale(1.6);
}
.chapter-marker .dot.passed { background: rgba(201, 169, 97, 0.55); }

@media (max-width: 900px) { .chapter-marker { display: none; } }

/* =====================================================
   13. PUNCHLINE — whitespace pause section
   ===================================================== */
.punchline {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  position: relative;
  background: #0A0A0A;
}
.punchline::before,
.punchline::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: #C9A961;
  opacity: 0;
  transition: opacity 1.2s ease, height 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.punchline::before { top: 0; height: 0; }
.punchline::after { bottom: 0; height: 0; }
.punchline.in::before {
  height: 48px;
  opacity: 0.5;
}
.punchline.in::after {
  height: 48px;
  opacity: 0.5;
}

.punchline-text {
  max-width: 800px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(28px, 4.5vw, 60px);
  line-height: 1.25;
  color: #F4F2EE;
  position: relative;
}
.punchline-text em {
  color: #C9A961;
  font-style: italic;
}
.punchline-marker {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.6);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;
}
.punchline.in .punchline-marker {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   14. SCROLL INDICATOR (hero)
   ===================================================== */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.7;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.scroll-indicator-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #C9A961);
  animation: scrollLineDrop 2.4s cubic-bezier(0.76, 0, 0.24, 1) infinite;
  transform-origin: top;
}
.scroll-indicator-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.6);
}
@keyframes scrollLineDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero.scrolled .scroll-indicator { opacity: 0; }

/* =====================================================
   v2.1 — SECTION-SPECIFIC CHOREOGRAPHY
   Each section has its own entrance personality.
   ===================================================== */

/* ---------- HERO: Sequence — eyebrow line → headline words → meta ---------- */
.hero .hero-eyebrow .line {
  transform: scaleX(0);
  transform-origin: left;
  display: inline-block;
  width: 60px;
  height: 1px;
  background: rgba(244, 242, 238, 0.4);
  margin-right: 16px;
  vertical-align: middle;
  animation: heroLineGrow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes heroLineGrow {
  to { transform: scaleX(1); }
}
.hero .hero-eyebrow span:not(.line) {
  opacity: 0;
  animation: heroFadeIn 1s ease 0.9s forwards;
}
.hero .hero-meta {
  opacity: 0;
  transform: translateY(20px);
  animation: heroMetaIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}
@keyframes heroFadeIn { to { opacity: 1; } }
@keyframes heroMetaIn { to { opacity: 1; transform: translateY(0); } }

/* Hero H1 word-stagger gets longer delay (after eyebrow line) */
.hero h1.headline-stagger .word {
  transition-delay: calc(0.6s + var(--wi, 0) * 90ms);
}

/* ---------- PROJEKTE: Section header sweeps, projects rise asymmetrically ---------- */
.projects .section-header {
  position: relative;
}
.projects .section-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(201, 169, 97, 0.4);
  transform: translateY(-50%);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  z-index: -1;
}
.projects .section-header.in::before { width: 120px; }

/* Hero-projects: image rises from below, info wipes from right */
.project.hero-project {
  position: relative;
}
.project.hero-project.in .project-info {
  animation: projectInfoSlide 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes projectInfoSlide {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Compact projects come in alternating directions */
.project.compact:nth-child(odd) {
  transform: translateX(-30px);
}
.project.compact:nth-child(even) {
  transform: translateX(30px);
}
.project.compact.in {
  transform: translateX(0);
}

/* Mobile: vermeide horizontale Transforms die zu Overflow führen */
@media (max-width: 900px) {
  @keyframes projectInfoSlide {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .project.compact:nth-child(odd),
  .project.compact:nth-child(even) {
    transform: translateY(40px);
  }
  .project.compact.in {
    transform: translateY(0);
  }
}

/* ---------- DISZIPLINEN: Staircase reveal — each service offset higher than last ---------- */
.service-grid.reveal-stagger > .service {
  transform: translateY(60px);
}
.service-grid.reveal-stagger.in > .service:nth-child(1) { transition-delay: 0.0s; }
.service-grid.reveal-stagger.in > .service:nth-child(2) { transition-delay: 0.12s; }
.service-grid.reveal-stagger.in > .service:nth-child(3) { transition-delay: 0.24s; }
.service-grid.reveal-stagger.in > .service:nth-child(4) { transition-delay: 0.36s; }
.service-grid.reveal-stagger.in > .service:nth-child(5) { transition-delay: 0.48s; }
.service-grid.reveal-stagger.in > .service.service-cta { transition-delay: 0.7s; }

/* ---------- ABLAUF / PROCESS: 4 Steps cascade from left to right ---------- */
.process-track.reveal-stagger > .process-step {
  transform: translateY(40px);
}
.process-track.reveal-stagger.in > .process-step:nth-child(1) { transition-delay: 0.0s; }
.process-track.reveal-stagger.in > .process-step:nth-child(2) { transition-delay: 0.15s; }
.process-track.reveal-stagger.in > .process-step:nth-child(3) { transition-delay: 0.3s; }
.process-track.reveal-stagger.in > .process-step:nth-child(4) { transition-delay: 0.45s; }

/* Ghost-Numbers (data-ghost) — große Italic-Zahl im Hintergrund */
.process-step {
  position: relative;
}
.process-step::before {
  content: attr(data-ghost);
  position: absolute;
  top: -12px;
  right: -8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 96px;
  font-weight: 300;
  color: rgba(201, 169, 97, 0.06);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
@media (max-width: 600px) {
  .process-step::before { font-size: 72px; top: -8px; right: -4px; }
}

/* ---------- ATELIER: Bild dominiert, Text wischt von rechts ---------- */
.atelier .atelier-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.atelier .atelier-text {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.atelier .atelier-text.in {
  opacity: 1;
  transform: translateX(0);
}
/* Mobile: stack vertically, text rises from below instead of sliding from right */
@media (max-width: 900px) {
  .atelier .atelier-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .atelier .atelier-text {
    transform: translateY(40px);
  }
  .atelier .atelier-text.in {
    transform: translateY(0);
  }
}

/* ---------- PUNCHLINES: Reduced, large whitespace, only line + text ---------- */
.punchline {
  background: #0A0A0A;
  position: relative;
}
.punchline .punchline-inner {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- MENSCH: Portrait skaliert, text staggert sequenziell ---------- */
.founder .founder-eyebrow {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.founder .founder-eyebrow.in {
  opacity: 1;
  transform: translateY(0);
}
.founder .founder-signature {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.8s, transform 1s ease 0.8s;
}
.founder .founder-signature.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- FAQ: Items erscheinen einzeln versetzt ---------- */
.faq .faq-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.faq .faq-item.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- ANFRAGE: Felder erscheinen aufeinanderfolgend ---------- */
.inquiry .form-field {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--field-i, 0) * 80ms);
}
.inquiry .form-field.in {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   ASYMMETRY UTILITIES — break the grid intentionally
   ===================================================== */
.offset-right { padding-left: 25%; }
.offset-left  { padding-right: 25%; }
.offset-deep  { padding-top: 12vh; padding-bottom: 12vh; }
@media (max-width: 900px) {
  .offset-right, .offset-left { padding-left: 0; padding-right: 0; }
}

/* ---------- STIMMEN / VOICES: Sterne erscheinen einzeln, Zitat nach Sternen ---------- */
.voices-grid.reveal-stagger > .voice {
  transform: translateY(40px);
}
.voice .voice-stars {
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}
.voices-grid.in .voice .voice-stars {
  opacity: 1;
}
.voice .voice-quote {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}
.voices-grid.in .voice .voice-quote {
  opacity: 1;
  transform: translateY(0);
}
.voice .voice-meta {
  opacity: 0;
  transition: opacity 0.8s ease 0.9s;
}
.voices-grid.in .voice .voice-meta {
  opacity: 1;
}

/* ---------- FAQ: Items einzeln, plus rotiert ---------- */
.faq-item summary {
  transition: color 0.4s ease;
}
.faq-item:hover summary {
  color: var(--gold);
}

/* ---------- TRUST: subtler Fade, Marquee läuft sofort ---------- */
.trust.reveal-fade {
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- PROCESS-Step Connections (Linien zwischen Steps) ---------- */
.process-track {
  position: relative;
}
@media (min-width: 901px) {
  .process-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 5%,
      rgba(201, 169, 97, 0.15) 30%,
      rgba(201, 169, 97, 0.15) 70%,
      transparent 95%);
    z-index: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  }
  .process-track.in::before {
    transform: scaleX(1);
  }
}

/* ===================================================================
 *  SELENOVA-INSPIRED RICH BLOCKS — v2.2
 *  Disziplinen mit Modulen, Prozess mit narrativen Phasen
 * =================================================================== */

/* ---------- DISZIPLIN-BLOCK ---------- */
.discipline {
  display: grid;
  grid-template-columns: 120px 1.2fr 1fr;
  gap: 56px;
  padding: 80px 0;
  border-bottom: 1px solid var(--rule, #1f1f1f);
  align-items: start;
  position: relative;
}
.discipline:first-of-type { border-top: 1px solid var(--rule, #1f1f1f); }

.discipline-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 96px;
  line-height: 0.85;
  color: #C9A961;
}
.discipline-main {
  min-width: 0;
}
.discipline-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
  margin-bottom: 24px;
}
.discipline-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: #F4F2EE;
}
.discipline-headline em {
  font-style: italic;
  color: #C9A961;
}
.discipline-desc {
  font-size: 15px;
  color: rgba(244, 242, 238, 0.72);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 540px;
}
.discipline-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.discipline-bullets li {
  padding: 14px 0;
  border-top: 1px solid rgba(31, 31, 31, 0.8);
  font-size: 14px;
  color: rgba(244, 242, 238, 0.85);
  display: flex;
  align-items: center;
  gap: 14px;
}
.discipline-bullets li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #C9A961;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Modul-Block — die rechte Spalte */
.discipline-modules {
  background: rgba(19, 19, 19, 0.6);
  border: 1px solid rgba(31, 31, 31, 0.8);
  padding: 28px 28px 0 28px;
}
.modules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.85);
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(31, 31, 31, 0.8);
  margin-bottom: 4px;
}
.modules-header .star {
  color: #C9A961;
  font-size: 12px;
}
.modules-header-label::before {
  content: '◈ ';
  color: rgba(201, 169, 97, 0.7);
}
.module-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(31, 31, 31, 0.8);
  align-items: baseline;
}
.module-item:last-of-type { border-bottom: none; }
.module-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(201, 169, 97, 0.7);
  letter-spacing: 0.1em;
}
.module-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 16px;
  color: #F4F2EE;
  line-height: 1.3;
}
.module-spec {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
  text-align: right;
  white-space: nowrap;
}
.discipline-footer-tag {
  margin: 0 -28px;
  margin-top: 8px;
  padding: 18px 28px;
  background: rgba(10, 10, 10, 0.6);
  border-top: 1px solid rgba(31, 31, 31, 0.8);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: #C9A961;
  text-align: center;
}

@media (max-width: 1100px) {
  .discipline {
    grid-template-columns: 80px 1fr;
    gap: 32px 40px;
  }
  .discipline-modules {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .discipline-num { font-size: 72px; }
}
@media (max-width: 700px) {
  .discipline {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 0;
  }
  .discipline-num { font-size: 56px; }
  .module-spec { font-size: 8px; }
}

/* ---------- PROZESS-PHASE (Selenova-Stil) ---------- */
.phase {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  padding: 72px 0;
  border-bottom: 1px solid rgba(31, 31, 31, 0.8);
  align-items: start;
}
.phase:first-of-type { border-top: 1px solid rgba(31, 31, 31, 0.8); }
.phase-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #C9A961;
  padding-top: 12px;
}
.phase-main { min-width: 0; }
.phase-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: #F4F2EE;
}
.phase-headline em {
  font-style: italic;
  color: #C9A961;
}
.phase-desc {
  font-size: 16px;
  color: rgba(244, 242, 238, 0.78);
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 720px;
}
.phase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.phase-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
  padding: 9px 16px;
  border: 1px solid rgba(31, 31, 31, 0.9);
  border-radius: 100px;
  transition: border-color 0.4s ease, color 0.4s ease;
}
.phase:hover .phase-tag {
  border-color: rgba(201, 169, 97, 0.25);
  color: rgba(244, 242, 238, 0.75);
}

@media (max-width: 900px) {
  .phase {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 48px 0;
  }
  .phase-label { padding-top: 0; }
  .phase-headline { font-size: clamp(28px, 6vw, 40px); }
  .phase-desc { font-size: 15px; }
}

/* Stagger-Animation für discipline und phase */
.disciplines-list .discipline {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.disciplines-list .discipline.in {
  opacity: 1;
  transform: translateY(0);
}
.phase {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.phase.in { opacity: 1; transform: translateY(0); }

/* ---------- DISZIPLIN-CTA (am Ende der Liste) ---------- */
.disciplines-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  padding: 36px 0;
  border-top: 1px solid rgba(31, 31, 31, 0.8);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.5s ease;
}
.disciplines-cta:hover { border-color: rgba(201, 169, 97, 0.4); }
.disciplines-cta .cta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.85);
}
.disciplines-cta .cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(22px, 2.5vw, 32px);
  color: #F4F2EE;
  flex: 1;
  text-align: center;
}
.disciplines-cta .cta-title em {
  font-style: italic;
  color: #C9A961;
}
.disciplines-cta .cta-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 32px;
  color: #C9A961;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.disciplines-cta:hover .cta-arrow {
  transform: translateX(12px);
}
@media (max-width: 700px) {
  .disciplines-cta {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}

/* ===================================================================
 *  v2.3 — VOICES POPUP-STYLE
 *  6 Cards in asymmetrischem Grid mit Pop-Reveal
 * =================================================================== */
.voices.voices-popup {
  position: relative;
}
.voices-popup .voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
/* Asymmetrische Vertikal-Versetzung — gibt Popup-Feeling */
.voices-popup .voices-grid > .voice:nth-child(2) { margin-top: 56px; }
.voices-popup .voices-grid > .voice:nth-child(4) { margin-top: 0; }
.voices-popup .voices-grid > .voice:nth-child(5) { margin-top: 64px; }
.voices-popup .voices-grid > .voice:nth-child(6) { margin-top: 32px; }

.voices-popup .voice {
  position: relative;
  background: rgba(19, 19, 19, 0.55);
  border: 1px solid rgba(31, 31, 31, 0.9);
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease,
              background 0.5s ease,
              box-shadow 0.6s ease;
  isolation: isolate;
}
.voices-popup .voice::before {
  /* Großes Anführungszeichen oben links als Akzent */
  content: '“';
  position: absolute;
  top: -8px;
  left: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 88px;
  line-height: 1;
  color: rgba(201, 169, 97, 0.18);
  pointer-events: none;
  z-index: 0;
  transition: color 0.5s ease;
}
.voices-popup .voice:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 97, 0.4);
  background: rgba(19, 19, 19, 0.85);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.voices-popup .voice:hover::before {
  color: rgba(201, 169, 97, 0.32);
}

/* Sterne */
.voices-popup .voice .voice-stars {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: #C9A961;
  position: relative;
  z-index: 1;
}
/* Quote */
.voices-popup .voice .voice-quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: #F4F2EE;
  position: relative;
  z-index: 1;
  margin: 0;
  /* Italic-Akzente */
}
.voices-popup .voice .voice-quote em {
  font-style: italic;
  color: #C9A961;
}
/* Meta */
.voices-popup .voice .voice-meta {
  padding-top: 16px;
  border-top: 1px solid rgba(31, 31, 31, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.voices-popup .voice .voice-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.85);
}
.voices-popup .voice .voice-car {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 242, 238, 0.55);
  text-align: right;
}

/* Placeholder-Markierung (für Inhaber sichtbar machen) */
.voices-popup .voice.is-placeholder::after {
  content: 'PLATZHALTER';
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: rgba(201, 169, 97, 0.35);
  z-index: 2;
}

/* Pop-Reveal Animation */
.voices-popup .voices-grid > .voice {
  opacity: 0;
  transform: scale(0.94) translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease,
              background 0.5s ease,
              box-shadow 0.6s ease;
}
.voices-popup .voices-grid.in > .voice {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* Versetzter Reveal */
.voices-popup .voices-grid.in > .voice:nth-child(1) { transition-delay: 0.0s; }
.voices-popup .voices-grid.in > .voice:nth-child(2) { transition-delay: 0.12s; }
.voices-popup .voices-grid.in > .voice:nth-child(3) { transition-delay: 0.24s; }
.voices-popup .voices-grid.in > .voice:nth-child(4) { transition-delay: 0.36s; }
.voices-popup .voices-grid.in > .voice:nth-child(5) { transition-delay: 0.48s; }
.voices-popup .voices-grid.in > .voice:nth-child(6) { transition-delay: 0.6s; }

/* Restore translate on hover (override transition-delay) */
.voices-popup .voices-grid.in > .voice:hover {
  transform: translateY(-6px) scale(1);
}

/* Tablet — 2 Spalten */
@media (max-width: 1100px) {
  .voices-popup .voices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .voices-popup .voices-grid > .voice:nth-child(odd) { margin-top: 0; }
  .voices-popup .voices-grid > .voice:nth-child(even) { margin-top: 32px; }
}

/* Mobile — 1 Spalte */
@media (max-width: 700px) {
  .voices-popup .voices-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .voices-popup .voices-grid > .voice { margin-top: 0 !important; }
  .voices-popup .voice { padding: 28px 24px 22px; }
}