.hero {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 120px 5% 60px 5%;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 2rem;
}

.hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 2.5rem;
}

.hero-main-logo {
    height: clamp(160px, 25vw, 375px);
    width: auto;
    margin-top: 1.8%;
}

.hero-title span {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px var(--text-dark);
    letter-spacing: -3px;
}

.hero-desc {
    max-width: 1050px;
    font-size: 1.8rem;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 4rem;
    font-weight: 500;
}

.btn-hero {
    background-color: var(--primary);
    color: white;
    padding: 1.3rem 3.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2rem;
    box-shadow: 0 10px 25px rgba(3, 147, 44, 0.2);
    transition: var(--transition);
}

/* ==========================================================================
   5. STATS BAR & CONTENT SECTIONS
   ========================================================================== */

.stats-bar {
    background: var(--bg-white);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 4rem 5%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item h4 {
    font-size: 3rem;
    color: var(--text-dark);
    font-weight: 800;
}

.stat-item p {
    color: var(--secondary);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- CONTENT SECTION --- */

.content-section {
    padding: 8rem 5%;
}

.section-head {
    margin-bottom: 5rem;
}

.section-head h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

/* ==========================================================================
   5b. DISZIPLINEN: GRID (ohne Blank Space) + CARDS (lesbar + Zoom + "nach vorn")
   ========================================================================== */

/* --- GRID: editorial, ohne Blank Space --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
    grid-auto-flow: dense;

    /* 8 Plätze, 0 Löcher */
    grid-template-areas:
        "r1 r1 r1 r1 r1 r1 r1 r2 r2 r2 r2 r2"
        "r1 r1 r1 r1 r1 r1 r1 r3 r3 r3 r3 r3"
        "r4 r4 r4 r4 r5 r5 r5 r5 r6 r6 r6 r6"
        "r7 r7 r7 r7 r7 r7 r8 r8 r8 r8 r8 r8";

    /* Panel, damit Cards nicht weiß auf weiß sind */
    background: var(--bg-light);
    border: 1px solid #eef2f7;
    border-radius: 28px;
    padding: 2.5rem;
}

/* Rank → feste Positionen */
.sparte-card.rank-1 { grid-area: r1; padding: 4rem 2.5rem; }
.sparte-card.rank-2 { grid-area: r2; padding: 3.6rem 2.2rem; }
.sparte-card.rank-3 { grid-area: r3; }
.sparte-card.rank-4 { grid-area: r4; }
.sparte-card.rank-5 { grid-area: r5; }
.sparte-card.rank-6 { grid-area: r6; }
.sparte-card.rank-7 { grid-area: r7; }
.sparte-card.rank-8 { grid-area: r8; }

/* Falls im HTML noch Icons stehen: komplett ausblenden */
.sparte-icon { display: none; }

/* Card-Head: ohne Icon -> Chip nach rechts */
.card-head {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
}

/* Chip (wird per JS für Top 1/2 eingeblendet) */
.card-chip {
    display: none;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(248,250,252,0.12);
    border: 1px solid rgba(248,250,252,0.16);
    color: rgba(248,250,252,0.92);
}

/* -----------------------------
   CARDS: konsistent + lesbar
   - Bild ist eigene Ebene (::before) -> Zoom auf Hover
   - Overlay + Accent-Line auf (::after)
   - Hover: nach vorn (translateZ/scale) statt nach oben
   ----------------------------- */

.sparte-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    --card-img: none;
    --accent: var(--primary);
    --card-radius: 22px;

    border: 1px solid rgba(15,23,42,0.12);
    border-radius: var(--card-radius);
    background: #0b1220; /* fallback */
    box-shadow: 0 12px 30px rgba(15,23,42,0.06);

    padding: 3.2rem 2rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    /* Performance (Edge + Lenis): keep this fully composited (no 3D/perspective, no permanent layer-promotion) */
    contain: paint;
    transform-style: flat;
    transform: translate3d(0,0,0);
    will-change: auto;

    transition:
        transform 0.35s cubic-bezier(0.4,0,0.2,1),
        box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
        border-color 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* Bild-Layer (zoomt beim Hover) */
.sparte-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: var(--card-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* beruhigt bunte Bilder (statisch, nicht animiert) */
    filter: saturate(0.78) brightness(0.86) contrast(1.08);
    transform: scale(1.01);
    transition:
        transform 0.85s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}

.sparte-card::before,
.sparte-card::after{
  border-radius: var(--card-radius);
  transform-origin: center;
  backface-visibility: hidden;
}

/* Overlay + Accent-Line (oben) */
.sparte-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        /* Accent-Line oben */
        linear-gradient(90deg, var(--accent), transparent 70%) 0 0 / 100% 4px no-repeat,
        /* Corporate-Glow */
        radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        /* Lesbarkeits-Overlay */
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.58) 0%,
            rgba(2, 6, 23, 0.40) 52%,
            rgba(2, 6, 23, 0.70) 100%
        );

    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Content immer über den Layern */
