/* ==========================================================
   RUGBY CLUB GRAZ — Design System
   Brand green sampled from the club crest: #364838
   ========================================================== */

:root {
  --green-deep: #1d2a20;   /* near-black green, dark sections */
  --green: #364838;        /* brand green from the crest */
  --green-soft: #4d6350;
  --lime: #b9e45a;         /* accent */
  --cream: #f2efe6;        /* light background */
  --cream-dim: #e7e3d5;
  --ink: #1a211c;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lime); color: var(--green-deep); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* ============ Preloader ============ */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  transition: clip-path 0.9s var(--ease-out);
  clip-path: inset(0 0 0 0);
}
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.preloader__logo {
  width: 90px; border-radius: 50%;
  background: #fff;
  animation: pulse 1.2s ease-in-out infinite alternate;
}
.preloader__text {
  color: var(--cream); font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.4em;
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ============ Custom cursor ============ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 14px; height: 14px; border-radius: 50%;
  /* cream through difference = near-black on cream sections,
     near-white on dark green — both on-brand (lime turned purple) */
  background: var(--cream); mix-blend-mode: difference;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, opacity 0.25s;
  opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 48px; height: 48px; }
@media (hover: none) { .cursor { display: none; } }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 2rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease-out), background 0.35s, color 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn--solid { background: var(--green); color: var(--cream); }
.btn--solid:hover { background: var(--green-deep); }
.btn--ghost { border-color: var(--green); color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--cream); }
.btn--lime { background: var(--lime); color: var(--green-deep); }
.btn--lime:hover { background: var(--cream); }
.btn--big { padding: 1.3rem 3.2rem; font-size: 1.15rem; }

/* ============ Header ============ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--pad);
  transition: transform 0.45s var(--ease-out), background 0.3s, box-shadow 0.3s;
}
.header.is-scrolled {
  background: rgba(242, 239, 230, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(26, 33, 28, 0.08);
}
.header.is-hidden { transform: translateY(-110%); }
.header__brand { display: flex; align-items: center; gap: 0.75rem; }
.header__logo {
  width: 48px;
  transition: transform 0.4s var(--ease-out);
}
.header__brand:hover .header__logo { transform: rotate(-8deg) scale(1.06); }
.header__name {
  font-size: 0.78rem; font-weight: 800; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.header__nav { display: flex; gap: 2rem; }
.header__link {
  font-size: 0.92rem; font-weight: 500; position: relative;
}
.header__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.header__link:hover::after { transform: scaleX(1); transform-origin: left; }
.header__burger {
  display: none; flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.header__burger span {
  width: 26px; height: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.header__burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.header__burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ Mobile menu ============ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-out), visibility 0s 0.6s;
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease-out), visibility 0s 0s;
}
.mobile-menu__nav { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; }
.mobile-menu__link {
  color: var(--cream); font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800; text-transform: uppercase;
  font-variation-settings: "wdth" 115;
}
.mobile-menu__link--accent { color: var(--lime); }

/* ============ Hero ============ */
.hero {
  min-height: 100svh;
  padding: clamp(7rem, 14vh, 10rem) var(--pad) 4rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}
.hero__kicker {
  font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.5rem;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime); border: 2px solid var(--green);
  flex-shrink: 0;
}
.hero__title {
  font-size: clamp(3.2rem, 11vw, 9.5rem);
  font-weight: 900; line-height: 0.92;
  text-transform: uppercase;
  font-variation-settings: "wdth" 120;
  letter-spacing: -0.015em;
}
.hero__line { display: block; overflow: hidden; }
.hero__line--indent { padding-left: clamp(1rem, 4vw, 4rem); }
.hero__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
body.is-loaded .hero__word { transform: translateY(0); }
body.is-loaded .hero__line:nth-child(2) .hero__word { transition-delay: 0.12s; }
.hero__word--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--green);
}
.hero__bottom { margin-top: 2.5rem; max-width: 34rem; }
.hero__sub { font-size: 1.05rem; color: rgba(26, 33, 28, 0.75); }
.hero__actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.hero__media { position: relative; }
.hero__img-wrap {
  border-radius: 24px; overflow: hidden;
  aspect-ratio: 3 / 4;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-out) 0.25s;
}
body.is-loaded .hero__img-wrap { clip-path: inset(0 0 0 0); }
.hero__img {
  width: 100%; height: 115%; object-fit: cover;
  will-change: transform;
}
.hero__badge {
  position: absolute; bottom: -36px; left: -36px;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
}
.hero__badge-svg {
  position: absolute; inset: 0;
  animation: spin 14s linear infinite;
}
.hero__badge-svg text {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; fill: var(--green);
  text-transform: uppercase;
}
.hero__badge-logo {
  width: 64px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 24px rgba(26, 33, 28, 0.2);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__scroll-hint {
  position: absolute; bottom: 2rem; left: var(--pad);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.8rem;
  color: rgba(26, 33, 28, 0.55);
}
.hero__scroll-line {
  display: block; width: 56px; height: 1px;
  background: rgba(26, 33, 28, 0.35);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--green);
  animation: scrollLine 1.8s var(--ease-out) infinite;
}
@keyframes scrollLine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ============ Marquee ============ */
.marquee { overflow: hidden; padding: 1.4rem 0; }
.marquee--dark { background: var(--green-deep); color: var(--cream); }
.marquee--lime { background: var(--lime); color: var(--green-deep); }
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee__track--reverse { animation-direction: reverse; }
.marquee__item {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 800; text-transform: uppercase;
  white-space: nowrap;
  font-variation-settings: "wdth" 115;
}
.marquee--dark .marquee__item--outline {
  color: transparent; -webkit-text-stroke: 1.5px var(--cream);
}
.marquee--lime .marquee__item--outline {
  color: transparent; -webkit-text-stroke: 1.5px var(--green-deep);
}
.marquee__star { font-size: 1.3rem; color: var(--lime); }
.marquee--lime .marquee__star { color: var(--green-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ Sections ============ */
section[id], footer[id] { scroll-margin-top: 5.5rem; }
.section { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.section--dark { background: var(--green-deep); color: var(--cream); }
.section__head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.section__label {
  font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--green-soft); display: block; margin-bottom: 1.2rem;
}
.section__label--light { color: var(--lime); }
.section__title {
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  font-weight: 900; line-height: 1.0;
  text-transform: uppercase;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.01em;
}
.section__title em {
  color: transparent; -webkit-text-stroke: 2px var(--green);
  font-style: normal;
}
.section__title--light { color: var(--cream); }
.section__title--light em { -webkit-text-stroke-color: var(--lime); }

/* line-reveal animation */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block; transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
}
.reveal-line.in-view > span { transform: translateY(0); }
.reveal-line:nth-child(2) > span { transition-delay: 0.1s; }

/* parallax images get 28px slack on both sides so the ±28px
   scroll shift never pulls an edge inside the rounded mask */
[data-parallax] img {
  position: relative;
  top: -28px;
  height: calc(115% + 28px);
}

/* generic fade-up reveal */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============ Club ============ */
.club__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.club__lead { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.4rem; }
.club__text p + p { margin-top: 1.1rem; }
.club__text p:not(.club__lead) { color: rgba(26, 33, 28, 0.72); }
.club__img-wrap {
  border-radius: 24px; overflow: hidden; position: relative;
  aspect-ratio: 4 / 3;
}
.club__img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.club__img-caption {
  position: absolute; bottom: 1rem; left: 1rem;
  background: var(--green-deep); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border-radius: 999px;
}

/* stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(26, 33, 28, 0.12);
  border-top: 1px solid rgba(26, 33, 28, 0.12);
  border-bottom: 1px solid rgba(26, 33, 28, 0.12);
  margin-top: clamp(3rem, 8vh, 5rem);
}
.stat {
  background: var(--cream); padding: 2.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  text-align: center;
}
.stat__num {
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900;
  font-variation-settings: "wdth" 118;
  color: var(--green); line-height: 1;
}
.stat__label {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26, 33, 28, 0.6);
}

/* ============ Teams ============ */
.teams__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.team-card {
  background: rgba(242, 239, 230, 0.05);
  border: 1px solid rgba(242, 239, 230, 0.14);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
.team-card:hover { transform: translateY(-8px); border-color: var(--lime); }
.team-card__media { aspect-ratio: 16 / 11; overflow: hidden; }
.team-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s;
  filter: saturate(0.85);
}
.team-card:hover .team-card__media img { transform: scale(1.07); filter: saturate(1.1); }
.team-card__body { padding: 1.6rem 1.6rem 1.8rem; }
.team-card__tag {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--lime);
}
.team-card__title {
  font-size: 2rem; font-weight: 900; text-transform: uppercase;
  font-variation-settings: "wdth" 118;
  margin: 0.5rem 0 0.6rem;
}
.team-card__text { color: rgba(242, 239, 230, 0.7); font-size: 0.95rem; }
.team-card__meta {
  display: block; margin-top: 1.1rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; color: rgba(242, 239, 230, 0.55);
}

