/* =====================================================================
   Hero Variante C „Index“: dunkle Bühne, große Projektliste, Hochformat-Bild
   ===================================================================== */
.chero { display: none; }
.hero-c .xhero, .hero-c .ehero { display: none; }
.hero-c .chero { display: block; }

.chero { position: relative; min-height: 100vh; min-height: 100svh; background: #101316; color: #fff; padding-top: calc(var(--header-h) + 42px + clamp(20px, 3vw, 40px)); padding-bottom: clamp(32px, 4vw, 56px); overflow: hidden; }
.chero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(90deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); }
.ch-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; min-height: calc(100svh - var(--header-h) - 42px - clamp(52px, 7vw, 96px)); }

/* Liste */
.ch-left { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; }
.ch-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(20px, 3vh, 36px); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ch-eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--blue); }
.ch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.ch-list a { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: baseline; padding: clamp(10px, 1.6vh, 18px) 0; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.34); transition: color .35s, padding .45s var(--ease); }
.ch-list .n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-list .t { font-size: clamp(28px, 3.3vw, 56px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.ch-list .m { font-size: 14px; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.ch-list a.is-active { color: #fff; padding-left: 14px; }
.ch-list a.is-active .n { color: #5fb0e8; }
.ch-list a.is-active .t { font-weight: 600; font-style: italic; }
.ch-list a.is-active .m { opacity: .75; transform: none; }
.ch-list .bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.ch-list a.is-active .bar { animation: chBar var(--ch-dur, 5s) linear forwards; }
.chero.is-paused .ch-list a.is-active .bar { animation: none; transform: scaleX(1); }
@keyframes chBar { to { transform: scaleX(1); } }
.ch-all { align-self: flex-start; margin-top: clamp(20px, 3vh, 36px); font-weight: 600; color: #fff; display: inline-flex; gap: 10px; border-bottom: 2px solid var(--blue); padding-bottom: 4px; }
.ch-all span { transition: transform .3s; }
.ch-all:hover span { transform: translateX(5px); }

/* Bild */
.ch-right { grid-column: 8 / -1; display: flex; flex-direction: column; }
.ch-frame { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: #1b1f23; }
.ch-img { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.6s cubic-bezier(.2, .7, .1, 1); }
.ch-img.is-active { opacity: 1; transform: none; z-index: 1; }
.ch-img img { width: 100%; height: 100%; object-fit: cover; }
.ch-cap { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.7); }
.ch-cap .ct { font-variant-numeric: tabular-nums; color: #5fb0e8; font-weight: 600; }

/* Kopfzeile über der dunklen Bühne: Infoleiste passt sich an */
.hero-c .site-header:not(.is-solid) .topbar { background: transparent; }

@media (max-width: 900px) {
  .chero { padding-top: calc(var(--header-h) + 24px); }
  .ch-grid { min-height: 0; }
  .ch-left, .ch-right { grid-column: 1 / -1; }
  .ch-right { order: -1; }
  .ch-frame { flex: none; height: 46vh; min-height: 0; }
  .ch-list .t { font-size: 26px; }
  .ch-list .m { display: none; }
  .ch-eyebrow { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ch-img { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }