/* ═══════════════════════════════════════════════════════════════════════════
   FC Königsfeld — Homepage  (BEM · modern native nested CSS)
   The matchday-led Start page: solid floating header, photo hero with a
   red diagonal wedge, overlapping next-match bar, results, league table,
   magazine news, events, Kader band, sponsors, Mitmachen CTA, footer.
   All colours / type / spacing come from css/automatic.css (ACSS tokens).
   Block family is prefixed `v2-` from the design handoff.
   ═══════════════════════════════════════════════════════════════════════════ */

.v2 {
  --v2-head: 104px; /* floating-header height incl. top gap — content offset */
  background: var(--white);
  color: var(--body-color);
}

/* ── Reusable media placeholder ───────────────────────────────────────
   Stands in for the club's real photography (freigestellte players, news
   imagery, sponsor logos). In the WordPress rebuild each becomes a dynamic
   image / ACF field — the markup slot stays, the placeholder is swapped. */
.v2-media {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  background: var(--neutral-light);
  background-image: url('../assets/img/logo-fck.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42% auto;
  overflow: hidden;

  &.v2-media--dark {
    background-color: var(--neutral-ultra-dark);
  }

  & .v2-media__label {
    position: relative;
    margin-block-start: auto;
    align-self: end;
    inline-size: 100%;
    padding: 0.6em 0.8em;
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-trans-70);
    background: linear-gradient(0deg, rgba(8, 8, 8, 0.7), transparent);
  }

  &.v2-media--light .v2-media__label {
    color: var(--neutral-semi-dark);
    background: none;
  }
}

/* ── Kicker / eyebrow — mono, red bar, the one letter-spaced label ───── */
.v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mono-font-family);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);

  &::before {
    content: "";
    inline-size: 1.8em;
    block-size: 3px;
    background: var(--primary);
  }

  &.v2-kicker--light {
    color: var(--white);

    &::before {
      background: var(--primary-semi-light);
    }
  }
}

.v2-title {
  font-family: var(--heading-font-family);
  font-weight: var(--fw-black);
  font-size: var(--h2);
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-block-start: 0.35em;
  line-height: 1;
  text-wrap: balance;

  &.v2-title--light {
    color: var(--white);
  }
}

/* ══ Header (floating, solid white, hairline rule) ════════════════════ */
.v2-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  padding: var(--space-s) var(--gutter) 0;
  pointer-events: none; /* let the floating bar capture, not the gutter */

  & .v2-header__inner {
    pointer-events: auto;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: 0.6rem 0.7rem 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    background: var(--white);
    border: 1px solid var(--black-trans-20);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-m);
    transition: box-shadow var(--transition-duration) var(--transition-timing);
  }

  &.is-scrolled .v2-header__inner {
    box-shadow: var(--box-shadow-l);
  }

  & .v2-header__brand {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  & .v2-header__crest {
    block-size: 88px;
    inline-size: 88px;
    display: block;
    margin-block: -18px;
    filter: drop-shadow(0 6px 14px rgba(12, 12, 13, 0.28));
  }

  & .v2-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  & .v2-header__nav > .v2-header__link:first-child {
    margin-inline-start: auto;
  }

  & .v2-header__nav > .btn {
    margin-inline-start: auto;
  }

  & .v2-header__link {
    position: relative;
    padding: 0.55em 0.85em;
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--neutral-semi-dark);
    transition: color var(--transition-duration) var(--transition-timing);

    &::after {
      content: "";
      position: absolute;
      inset-inline: 0.85em;
      inset-block-end: 0.15em;
      block-size: 2px;
      background: var(--primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-duration) var(--ease-out);
    }

    &:hover,
    &.is-hovered,
    &.v2-header__link--active {
      color: var(--text-dark);
    }

    &:hover::after,
    &.is-hovered::after,
    &.v2-header__link--active::after {
      transform: scaleX(1);
    }
  }
}

/* ══ Hero (matchday poster) ═══════════════════════════════════════════ */
.v2-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0d0d0d;

  & .v2-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* legibility scrim + branded diagonal — dark left, FCK-red wedge right */
  & .v2-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(110deg, var(--neutral-trans-80) 72%, var(--primary-trans-70) 72%),
      linear-gradient(0deg, rgba(8, 8, 8, 0.6) 0%, rgba(8, 8, 8, 0.15) 46%),
      rgba(8, 8, 8, 0.32);
  }

  /* giant outlined year watermark */
  & .v2-hero__ghost {
    position: absolute;
    z-index: 2;
    inset-block-end: 0.04em;
    inset-inline-end: 0.02em;
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: clamp(10rem, 30vw, 36rem);
    line-height: 0.78;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  & .v2-hero__inner {
    position: relative;
    z-index: 3;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    inline-size: 100%;
    padding: calc(var(--v2-head) + var(--section-space-l)) var(--gutter) var(--section-space-l);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  & .v2-hero__title {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: var(--white);
    text-wrap: balance;
    max-inline-size: 13ch;
    margin-block-start: var(--space-s);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);

    & em {
      font-style: normal;
      color: var(--primary-semi-light);
    }
  }

  & .v2-hero__lead {
    margin-block-start: var(--space-m);
    font-size: var(--text-l);
    line-height: 1.55;
    color: var(--white-trans-70);
    max-inline-size: 34ch;
  }

  & .v2-hero__actions {
    margin-block-start: var(--space-l);
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  /* mono "ticket" meta rail */
  & .v2-hero__rail {
    position: relative;
    z-index: 3;
    inset-inline: 0;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--space-s) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    align-items: center;
    border-block-start: 1px solid var(--white-trans-10);
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white-trans-70);

    & span {
      display: inline-flex;
      align-items: center;
      gap: 0.6em;
    }

    & span:not(:first-child)::before {
      content: "";
      inline-size: 4px;
      block-size: 4px;
      border-radius: 50%;
      background: var(--primary-semi-light);
      margin-inline-end: 0.6em;
    }
  }

  & .v2-hero__rail-hash {
    margin-inline-start: auto;
    color: var(--primary-semi-light);

    &::before {
      display: none;
    }
  }

  @media (max-width: 1024px) {
    min-block-size: 0;
    display: flex;
    flex-direction: column;

    & .v2-hero__inner {
      order: 1;
      padding-block: calc(var(--header-height) + var(--space-l)) var(--section-space-l);
    }

    & .v2-hero__rail {
      order: 2;
      position: static;
      margin-block-start: var(--space-s);
    }

    & .v2-hero__title {
      max-inline-size: none;
    }

    & .v2-hero__ghost {
      font-size: 46vw;
    }
  }
}

/* ══ Nächstes Spiel — overlapping fixture bar ═════════════════════════ */
.v2-fixture {
  position: relative;
  z-index: 5;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-block-start: calc(var(--space-xl) * -1);

  & .v2-fixture__card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-m);
    border: 1px solid var(--black-trans-20);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) var(--space-m);
  }

  & .v2-fixture__label {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
  }

  & .v2-fixture__when {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--h4);
    color: var(--text-dark);
    line-height: 1;
    margin-block-start: 0.3em;
  }

  & .v2-fixture__teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
  }

  & .v2-fixture__team {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-weight: 600;
    color: var(--text-dark);

    &.v2-fixture__team--fck {
      color: var(--primary);
    }
  }

  & .v2-fixture__crest {
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--neutral-ultra-light);
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-xs);
    color: var(--neutral-semi-dark);

    &.v2-fixture__crest--fck {
      background: var(--primary);
      color: var(--white);
    }
  }

  & .v2-fixture__vs {
    font-family: var(--mono-font-family);
    font-weight: 600;
    color: var(--neutral-semi-light);
  }

  & .v2-fixture__venue {
    font-size: var(--text-s);
    color: var(--neutral-semi-dark);
    text-align: end;
  }

  @media (max-width: 820px) {
    & .v2-fixture__card {
      grid-template-columns: 1fr;
      text-align: center;
      gap: var(--space-s);
    }

    & .v2-fixture__venue {
      text-align: center;
    }
  }
}

/* ══ Section scaffolding + section heads ══════════════════════════════ */
.v2-section {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding: var(--section-space-m) var(--gutter);
}

.v2-section__head,
.v2-table__head,
.v2-news__head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-block-end: var(--space-l);
  flex-wrap: wrap;

  & > div {
    order: 1;
    flex-shrink: 0;
  }

  &::after {
    content: "";
    order: 2;
    flex: 1;
    min-inline-size: 1.5rem;
    block-size: 1px;
    background: var(--black-trans-20);
  }

  & > a,
  & > .btn {
    order: 3;
    flex-shrink: 0;
  }

  & .v2-kicker {
    color: var(--neutral-semi-dark);
  }
}

/* ══ Ergebnisse cards ═════════════════════════════════════════════════ */
.v2-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.v2-result {
  background: var(--white);
  border: 1px solid var(--black-trans-20);
  border-radius: var(--radius);
  padding: var(--space-s);
  box-shadow: var(--box-shadow-m);
  transition: var(--transition);

  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-l);
  }

  & .v2-result__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    color: var(--neutral-semi-dark);
    margin-block-end: var(--space-xs);
  }

  & .v2-result__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  & .v2-result__team {
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--text-m);

    &.v2-result__team--muted {
      color: var(--neutral-semi-dark);
      font-weight: 500;
    }
  }

  & .v2-result__score {
    font-family: var(--mono-font-family);
    font-weight: 600;
    font-size: var(--h3);
    letter-spacing: -1px;

    &.v2-result__score--win { color: var(--win); }
    &.v2-result__score--loss { color: var(--loss); }
    &.v2-result__score--draw { color: var(--draw); }
  }
}

/* ══ Tabelle (league table widget) ════════════════════════════════════ */
.v2-table {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding: var(--section-space-m) var(--gutter);
}

.v2-table__head {
  align-items: flex-end;
}

.v2-table__grid {
  display: grid;
  grid-template-columns: var(--grid-2-1);
  gap: var(--space-xl);
  align-items: start;

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.v2-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-m);

  & thead th {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-semi-dark);
    font-weight: 500;
    text-align: end;
    padding: 0 0.6em var(--space-xs);
    border-block-end: 2px solid var(--black-trans-20);
  }

  & thead th:nth-child(-n + 2) {
    text-align: start;
  }

  & tbody td {
    padding: 0.7em 0.6em;
    border-block-end: 1px solid var(--black-trans-20);
    text-align: end;
    color: var(--neutral-dark);
  }

  & tbody td:nth-child(-n + 2) {
    text-align: start;
  }

  & .v2-st__pos {
    font-family: var(--mono-font-family);
    color: var(--neutral-semi-dark);
    width: 2.4em;
  }

  & .v2-st__club {
    font-weight: 500;
    color: var(--text-dark);
  }

  & .v2-st__pts {
    font-family: var(--mono-font-family);
    font-weight: 600;
    color: var(--text-dark);
    width: 3em;
  }

  & tr.v2-st--fck td {
    background: var(--primary-ultra-light);
  }

  & tr.v2-st--fck .v2-st__pos,
  & tr.v2-st--fck .v2-st__club {
    color: var(--primary);
    font-weight: 700;
  }

  & tr.v2-st--promo td:first-child {
    box-shadow: inset 3px 0 0 var(--win);
  }

  & tr.v2-st--releg td {
    color: var(--neutral-semi-light);
  }

  & tr.v2-st--releg td:first-child {
    box-shadow: inset 3px 0 0 var(--neutral-light);
  }
}

.v2-table__aside {
  background: var(--neutral-ultra-dark);
  border-radius: var(--radius);
  padding: var(--space-m);
  color: var(--white);

  & .v2-title {
    color: var(--white);
    font-size: var(--h3);
  }

  & p {
    color: var(--white-trans-70);
    font-size: var(--text-m);
    line-height: 1.55;
    margin-block: var(--space-s) var(--space-m);
  }
}

.v2-form {
  display: flex;
  gap: 0.4em;
  margin-block-end: var(--space-m);

  & .v2-form__pill {
    inline-size: 2em;
    block-size: 2em;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-s);
    color: var(--white);

    &.v2-form__pill--win { background: var(--win); }
    &.v2-form__pill--draw { background: var(--draw); }
    &.v2-form__pill--loss { background: var(--loss); }
  }
}

/* ══ News (magazine: lead + stacked list) ═════════════════════════════ */
.v2-news {
  background: var(--neutral-ultra-light);

  & .v2-news__inner {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--section-space-m) var(--gutter);
  }

  & .v2-news__head {
    align-items: flex-end;
  }

  & .v2-news__grid {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--space-l);
    align-items: start;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }
}

.v2-lead {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--neutral-ultra-dark);
  min-block-size: 420px;
  display: flex;
  box-shadow: var(--box-shadow-m);
  transition: var(--transition);

  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-l);
  }

  & .v2-media {
    position: absolute;
    inset: 0;
  }

  & .v2-lead__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(12, 12, 13, 0.92) 6%, rgba(12, 12, 13, 0.1) 60%);
  }

  & .v2-lead__body {
    position: relative;
    z-index: 2;
    margin-block-start: auto;
    padding: var(--space-m);
  }

  & .v2-lead__date {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    color: var(--white-trans-70);
    margin-block-start: 0.6em;
  }

  & .v2-lead__title {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--h3);
    color: var(--white);
    line-height: 1.05;
    margin-block-start: 0.2em;
  }
}

.v2-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.v2-item {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--space-s);
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--box-shadow-m);
  transition: var(--transition);

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-l);
  }

  & .v2-item__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--neutral-light);

    & .v2-media {
      position: absolute;
      inset: 0;
    }
  }

  & .v2-item__body {
    padding: var(--space-s) var(--space-s) var(--space-s) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  & .v2-item__meta {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    color: var(--neutral-semi-dark);
    margin-block-end: 0.45em;
  }

  & .v2-item__title {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-l);
    color: var(--text-dark);
    line-height: 1.12;
  }

  @media (max-width: 480px) {
    grid-template-columns: 96px 1fr;
  }
}

/* stretched link for whole-card click targets */
.v2-stretch {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ══ Events (keine Spiele) ════════════════════════════════════════════ */
.v2-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.v2-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-m);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--black-trans-20);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-m);
  padding: var(--space-s) var(--space-m);
  transition: var(--transition);

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-l);
  }

  & .v2-event__date {
    text-align: center;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius);
    padding: 0.5em 0.6em;
    min-inline-size: 4.4em;
  }

  & .v2-event__d {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--h4);
    line-height: 1;
  }

  & .v2-event__mo {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-start: 0.25em;
  }

  & .v2-event__body h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-l);
    color: var(--text-dark);
    letter-spacing: -0.01em;
  }

  & .v2-event__meta {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    color: var(--primary);
    margin-block-start: 0.3em;
  }

  & .v2-event__desc {
    font-size: var(--text-s);
    color: var(--neutral-dark);
    margin-block-start: 0.35em;
    line-height: 1.5;
  }

  @media (max-width: 640px) {
    grid-template-columns: auto 1fr;

    & > .btn {
      display: none;
    }
  }
}

/* ══ Kader band (dark, cut-out players) ═══════════════════════════════ */
.v2-kader {
  position: relative;
  background: var(--neutral-ultra-dark);
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 34%;
    background: var(--primary-trans-10);
    clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
  }

  & .v2-kader__inner {
    position: relative;
    z-index: 1;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--section-space-m) var(--gutter);
    display: grid;
    grid-template-columns: var(--grid-1-2);
    gap: var(--space-xl);
    align-items: center;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  & .v2-kader__text p {
    color: var(--white-trans-70);
    font-size: var(--text-l);
    line-height: 1.55;
    margin-block: var(--space-s) var(--space-m);
    max-inline-size: 38ch;
  }

  & .v2-kader__roster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);

    @media (max-width: 560px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.v2-kplayer {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(165deg, #2c2c2c 0%, #141414 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: var(--transition);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 36%;
    block-size: 4px;
    background: var(--primary);
  }

  & .v2-media {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  & .v2-kplayer__plate {
    position: absolute;
    z-index: 2;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 1.6em 0.75em 0.75em;
    background: linear-gradient(0deg, rgba(8, 8, 8, 0.95) 24%, rgba(8, 8, 8, 0.2) 80%, transparent);
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
  }

  & .v2-kplayer__meta {
    min-inline-size: 0;
  }

  & .v2-kplayer__first {
    display: block;
    font-size: var(--text-xs);
    color: var(--white-trans-70);
    line-height: 1.15;
    margin-block-start: 0.15em;
  }

  & .v2-kplayer__last {
    display: block;
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-m);
    color: var(--white);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
  }
}

/* ══ Sponsoren ════════════════════════════════════════════════════════ */
.v2-sponsors {
  background: var(--neutral-ultra-light);

  & .v2-sponsors__inner {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--section-space-m) var(--gutter);
  }

  & .v2-sponsors__intro {
    margin-block-start: calc(var(--space-l) * -0.5);
    margin-block-end: var(--space-l);
    color: var(--neutral-semi-dark);
    font-size: var(--text-m);
    line-height: 1.55;
    max-inline-size: 64ch;
  }

  & .v2-sponsors__cta {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-block-start: var(--space-l);
    flex-wrap: wrap;
  }
}

.v2-tier {
  margin-block-start: var(--space-l);

  & .v2-tier__label {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-end: var(--space-s);
  }

  & .v2-tier__name {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
  }

  & .v2-tier__rule {
    flex: 1;
    block-size: 1px;
    background: var(--black-trans-20);
  }
}

.v2-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.v2-logo {
  flex: 1 1 200px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--black-trans-20);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  min-block-size: 130px;
  padding: var(--space-m);
  overflow: hidden;
  transition: var(--transition);

  &:hover {
    box-shadow: var(--box-shadow-m);
    transform: translateY(-3px);
    border-color: var(--neutral-light);
  }

  &.v2-logo--lg {
    flex: 1 1 320px;
    min-block-size: 170px;
  }

  & .v2-media {
    position: absolute;
    inset: var(--space-m);
    inline-size: auto;
    block-size: auto;
    place-items: center;
    background: none;

    & .v2-media__label {
      margin-block: 0;
      align-self: center;
      text-align: center;
      color: var(--neutral-semi-light);
      background: none;
    }
  }

  & .v2-logo__img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
  }

  @media (max-width: 520px) {
    flex-basis: 40%;
  }
}

/* ══ Mitmachen (red CTA band) ═════════════════════════════════════════ */
.v2-join {
  position: relative;
  background: linear-gradient(110deg, var(--primary) 0%, var(--primary-dark) 60%, var(--primary-ultra-dark) 100%);
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, var(--primary-ultra-dark) 16%, transparent 16%);
  }

  & .v2-join__mark {
    position: absolute;
    z-index: 0;
    inset-block: -16% -16%;
    inset-inline-end: -6%;
    block-size: 132%;
    opacity: 0.1;
    filter: brightness(0) invert(1);
    pointer-events: none;
  }

  & .v2-join__inner {
    position: relative;
    z-index: 1;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--section-space-l) var(--gutter);
  }

  & .v2-join__title {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--white);
    text-wrap: balance;
    max-inline-size: 16ch;

    & .v2-join__hash {
      opacity: 0.5;
    }
  }

  & .v2-join__text {
    margin-block: var(--space-s) var(--space-m);
    font-size: var(--text-l);
    line-height: 1.55;
    color: var(--white);
    opacity: 0.92;
    max-inline-size: 44ch;
  }

  & .v2-join__actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
}

/* ══ Footer ═══════════════════════════════════════════════════════════ */
.v2-footer {
  background: var(--black);
  color: var(--white-trans-70);

  & .v2-footer__inner {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--section-space-s) var(--gutter) var(--space-m);
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-l);
  }

  & .v2-footer__about p {
    margin-block-start: var(--space-xs);
    font-size: var(--text-s);
    line-height: 1.6;
    max-inline-size: 30ch;
  }

  & .v2-footer__col-title {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-semi-light);
    margin-block-end: var(--space-xs);
  }

  & .v2-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6em;

    & a {
      color: var(--white-trans-70);
      font-size: var(--text-s);

      &:hover {
        color: var(--white);
      }
    }
  }

  & .v2-footer__bar {
    border-top: 1px solid var(--white-trans-10);
  }

  & .v2-footer__bar-inner {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--space-xs) var(--gutter);
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--neutral-semi-light);
  }

  & .v2-footer__legal {
    display: flex;
    gap: 1.2rem;

    & a {
      color: var(--neutral-semi-light);

      &:hover {
        color: var(--white);
      }
    }
  }

  @media (max-width: 980px) {
    & .v2-footer__inner {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 560px) {
    & .v2-footer__inner {
      grid-template-columns: 1fr;
    }
  }
}

/* ══ Mega menu (desktop) ══════════════════════════════════════════════ */
.v2-mega {
  pointer-events: auto;
  position: absolute;
  inset-inline: var(--gutter);
  inset-block-start: calc(100% + var(--space-xs));
  z-index: 45;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--black-trans-20);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-l);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;

  &.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  & .v2-mega__inner {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--space-l) var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-xl);
    align-items: stretch;
  }

  & .v2-mega__cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  & .v2-mega__col-title {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-semi-light);
    margin-block-end: var(--space-s);
  }

  & .v2-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    & li:last-child .v2-mega__link {
      border-block-end: 0;
    }
  }

  & .v2-mega__link {
    display: flex;
    align-items: center;
    padding: 0.5em 0;
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--neutral-dark);
    border-block-end: 1px solid var(--black-trans-20);
    transition: color 120ms var(--transition-timing), padding-inline-start 120ms var(--transition-timing);

    &::before {
      content: "";
      inline-size: 0;
      block-size: 2px;
      background: var(--primary);
      margin-inline-end: 0;
      transition: inline-size 140ms var(--ease-out), margin-inline-end 140ms var(--ease-out);
    }

    &:hover {
      color: var(--primary);
    }

    &:hover::before {
      inline-size: 0.9em;
      margin-inline-end: 0.5em;
    }
  }

  & .v2-mega__feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.25em;
    inline-size: 280px;
    padding: var(--space-m);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: linear-gradient(165deg, var(--primary) 0%, var(--primary-ultra-dark) 100%);
    transition: var(--transition);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-l);
    }
  }

  & .v2-mega__feature-kicker {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.85;
  }

  & .v2-mega__feature-title {
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--h4);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-block-start: 0.2em;
  }

  & .v2-mega__feature-text {
    font-size: var(--text-s);
    line-height: 1.45;
    color: var(--white);
    opacity: 0.9;
    margin-block-start: 0.3em;
  }

  & .v2-mega__feature-go {
    font-family: var(--mono-font-family);
    font-size: var(--text-xs);
    margin-block-start: var(--space-s);
  }

  @media (prefers-reduced-motion: reduce) {
    transition: opacity 120ms linear, visibility 120ms;
    transform: none;
  }

  @media (max-width: 980px) {
    display: none;
  }
}

/* ══ Burger + mobile drawer ═══════════════════════════════════════════ */
.v2-burger {
  display: none;
  margin-inline-start: auto;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  & span {
    display: block;
    inline-size: 24px;
    block-size: 2px;
    background: var(--text-dark);
    transition: transform 180ms var(--ease-out), opacity 140ms;
  }

  &.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  &.is-active span:nth-child(2) {
    opacity: 0;
  }

  &.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  @media (max-width: 980px) {
    display: flex;
  }
}

.v2-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--black-trans-40);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 200ms;

  &.is-open {
    opacity: 1;
    visibility: visible;
  }

  & .v2-drawer__inner {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(86vw, 380px);
    background: var(--white);
    padding: calc(var(--header-height) + var(--space-s)) var(--gutter) var(--space-l);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 220ms var(--ease-out);
    box-shadow: var(--box-shadow-l);
  }

  &.is-open .v2-drawer__inner {
    transform: none;
  }

  & .v2-drawer__group {
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--black-trans-20);
  }

  & .v2-drawer__head {
    display: block;
    font-family: var(--heading-font-family);
    font-weight: var(--fw-black);
    font-size: var(--text-l);
    color: var(--text-dark);
    letter-spacing: -0.01em;
  }

  & .v2-drawer__list {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  & .v2-drawer__link {
    display: block;
    padding: 0.4em 0;
    font-size: var(--text-m);
    color: var(--neutral-semi-dark);

    &:hover {
      color: var(--primary);
    }
  }
}

/* hide desktop nav links + CTA on mobile (burger takes over) */
@media (max-width: 980px) {
  .v2-header .v2-header__nav,
  .v2-header .v2-header__inner > .btn {
    display: none;
  }
}

/* Motion reveal — Startzustände + Animationen liegen jetzt in css/motion.css
   (data-motion-* Attribute, portiert aus dem motion.dev-Stack). */