/* ============ Erfolge ============ */
.erfolge { position: relative; }
.trophy-list { list-style: none; }
.trophy {
  display: grid; grid-template-columns: 6rem 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: 1.4rem 0.5rem;
  border-bottom: 1px solid rgba(26, 33, 28, 0.14);
  position: relative;
  transition: padding-left 0.4s var(--ease-out), background 0.3s;
}
.trophy:first-child { border-top: 1px solid rgba(26, 33, 28, 0.14); }
.trophy:hover { padding-left: 1.4rem; background: rgba(54, 72, 56, 0.05); }
.trophy__year {
  font-family: var(--font-mono); font-size: 0.95rem;
  color: var(--green-soft);
}
.trophy__title {
  font-size: clamp(1.3rem, 3.2vw, 2.2rem); font-weight: 800;
  text-transform: uppercase; font-variation-settings: "wdth" 112;
  transition: color 0.3s;
}
.trophy:hover .trophy__title { color: var(--green); }
.trophy__arrow {
  font-size: 1.5rem; color: var(--green);
  transform: translateX(-8px); opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.trophy:hover .trophy__arrow { transform: translateX(0); opacity: 1; }

.trophy-preview {
  position: fixed; z-index: 50;
  width: 300px; aspect-ratio: 3 / 2;
  border-radius: 14px; overflow: hidden;
  pointer-events: none;
  opacity: 0; transform: scale(0.85) rotate(-3deg);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  box-shadow: 0 20px 60px rgba(26, 33, 28, 0.35);
}
.trophy-preview.is-visible { opacity: 1; transform: scale(1) rotate(0deg); }
.trophy-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .trophy-preview { display: none; } }

/* ============ News ============ */
.news__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.news-card {
  border-radius: 20px; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(26, 33, 28, 0.1);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(26, 33, 28, 0.12);
}
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__body { padding: 1.5rem 1.5rem 1.7rem; }
.news-card__tag {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--green-soft);
  background: rgba(54, 72, 56, 0.08);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.news-card__title {
  font-size: 1.25rem; font-weight: 800; line-height: 1.25;
  margin: 0.9rem 0 0.5rem;
}
.news-card__text { font-size: 0.92rem; color: rgba(26, 33, 28, 0.65); }

/* ============ Training ============ */
.training__grid { border-top: 1px solid rgba(242, 239, 230, 0.18); }
.training__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 2rem 0.5rem;
  border-bottom: 1px solid rgba(242, 239, 230, 0.18);
  transition: padding-left 0.4s var(--ease-out);
}
.training__row:hover { padding-left: 1.4rem; }
.training__team {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 900;
  text-transform: uppercase; font-variation-settings: "wdth" 118;
}
.training__team small {
  font-size: 0.45em; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: 0.1em;
  color: var(--lime); margin-left: 0.6rem;
}
.training__times {
  font-family: var(--font-mono); font-size: 1rem;
  color: rgba(242, 239, 230, 0.75);
}
.training__note {
  max-width: 36rem; margin: 2.5rem 0;
  color: rgba(242, 239, 230, 0.7);
}

/* Trainingsort + Karte -------------------------------------------------------
   The venue is the training table's last row (same .training__row treatment as
   the teams) — where you train is the same class of fact as when. The map then
   runs full-bleed beneath it: a landscape, not a card, which is why it cancels
   the section's inline padding and drops the 20px radius the card components
   use elsewhere. */
/* Mobile first: edge to edge. On a phone the screen is the column, and the
   side padding would only shrink an already small map — so it bleeds, and the
   taller 4:3 buys back the height a letterbox would cost. */
.training__map {
  position: relative;
  margin: clamp(2rem, 5vh, 3rem) calc(var(--pad) * -1) 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--green-deep);
  border-top: 1px solid rgba(242, 239, 230, 0.18);
  border-bottom: 1px solid rgba(242, 239, 230, 0.18);
}
.training__map-status,
.training__map-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 239, 230, 0.55);
}
.training__map-fallback { color: var(--lime); }

/* Desktop: back inside the content column so the map's edges line up with the
   hairline rows above it, using the same 20px radius as the other cards. The
   height cap matters more than the ratio here — at 21:9 an ultrawide display
   would stretch it into a 1000px band, so whichever of the two is smaller
   wins. */
@media (min-width: 981px) {
  .training__map {
    margin-left: 0;
    margin-right: 0;
    /* Height is set outright rather than by ratio. aspect-ratio plus a
       max-height makes the browser shrink the WIDTH to preserve the ratio, so
       the map ended up 43px narrower than the rows above it and visibly
       misaligned on the right. A fixed height keeps the box full-column at
       every width and simply lets the map get more panoramic on wide screens
       instead of growing into a 1000px band. */
    aspect-ratio: auto;
    height: clamp(380px, 32vw, 560px);
    border: 1px solid rgba(242, 239, 230, 0.18);
    border-radius: 20px;
  }
}

/* Leaflet lives inside the aspect-ratio box; it needs a sized element. */
.training__map-canvas { position: absolute; inset: 0; background: var(--green-deep); }

/* SIGNATURE — the basemap is pushed into the club's green so the map reads as
   part of this section rather than as an embed. Dark Matter is already dark
   and neutral, so this only adds hue and lifts it slightly; the luminance
   structure that makes roads and labels readable is left intact. Scoped to the
   tile pane, which leaves the marker, the popup and the CARTO/OSM attribution
   untouched — attribution legibility is a licence term, not a taste call. */
.training__map .leaflet-tile-pane {
  filter: sepia(1) hue-rotate(75deg) saturate(1.2) brightness(1.25) contrast(1.1);
}

/* The crest is transparent and its ink sits close to the map's greens, so it
   gets the same white disc the dark sections use — ringed in lime, the only
   saturated thing left on a monochrome map, so the pin is findable. */
.training__marker {
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--lime), 0 8px 24px rgba(26, 33, 28, 0.55);
}

/* Leaflet control chrome defaults to z-index 1000, which would cover the
   custom cursor (999). Drop it below so the cursor stays on top. */
.training__map .leaflet-top,
.training__map .leaflet-bottom { z-index: 400; }

.training__map .leaflet-control-zoom a {
  background: var(--cream); color: var(--ink);
  border-color: rgba(26, 33, 28, 0.15);
  font-family: var(--font-display); font-weight: 700;
}
.training__map .leaflet-control-zoom a:hover { background: var(--lime); color: var(--green-deep); }
.training__map .leaflet-control-attribution {
  background: rgba(242, 239, 230, 0.85);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em;
}
.training__map .leaflet-control-attribution a { color: var(--green); }
.training__map .leaflet-popup-content-wrapper {
  border-radius: 16px; background: var(--cream); color: var(--ink);
}
.training__map .leaflet-popup-content {
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.7;
  margin: 0.9rem 1.1rem;
}
.training__map .leaflet-popup-content a { color: var(--green); font-weight: 700; }
.training__map .leaflet-popup-tip { background: var(--cream); }

/* ============ Anmeldung ============ */
.anmeldung__grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.anmeldung__lead { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.4rem; }
.anmeldung__text p:not(.anmeldung__lead) { color: rgba(26, 33, 28, 0.72); }
.anmeldung__facts {
  list-style: none; margin-top: 2.2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.anmeldung__facts li {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-soft);
}
.anmeldung__form {
  background: var(--cream-dim); border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.anmeldung__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.anmeldung__field { display: flex; flex-direction: column; gap: 0.5rem; }
.anmeldung__label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--green-soft);
}
.anmeldung__label small { font-size: inherit; text-transform: none; letter-spacing: 0.05em; }
.anmeldung__form input,
.anmeldung__form select,
.anmeldung__form textarea {
  font: inherit; color: var(--ink);
  background: var(--cream);
  border: 1.5px solid rgba(26, 33, 28, 0.15);
  border-radius: 999px;
  padding: 0.8rem 1.3rem;
  transition: border-color 0.3s;
  width: 100%;
}
.anmeldung__form textarea { border-radius: 20px; resize: vertical; min-height: 7rem; }
.anmeldung__form input:focus,
.anmeldung__form select:focus,
.anmeldung__form textarea:focus {
  outline: none; border-color: var(--green);
}
.anmeldung__form ::placeholder { color: rgba(26, 33, 28, 0.4); }
.anmeldung__submit {
  align-self: flex-start; margin-top: 0.3rem;
  font-family: inherit; cursor: pointer;
}
.anmeldung__hint {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.05em; color: rgba(26, 33, 28, 0.55);
}
/* Honeypot: moved off-screen, not display:none — bots ignore fields that are
   explicitly hidden but happily fill ones that merely sit out of view. */
.anmeldung__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.anmeldung__submit[disabled] { opacity: 0.55; cursor: progress; }
.anmeldung__status {
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5;
  letter-spacing: 0.02em; padding: 0.7rem 1rem; border-radius: 14px;
  border-left: 3px solid var(--green-soft); background: rgba(255, 255, 255, 0.6);
}
.anmeldung__status.is-ok { border-left-color: var(--green); }
.anmeldung__status.is-error {
  border-left-color: #b4472f; color: #7d2f1d;
  background: rgba(180, 71, 47, 0.08);
}

/* ============ Instagram ============ */
.insta__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.insta-post {
  position: relative; display: block;
  border-radius: 20px; overflow: hidden;
  aspect-ratio: 1;
}
.insta-post img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.8s var(--ease-out), filter 0.5s;
}
.insta-post:hover img { transform: scale(1.06); filter: saturate(1.1); }
.insta-post__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(to top, rgba(26, 33, 28, 0.75), rgba(26, 33, 28, 0) 45%);
  color: var(--cream);
  opacity: 0; transition: opacity 0.4s;
}
.insta-post:hover .insta-post__overlay,
.insta-post:focus-visible .insta-post__overlay { opacity: 1; }
/* touch devices have no hover — keep the link affordance visible */
@media (hover: none) { .insta-post__overlay { opacity: 1; } }
.insta-post__handle {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: lowercase;
}
.insta-post__arrow { font-size: 1.3rem; line-height: 1; color: var(--lime); }
/* official IG embeds, written between the INSTA-FEED markers by
   scripts/update_insta_feed.py — override Instagram's inline styles */
.insta-embed { min-width: 0; }
.insta-embed .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(26, 33, 28, 0.35) !important;
}
.insta__cta { margin-top: clamp(2.5rem, 5vh, 3.5rem); text-align: center; }

/* ============ Sponsors ============ */
.sponsors { text-align: center; }
.sponsors__strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin: 3rem 0 3.5rem;
}
.sponsors__strip img {
  height: 56px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.4s, transform 0.4s var(--ease-out);
}
.sponsors__strip img:hover { filter: grayscale(0) opacity(1); transform: scale(1.08); }
.sponsors__federations {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: 2.5rem;
  border-top: 1px solid rgba(26, 33, 28, 0.1);
}
.sponsors__federations img {
  height: 44px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.4s;
}
.sponsors__federations img:hover { filter: grayscale(0) opacity(1); }

/* ============ Footer ============ */
.footer {
  background: var(--green-deep); color: var(--cream);
  padding: clamp(5rem, 12vh, 8rem) var(--pad) 2rem;
  position: relative; overflow: hidden;
}
.footer__cta {
  text-align: center; margin-bottom: clamp(4rem, 9vh, 7rem);
  display: flex; flex-direction: column; align-items: center; gap: 2.2rem;
}
.footer__title {
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  font-variation-settings: "wdth" 120;
}
.footer__title em {
  color: transparent; -webkit-text-stroke: 2px var(--lime);
  font-style: normal;
}
.footer__grid {
  display: grid; grid-template-columns: auto repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(242, 239, 230, 0.15);
}
.footer__logo {
  width: 88px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(242, 239, 230, 0.12);
}
.footer__heading {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 0.9rem;
}
.footer__col p { font-size: 0.95rem; color: rgba(242, 239, 230, 0.75); }
.footer__col a { border-bottom: 1px solid rgba(242, 239, 230, 0.3); transition: color 0.3s, border-color 0.3s; }
.footer__col a:hover { color: var(--lime); border-color: var(--lime); }
.footer__giant {
  font-size: clamp(2rem, 10.5vw, 12rem);
  font-weight: 900; text-transform: uppercase;
  font-variation-settings: "wdth" 122;
  text-align: center; line-height: 1;
  margin: 3rem 0 1rem;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 239, 230, 0.22);
  white-space: nowrap;
  user-select: none;
}
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; color: rgba(242, 239, 230, 0.45);
  padding-top: 1.5rem;
}

/* ============ Responsive ============ */
/* Tablet & below: hero stacks and everything heading-like centers.
   980px (not 800) so iPad portrait widths (768/810/820/834) are covered. */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__inner { text-align: center; }
  .hero__kicker { justify-content: center; }
  .hero__line--indent { padding-left: 0; }
  .hero__bottom { margin: 2.5rem auto 0; }
  .hero__actions { justify-content: center; }
  .hero__media { max-width: 480px; margin: 0 auto; }
  .hero__scroll-hint { display: none; }
  .section__head { text-align: center; }
  .club__grid { grid-template-columns: 1fr; }
  /* cap the reading measure when the text column goes full-width */
  .club__text { max-width: 40rem; margin: 0 auto; }
  .club__img-wrap { max-width: 560px; width: 100%; margin: 0 auto; }
  .teams__grid, .news__grid { grid-template-columns: 1fr 1fr; }
  /* odd card count in a 2-col grid: let the last card span full width
     instead of sitting as a left-aligned orphan */
  .teams__grid .team-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .training { text-align: center; }
  /* ...but not the rows. Centring is invisible on the short team names,
     whose flex items stay narrower than the line, and only shows up once
     a long value (the venue name) fills the line and wraps. Keep every
     row reading from the same left edge. */
  .training__row { text-align: left; }
  .training__note { margin-left: auto; margin-right: auto; }
  .anmeldung__grid { grid-template-columns: 1fr; }
  /* cap the reading measure when the columns stack */
  .anmeldung__text { max-width: 40rem; margin: 0 auto; }
  .anmeldung__form { max-width: 40rem; width: 100%; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .header__nav, .header__cta { display: none; }
  .header__burger { display: flex; }
}

@media (max-width: 640px) {
  .teams__grid, .news__grid { grid-template-columns: 1fr; }
  .anmeldung__row { grid-template-columns: 1fr; }
  /* 3 square tiles are too small side-by-side on phones — stack them */
  .insta__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .trophy { grid-template-columns: 4rem 1fr auto; gap: 0.8rem; }
  .hero__badge { right: -10px; left: auto; bottom: -28px; transform: scale(0.8); }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__logo { margin: 0 auto; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* dev screenshot mode: collapse viewport-height hero */
.shotmode .hero { min-height: auto; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-line > span, .hero__word { opacity: 1; transform: none; }
  .hero__img-wrap { clip-path: none; }
}