.sparte-card > * {
    position: relative;
    z-index: 2;
}

/* Hover: nur 2D-scale (Edge-freundlich) */
.sparte-card:hover {
    z-index: 5;
    transform: translate3d(0,0,0) scale(1.03);
    will-change: transform;
    box-shadow: 0 30px 70px rgba(15,23,42,0.18);
    border-color: color-mix(in srgb, var(--accent) 30%, rgba(15,23,42,0.12));
}

.sparte-card:hover::before {
    transform: scale(1.10);
}

.sparte-card:hover::after {
    opacity: 0.95;
}

/* Typo (nicht knallweiß, aber sehr gut lesbar) */
.sparte-card h3 {
    margin-bottom: 0.6rem;
    color: rgba(248,250,252,0.94);
}

.card-desc {
    margin: 0 0 1.2rem;
    color: rgba(226,232,240,0.86);
    line-height: 1.6;
    max-width: 56ch;
}

/* Highlights als Tags */
.card-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.4rem;
    padding: 0;
}

.card-highlights li {
    border: 1px solid rgba(248,250,252,0.16);
    background: rgba(248,250,252,0.10);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: rgba(241,245,249,0.92);
}

/* Sicherheitsnetz: falls irgendwo bullets rein-stylen */
.card-highlights li::before { content: none !important; }

/* CTA */
.card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    padding: 0.55rem 0.95rem;
    border-radius: 999px;

    border: 1px solid rgba(248,250,252,0.18);
    background: rgba(248,250,252,0.10);

    font-weight: 800;
    color: rgba(248,250,252,0.94);
    width: fit-content;
    cursor: pointer;

    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.card-link::after {
    content: "→";
    color: var(--accent);
    transition: transform 0.25s ease;
}

/* Link-Pill nimmt beim Hover die gleiche Accent-Farbe wie die Karte an */
#disciplines-grid .sparte-card .card-link:hover,
#disciplines-grid .sparte-card .card-link:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: rgba(248,250,252,0.98); /* Text weiß */
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* Pfeil soll auf der Accent-Fläche nicht mehr Accent-farbig sein */
#disciplines-grid .sparte-card .card-link:hover::after,
#disciplines-grid .sparte-card .card-link:focus-visible::after {
  color: currentColor; /* wird dann weiß wie der Text */
  transform: translateX(4px);
}



/* Rank-Styling (Prominenz nach Aufrufen) */
.sparte-card.rank-1 {
    --accent: var(--primary);
    border-color: rgba(3,147,44,0.26);
}

.sparte-card.rank-1 h3 { font-size: 2.95rem; }
.sparte-card.rank-1 .card-desc { font-size: 1.08rem; }

.sparte-card.rank-2 {
    --accent: var(--secondary);
    border-color: rgba(227,96,104,0.22);
}

.sparte-card h3 { font-size: 2.6rem; }

/* Chip farblich passend */
.sparte-card.rank-1 .card-chip {
    background: rgba(3,147,44,0.16);
    border: 1px solid rgba(3,147,44,0.22);
    color: rgba(248,250,252,0.94);
}

.sparte-card.rank-2 .card-chip {
    background: rgba(227,96,104,0.16);
    border: 1px solid rgba(227,96,104,0.22);
    color: rgba(248,250,252,0.94);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sparte-card,
    .sparte-card::before,
    .sparte-card::after,
    .card-link,
    .card-link::after {
        transition: none !important;
        transform: none !important;
    }

    .sparte-card::before { filter: none !important; }
}

/* Responsive: sauber ohne Löcher */
@media (max-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "r1 r1 r1 r1 r1 r1"
            "r2 r2 r2 r3 r3 r3"
            "r4 r4 r4 r5 r5 r5"
            "r6 r6 r6 r7 r7 r7"
            "r8 r8 r8 r8 r8 r8";
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "r1" "r2" "r3" "r4" "r5" "r6" "r7" "r8";
        padding: 1.6rem;
    }
}

/* Sport-Backgrounds */
.sparte-card[data-sport="rollkunstlauf"]{
  --card-img: url("/media/rollkunstlauf.png");
}
.sparte-card[data-sport="rollhockey"]{
  --card-img: url("/media/rollhockey.png");
}
.sparte-card[data-sport="speedskating"]{
  --card-img: url("/media/speedskating.png");
}
.sparte-card[data-sport="inlinehockey"]{
  --card-img: url("/media/inline-hockey.png");
}
.sparte-card[data-sport="inlineskaterhockey"]{
  --card-img: url("/media/inline-skaterhockey.png");
}
.sparte-card[data-sport="skateboard"]{
  --card-img: url("/media/skateboarding.png");
}
.sparte-card[data-sport="rollerderby"]{
  --card-img: url("/media/rollerderby.png");
}
.sparte-card[data-sport="inlinealpin"]{
  --card-img: url("/media/inlinealpin.png");
}

/* Robust: erzwingt echtes Clipping auch während Transform */
@supports (clip-path: inset(0 round 1px)) {
  .sparte-card::before,
  .sparte-card::after{
    clip-path: inset(0 round var(--card-radius));
  }
}

/* Safari/WebKit Workaround (macht Clipping stabiler bei GPU) */
@supports (-webkit-mask-image: -webkit-radial-gradient(white, black)) {
  .sparte-card::before,
  .sparte-card::after{
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
  }
}

/* =========================
   Edge: Hover-Lock ohne "Snap"
   ========================= */

/* Optional: Edge generell etwas entschärfen (hilft oft spürbar) */
html.is-edge #disciplines-grid .card-link,
html.is-edge #disciplines-grid .card-chip,
html.is-edge #disciplines-grid .card-highlights li{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Filter ist selbst statisch in Edge manchmal teuer beim Smooth-Scroll -> Edge-only aus */
html.is-edge #disciplines-grid .sparte-card::before{
  filter: none !important;
}

/* Während Hover-Lock: nur günstige Transform-Transitions erlauben */
html.is-edge.hover-lock #disciplines-grid .sparte-card{
  transition: transform 180ms ease-out !important; /* KEIN box-shadow/border transition */
}

html.is-edge.hover-lock #disciplines-grid .sparte-card::before{
  transition: transform 220ms ease-out !important;
}

/* Hover wird "weich" neutralisiert (statt instant) */
html.is-edge.hover-lock #disciplines-grid .sparte-card:hover{
  transform: translate3d(0,0,0) scale(1) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.06) !important; /* Basis-Schatten */
  border-color: rgba(15,23,42,0.12) !important;
}

html.is-edge.hover-lock #disciplines-grid .sparte-card:hover::before{
  transform: scale(1.01) !important; /* quasi kein zoom */
}

html.is-edge.hover-lock #disciplines-grid .sparte-card:hover::after{
  opacity: 1 !important;
}

/* =========================
   Card Typography Scale (bigger)
   ========================= */

#disciplines-grid .sparte-card{
  /* zentrale Typo-Variablen */
  --card-title: clamp(2.1rem, 2.2vw, 3.0rem);
  --card-desc:  clamp(1.08rem, 0.75vw, 1.25rem);
  --card-pill:  clamp(0.95rem, 0.55vw, 1.05rem);
  --card-cta:   clamp(1.02rem, 0.65vw, 1.15rem);
  --card-chip:  clamp(0.90rem, 0.55vw, 1.00rem);
}

/* Titel */
#disciplines-grid .sparte-card h3{
  font-size: var(--card-title) !important;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}

/* Beschreibung */
#disciplines-grid .sparte-card .card-desc{
  font-size: var(--card-desc) !important;
  line-height: 1.55;
  margin-bottom: 1.35rem;
}

/* Pills / Highlights */
#disciplines-grid .sparte-card .card-highlights li{
  font-size: var(--card-pill) !important;
  padding: 0.45rem 0.85rem; /* größer & “pilliger” */
}

/* Chip oben rechts */
#disciplines-grid .sparte-card .card-chip{
  font-size: var(--card-chip) !important;
  padding: 0.45rem 0.75rem;
}

/* CTA Button */
#disciplines-grid .sparte-card .card-link{
  font-size: var(--card-cta) !important;
  padding: 0.70rem 1.10rem; /* größer */
}

/* falls du .card-link inzwischen als <a> nutzt */
#disciplines-grid .sparte-card a.card-link{
  text-decoration: none;
  color: inherit;
}

/* CTA-Text in allen Link-Pills wieder hell (Rollkunstlauf bleibt durch sein !important eh hell) */
#disciplines-grid .sparte-card a.card-link{
  color: rgba(248,250,252,0.94);
}

/* Pfeil bleibt im Normalzustand Accent */
#disciplines-grid .sparte-card a.card-link::after{
  color: var(--accent);
}

/* Rank 1 etwas “Hero” */
#disciplines-grid .sparte-card.rank-1{
  --card-title: clamp(2.4rem, 2.6vw, 3.4rem);
  --card-desc:  clamp(1.12rem, 0.85vw, 1.35rem);
}


/* =========================
   Readability Boost (scrim + text shadow)
   ========================= */

/* mehr Lesbarkeit: links dunkler, ohne das Bild komplett zu killen */
#disciplines-grid .sparte-card::after{
  background:
    /* Accent-Line oben */
    linear-gradient(90deg, var(--accent), transparent 70%) 0 0 / 100% 4px no-repeat,

    /* zusätzlicher Scrim von links -> rechts (Text sitzt links) */
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.72) 0%,
      rgba(2, 6, 23, 0.40) 45%,
      rgba(2, 6, 23, 0.18) 70%,
      rgba(2, 6, 23, 0.00) 100%
    ),

    /* Corporate-Glow (wie gehabt) */
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),

    /* vertikaler Verlauf (leicht stärker) */
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.62) 0%,
      rgba(2, 6, 23, 0.44) 52%,
      rgba(2, 6, 23, 0.76) 100%
    );
}

/* Text “poppt” besser auf hellen Bildbereichen */
#disciplines-grid .sparte-card h3,
#disciplines-grid .sparte-card .card-desc{
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* Pills & Button etwas opaker -> besser lesbar */
#disciplines-grid .sparte-card .card-highlights li,
#disciplines-grid .sparte-card .card-link{
  background: rgba(248,250,252,0.14);
  border-color: rgba(248,250,252,0.22);
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

/* Rollkunstlauf: CTA wieder hell / "glassy" */
#disciplines-grid .sparte-card[data-sport="rollkunstlauf"] .card-link{
  background: rgba(248,250,252,0.18) !important;
  border-color: rgba(248,250,252,0.28) !important;
  color: rgba(248,250,252,0.96) !important;
}

/* optional: Hover etwas heller */
#disciplines-grid .sparte-card[data-sport="rollkunstlauf"]:hover .card-link{
  background: rgba(248,250,252,0.24) !important;
  border-color: rgba(248,250,252,0.34) !important;
}

/* Rollkunstlauf: Pill-Hover soll trotzdem voll Accent werden (override der !important-Regeln) */
#disciplines-grid .sparte-card[data-sport="rollkunstlauf"] .card-link:hover,
#disciplines-grid .sparte-card[data-sport="rollkunstlauf"] .card-link:focus-visible{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: rgba(248,250,252,0.98) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}

#disciplines-grid .sparte-card[data-sport="rollkunstlauf"] .card-link:hover::after,
#disciplines-grid .sparte-card[data-sport="rollkunstlauf"] .card-link:focus-visible::after{
  color: currentColor !important;
  transform: translateX(4px);
}

@media (max-width: 768px) {
    .stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding: 2rem 1rem;
    }

    .stat-item h4 {
        font-size: 2rem;
    }

    .stat-item p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .stats-bar {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem;
    }

    .stat-item h4 {
        font-size: 1.8rem;
    }

    .stat-item p {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
  .hero-title span {
    flex: 0 0 auto;
    display: inline-block;

    font-size: clamp(2.7rem, 16vw, 4.2rem);
    line-height: 1;
    letter-spacing: 0.02em;

    color: var(--text-dark);
    -webkit-text-stroke: 0;
    transform: translateY(0.35rem);
  }
}