/* ===========================================
   LOCAL WEBFONTS – MONOTON & INTER
==============================================*/

/* monoton-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/monoton-v22-latin-regular.woff2') format('woff2');
}

/* inter-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}

/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}

/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}

/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}


/* ======================================================
   GLOBAL VARIABLES & RESET
====================================================== */

:root {
    --color-brand: #BD1C22;
    --color-bg: #050608;
    --color-text: #ffffff;
    --color-card: #ffffff;
    --color-muted: #909090;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --shadow-soft: 0 24px 60px rgba(0,0,0,0.35);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
}

.page {
    min-height: 100vh;
    background: radial-gradient(circle at top left, #282a33 0, #050608 60%);
}


/* ======================================================
   HEADER & NAVIGATION – DESKTOP
====================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 5vw;
    mix-blend-mode: lighten;
    pointer-events: none;
    border-bottom: 1px solid transparent;
    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        border-color 0.35s ease,
        padding 0.35s ease,
        box-shadow 0.35s ease,
        mix-blend-mode 0.35s ease;
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    pointer-events: auto;
    width: 100%;
    justify-content: flex-start;
}

.site-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-logo-img {
    height: 100px;
    display: block;
}

.is-scrolled .site-header {
    background: rgba(5, 6, 8, 0.85);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    padding: 0.7rem 5vw;
    mix-blend-mode: normal;
}

/* NAVIGATION */

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.site-nav a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    position: relative;
}

/* Hover underline für normale Links */
.site-nav a:not(.site-nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 0;
    height: 2px;
    background: var(--color-brand);
    transition: width 0.25s ease;
}

.site-nav a:not(.site-nav-cta):hover::after {
    width: 100%;
}

/* CTA BUTTON („Anmelden“) */

.site-nav-cta {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #BD1C22;
    background: #BD1C22;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.8rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.site-nav-cta:hover {
    background: #ffffff;
    color: #050608;
}

/* ACCESSIBILITY ICON BUTTON */

.a11y-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.a11y-button img {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.a11y-button:hover img {
    opacity: 1;
    transform: translateY(-1px);
}


/* ======================================================
   HERO SECTION (VIDEO)
====================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.hero-video-wrapper {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video-wrapper,
.hero-video-wrapper * {
  pointer-events: none;
}


.yt-bg-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.yt-bg-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    border: 0;
    transform: translate(-50%, -50%);
}

/* Zoom, damit UI verschwindet */
@media (min-aspect-ratio: 16/9) {
    .yt-bg-video iframe {
        width: 110vw;
        height: 62vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .yt-bg-video iframe {
        width: 190vh;
        height: 110vh;
    }
}

/* Gradients & Fade */

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
        radial-gradient(circle at top left, rgba(189,28,34,0.45), transparent 55%);
    mix-blend-mode: multiply;
    z-index: 1;
}

.hero-video-fade {
    position: absolute;
    inset: 0;
    background: #050608;
    opacity: 1;
    transition: opacity 1s ease-out;
    z-index: 2;
}

.video-ready .hero-video-fade {
    opacity: 0;
}

.hero-gradient-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 30vh;
    background: linear-gradient(to bottom, transparent, #050608);
    z-index: 3;
}

/* HERO CONTENT */

.hero-inner {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 6rem 7vw 4rem;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.hero-tagline {
    max-width: 480px;
}

.hero-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,0.8);
}

.hero-title {
    font-family: "Monoton", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.85;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    font-weight: 400;
}

.hero-title span {
    display: block;
}

.hero-meta {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    max-width: 360px;
}

/* HERO SOCIALS */

.hero-socials {
    margin-top: 1.6rem;
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.hero-socials img {
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-socials a:hover img {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
}

/* HERO CARD RECHTS */

.hero-card {
    background: var(--color-card);
    color: #111;
    border-radius: var(--radius-xl);
    padding: 2.5rem 2.25rem 2.1rem;
    box-shadow: var(--shadow-soft);
    max-width: 360px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-card-header {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 1.5rem;
}

.hero-card-title {
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
}

.hero-card-sub {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #777;
}

.hero-card-countdown {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e2e2e2;
}

.countdown {
    display: flex;
    gap: 0.75rem;
}

.countdown-item {
    flex: 1;
    text-align: center;
}

.countdown-number {
    font-size: 1.4rem;
    font-weight: 700;
}

.countdown-unit {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: #999;
}

.hero-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.8rem;
}

.hero-logo-cmc {
    height: 38px;
    width: auto;
    display: block;
}

.hero-badge {
    text-align: left;
    color: #777;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Scroll Indicator */

.scroll-indicator {
    position: absolute;
    bottom: 20vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-indicator--hidden {
    opacity: 0;
    transform: translate(-50%, 12px);
}

.scroll-indicator-icon {
    margin: 0.4rem auto 0;
    width: 18px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.6);
    position: relative;
}

.scroll-indicator-dot {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #fff;
    transform: translateX(-50%);
    animation: scrollDot 1.6s infinite;
}

@keyframes scrollDot {
    0%   { transform: translate(-50%, 0);  opacity: 1; }
    70%  { transform: translate(-50%, 14px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}


/* ======================================================
   INTRO + POKAL
====================================================== */

.intro {
    position: relative;
    z-index: 50;
    margin-top: -12vh;
    padding: 4rem 7vw 6rem;
    background: #050608;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
    transform: translateY(40px);
    opacity: 0.7;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.intro-inner {
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 1400px) {
    .intro-inner {
        max-width: 1280px;
    }
}

.intro-label {
    font-size: 0.8rem;
    letter-spacing: 0.21em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1rem;
}

.intro-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.intro-copy {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
}

.intro-layout {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.intro-text {
    flex: 1;
}

.intro-cup-visual {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

@media (min-width: 1400px) {
    .intro-cup-visual {
        flex: 0 0 38%;
    }
    .intro-text {
        flex: 1 0 62%;
    }
}

.intro-cup-image-wrap {
    width: 28vw;
    max-width: 720px;
    min-width: 360px;
    margin-top: -60px;
    opacity: 0;
    transform: translateX(-60vw) scale(0.8);
    filter: blur(12px);
    position: relative;
    z-index: 60;
}

.intro-cup-image {
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 25px 20px rgba(0,0,0,0.65))
        drop-shadow(0 8px 4px rgba(0,0,0,0.4));
}

/* Intro CTA */

.intro-cta-link {
    display: inline-block;
    margin-top: 2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
}

.intro-cta-link:hover {
    background: #ffffff;
    color: #050608;
}


/* ======================================================
   PARTNER-CAROUSEL (Startseite)
====================================================== */

.partners {
    position: relative;
    padding: 4rem 7vw 4.5rem;
    background: #050608;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.partners-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.partners-label {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.6rem;
}

.partners-title {
    font-size: 1.6rem;
    margin: 0;
    color: #ffffff;
}

.partners-carousel {
    position: relative;
    margin-top: 2.4rem;
    overflow: hidden;
}

.partners-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8%;
    pointer-events: none;
    z-index: 2;
}

.partners-fade-left {
    left: 0;
    background: linear-gradient(to right, #050608, transparent);
}

.partners-fade-right {
    right: 0;
    background: linear-gradient(to left, #050608, transparent);
}

.partners-track{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:.5rem 2rem;
  will-change: transform;

  /* WICHTIG: keine CSS-Animation mehr */
  animation: none !important;
  transform: translate3d(0,0,0);
}

.partners-track { display: flex; }
.partners-set   { display: inline-flex; align-items: center; }


.partner-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Abstand hängt am Logo-Item (gut!) */
  padding: 0 2rem;

  opacity: .78;
  transition: opacity .2s ease, transform .2s ease;
}
.partner-logo { padding: 0 2rem; display:inline-flex; align-items:center; justify-content:center; }

.partner-logo:hover{ opacity: 1; transform: translateY(-2px); }

.partner-logo img{
  height: var(--logo-h, 34px) !important;
  width: auto !important;
  max-width: var(--logo-maxw, 240px) !important;
  display:block;
  filter: brightness(0) invert(1);
}

/* Animation in px (Distanz setzt JS) */
@keyframes partners-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--marquee-dist, 600px))); }
}




/* ======================================================
   FACTS SECTION (Taktiktafel + Ball)
====================================================== */

.facts-section {
    position: relative;
    padding: 5rem 7vw 5.5rem;
    overflow: hidden;
    background: #050608;
}

.facts-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(5,6,8,0.55), rgba(5,6,8,0.78)),
        url('../../img/bg-info.jpg') center center / cover no-repeat;
    opacity: 1;
    z-index: 0;
}

.facts-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.facts-diagram {
    position: relative;
    min-height: 420px;
}

/* Ball-Video */

.facts-ball-video-wrap {
    position: absolute;
    left: 22%;
    bottom: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    background: #050608;
    transform: translateY(40vh);
    box-shadow: 0 30px 40px rgba(0,0,0,0.6);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.facts-ball-gif,
.facts-ball-frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
    transform-origin: center;
}

.facts-ball-shadow {
    position: absolute;
    left: 24%;
    bottom: -6%;
    width: 250px;
    height: 250px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.55) 0,
        rgba(0, 0, 0, 0) 80%
    );
    filter: blur(6px);
    opacity: 1;
    z-index: 1;
    transform: translateY(40vh);
    pointer-events: none;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease,
        filter 0.3s ease;
}

/* Info-Card rechts */

.facts-card {
    background: rgba(5,6,8,0.94);
    border-radius: 24px;
    padding: 2.4rem 2.5rem;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.facts-title {
    font-size: 1.6rem;
    margin: 0 0 1.8rem;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2.4rem;
}

.facts-item-full {
    grid-column: 1 / -1;
}

.facts-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.25rem;
}

.facts-value {
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

.facts-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.4rem;
}

.facts-link {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.7);
    color: #ffffff;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.facts-link:hover {
    background: #ffffff;
    color: #050608;
    transform: translateY(-1px);
}


/* ======================================================
   GRUSSWORT
====================================================== */

.greeting {
    position: relative;
    padding: 7rem 7vw 0;
    background:
        linear-gradient(
            to right,
            rgba(5, 6, 8, 0.25),
            rgba(5, 6, 8, 0.60)
        ),
        url('../../img/bg-grusswort.webp') center center / cover no-repeat;
    overflow: hidden;
}

.greeting-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-end;
}

.greeting-image-wrap {
    position: relative;
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    transform: translateX(-60vw);
    filter: blur(10px);
    transition:
        transform 0.9s ease-out,
        filter 0.9s ease-out;
}

.greeting-image {
    height: 66vh;
    width: auto;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.greeting-card {
    background: rgba(5,6,8,0.92);
    border-radius: 24px;
    padding: 2.8rem 3rem;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 22px 55px rgba(0,0,0,0.45);
    margin-bottom: 3rem;
}

.greeting-title {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
}

.greeting-copy {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.greeting-meta {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.75);
    margin-top: 1rem;
}

.greeting-credit {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 1.8rem;
    text-align: right;
}


/* ======================================================
   ORGANIZER-BALKEN (weiß)
====================================================== */

.organizer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: center;
}

.organizer-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.organizer-logo {
    width: 320px;
    max-width: 100%;
    height: auto;
    display: block;
}

.organizer-text {
    max-width: 640px;
}

.organizer-title {
    font-size: 1.6rem;
    margin: 0 0 1rem;
    font-weight: 700;
}

.organizer-copy {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.6rem;
    color: #333333;
}

.organizer-btn {
    display: inline-block;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    border: 1px solid #050608;
    text-decoration: none;
    color: #050608;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.organizer-btn:hover {
    background: #050608;
    color: #ffffff;
    transform: translateY(-1px);
}


/* ======================================================
   FOOTER
====================================================== */

.site-footer {
    background: #050608;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.4rem 7vw 1.6rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
}

.site-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.site-footer-copy a,
.site-footer-nav a {
    color: inherit;
    text-decoration: none;
}

.site-footer-copy a:hover,
.site-footer-nav a:hover {
    color: inherit;
    text-decoration: none;
}

.site-footer-social a {
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
}

.site-footer-social img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.site-footer-social img:hover {
    opacity: 1;
}


/* ======================================================
   DER CUP – ONE-PAGE HERO FLOW (neu)
====================================================== */

.page-der-cup{
  color: #fff;
  background: #050608;
}

.page-der-cup a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-der-cup a:hover{ text-decoration: none; }

.page-der-cup .cupflow{
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem) clamp(6rem, 10vh, 8rem);

  /* Vollflächiger bunter Gradient (Blau / Türkis / Grün) */
  background:
    radial-gradient(circle at 20% 20%, rgba(80, 200, 255, 0.55), transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(0, 255, 190, 0.38), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(120, 255, 170, 0.35), transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(60, 140, 255, 0.30), transparent 55%),
    linear-gradient(135deg, rgba(2, 18, 28, 1), rgba(4, 34, 28, 1));
}

.page-der-cup .cupflow::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 55%);
  filter: blur(10px);
  pointer-events:none;
}

.page-der-cup .cupflow-inner{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

/* shared */
.page-der-cup .cupflow-text{
  font-size: 1rem;
  line-height: 1.75; /* wieder “luftiger” */
  color: rgba(255,255,255,0.92);
}
.page-der-cup .cupflow-text p{ margin: 0 0 1rem; }

.page-der-cup .cupflow-section-title{
  margin: 0 0 1.2rem;
  letter-spacing: 0;
}
.page-der-cup .cupflow-section-title span{ display:block; }

/* -----------------------------------------
   BLOCK 1: HERO
----------------------------------------- */

.page-der-cup .cupflow-hero{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
  align-items: center;
  padding-bottom: clamp(3.5rem, 5vw, 5rem);
}

.page-der-cup .cupflow-trophy-wrap{
  position: relative;
  width: 100%;
  overflow: visible;
}

.page-der-cup .cupflow-trophy{
  display:block;
  height: auto;
  width: min(78vh, 780px); /* ~3/4 Screenhöhe, gedeckelt */
  max-width: 100%;
  object-fit: contain;

  /* Standardscreens: links etwas “abgeschnitten” */
  transform: translateX(-22%);
  filter: drop-shadow(0 22px 55px rgba(0,0,0,0.45));
}

.page-der-cup .cupflow-title{
  position: absolute;
  left: 58%;
  top: 45%;
  transform: translate(-50%, -50%);
  text-align: left;
  letter-spacing: 0;
  line-height: 0.92;
  max-width: 520px;
  text-transform: uppercase;
  text-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.page-der-cup .cupflow-hero-card{
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  backdrop-filter: blur(8px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.25);
}

.page-der-cup .cupflow-hero-card h2{
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  color: #fff;
}


/* -----------------------------------------
   BLOCK 2: EVENT (2 Spalten)
----------------------------------------- */

.page-der-cup .cupflow-event{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: start;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.page-der-cup .cupflow-event-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-der-cup .cupflow-visual-card{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
}

.page-der-cup .cupflow-visual-logo{
  width: 78%;
  height: auto;
  display:block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ======================================================
   CUPFLOW – BLOCK 3: ALLE INFOS (2 Spalten)
====================================================== */

.page-der-cup .cupflow-infos2{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: center;
  padding: clamp(2.2rem, 4.5vw, 3.6rem) 0;
}

/* -----------------------------
   LINKS: POSTER (an Viewport-Höhe gekoppelt)
----------------------------- */

.page-der-cup .cupflow-poster2{
  position: relative;
  width: 100%;
  height: clamp(520px, 78vh, 860px);   /* <- Höhe über Screen, mit Limits */
  max-width: 620px;                    /* <- wirkt “posteriger”, nicht zu breit */
  justify-self: start;

  border-radius: 14px;
  overflow: hidden;

  background:
    linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.10)),
    url("../../img/bg-facts.webp") center / cover no-repeat;

  transform: rotate(-2.2deg);
  box-shadow: 0 32px 90px rgba(0,0,0,0.48);
}

/* Papierkante */
.page-der-cup .cupflow-poster2::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  pointer-events:none;
}

/* Facts im zweiten Drittel (nicht ganz unten) */
.page-der-cup .cupflow-poster2-content{
  position:absolute;
  left:0; right:0;

  top: 58%;                            /* <- “zweites Drittel” */
  transform: translateY(-50%);         /* <- zentriert um diese Höhe */

  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  color:#fff;
}

.page-der-cup .cupflow-poster2-kicker{
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.8rem;
}

/* plakativer */
.page-der-cup .cupflow-poster2-date{
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.02;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  text-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.page-der-cup .cupflow-poster2-place{
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.35;
  opacity: 0.96;
  margin-bottom: 1.1rem;
  font-weight: 600;
}

.page-der-cup .cupflow-poster2-meta{
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 0.92;
}
.page-der-cup .cupflow-poster2-meta > div{
  margin-top: 0.5rem;
}

/* -----------------------------------------
   Poster: strukturierte Punkte + Linien
----------------------------------------- */

.page-der-cup .cupflow-poster2-divider{
  height: 1px;
  width: 100%;
  margin: 1.1rem 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.0),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.0)
  );
  opacity: 0.9;
}

.page-der-cup .cupflow-poster2-item{
  font-size: 1.02rem;
  line-height: 1.45;
}

.page-der-cup .cupflow-poster2-item strong{
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-der-cup .cupflow-poster2-small{
  font-size: 0.9rem;
  opacity: 0.85;
}

/* -----------------------------------------
   Poster Button
----------------------------------------- */

.page-der-cup .cupflow-poster2-button{
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.7rem 1.4rem;

  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #050608;
  background: #ffffff;
  border-radius: 999px;

  text-decoration: none;
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-der-cup .cupflow-poster2-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}


/* -----------------------------
   RECHTS: ALLE INFOS + Text + Trennlinien
----------------------------- */

.page-der-cup .cupflow-infos2-right{
  max-width: 600px;
}

.page-der-cup .cupflow-infos2-title{
  margin: 0 0 1.1rem;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.page-der-cup .cupflow-infos2-title span{ display:block; }

.page-der-cup .cupflow-infos2-text{
  color: rgba(255,255,255,0.92);
  line-height: 1.75;
}

.page-der-cup .cupflow-infos2-lead{
  margin: 0 0 1.15rem;
  max-width: 56ch;
}

.page-der-cup .cupflow-infos2-subhead{
  margin: 0 0 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.98;
}

.page-der-cup .cupflow-infos2-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-der-cup .cupflow-infos2-list li{
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.page-der-cup .cupflow-infos2-list li:first-child{
  border-top: none;
}

/* -----------------------------
   RESPONSIVE
----------------------------- */

@media (max-width: 1000px){
  .page-der-cup .cupflow-infos2{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-der-cup .cupflow-poster2{
    height: clamp(480px, 64vh, 760px);
    max-width: 560px;
    margin: 0 auto;
    justify-self: center;
    transform: rotate(-1.2deg);
  }

  .page-der-cup .cupflow-poster2-content{
    top: 60%;
  }

  .page-der-cup .cupflow-infos2-right{
    max-width: 680px;
  }
}



/* -----------------------------------------
   BLOCK 4: SPENDENZIEL (2 Spalten)
----------------------------------------- */

.page-der-cup .cupflow-spenden{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: center;
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.page-der-cup .cupflow-spenden-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-der-cup .cupflow-circle{
  width: min(420px, 70vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 22px 55px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(1.2rem, 3.2vw, 2.2rem);
}

.page-der-cup .cupflow-circle-logo{
  width: 72%;
  height: auto;
  display:block;
}

/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 1000px){
  .page-der-cup .cupflow-hero{
    grid-template-columns: 1fr;
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  }

  .page-der-cup .cupflow-trophy{
    width: min(70vh, 640px);
    transform: translateX(-10%);
  }

  .page-der-cup .cupflow-title{
    left: 58%;
    top: 52%;
    max-width: 520px;
  }

  .page-der-cup .cupflow-event{
    grid-template-columns: 1fr;
  }

  .page-der-cup .cupflow-infos{
    grid-template-columns: 1fr;
    text-align: left;
  }

  .page-der-cup .cupflow-infos-center{
    order: -1; /* Überschrift nach oben */
    text-align: left;
  }

  .page-der-cup .cupflow-spenden{
    grid-template-columns: 1fr;
  }

  .page-der-cup .cupflow-connector{
    width: 96%;
  }
}

@media (max-width: 520px){
  .page-der-cup .cupflow-trophy{
    width: min(62vh, 520px);
    transform: translateX(-6%);
  }
  .page-der-cup .cupflow-title{
    left: 56%;
    top: 56%;
  }
}

/* =========================================
   OVERRIDE: Arrow1 (img) – 75% Breite
   (GANZ ANS ENDE vom CSS!)
========================================= */

.page-der-cup .cupflow-connector-wrap.c1{
  width: 100%;
  display: flex;
  justify-content: center; /* zentriert innerhalb des Layouts */
  margin: clamp(1.4rem, 2.8vw, 2.2rem) 0 0;
  pointer-events: none;
}

.page-der-cup .cupflow-connector-wrap.c1 .cupflow-connector-img{
  width: 75% !important;   /* <- erzwingt 3/4 der Breite */
  max-width: 900px;        /* Deckel für große Screens */
  height: auto;
  display: block;
  opacity: 0.95;
}

/* Mobile etwas breiter, damit er nicht “verhungert” */
@media (max-width: 900px){
  .page-der-cup .cupflow-connector-wrap.c1 .cupflow-connector-img{
    width: 92% !important;
  }
}

/* =========================================
   POLAROID-STACK (Event rechts)
========================================= */

.page-der-cup .polaroid-stack{
  position: relative;
  width: min(520px, 92%);
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;

  /* leicht „Card“-Feeling, ohne harte Box */
  filter: drop-shadow(0 22px 55px rgba(0,0,0,0.28));
}

.page-der-cup .polaroid{
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
  overflow: hidden;

  /* Polaroid-Rand */
  background: rgba(255,255,255);
  padding: 14px 14px 84px; /* unten mehr wie Polaroid */
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);

  transform-origin: 18% 22%;
  transition: transform 420ms ease, opacity 420ms ease;
}

.page-der-cup .polaroid img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

/* Stapel-Look: jedes „nach hinten“ etwas drehen/versetzen */
.page-der-cup .polaroid:nth-child(1){ transform: translate(0px, 0px) rotate(-2deg); z-index: 4; }
.page-der-cup .polaroid:nth-child(2){ transform: translate(-10px, 10px) rotate(4deg); z-index: 3; }
.page-der-cup .polaroid:nth-child(3){ transform: translate(10px, 18px) rotate(-5deg); z-index: 2; }
.page-der-cup .polaroid:nth-child(4){ transform: translate(-6px, 26px) rotate(7deg); z-index: 1; }

.page-der-cup .polaroid-hint{
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: rgba(255,255,255);
  letter-spacing: 0.02em;
}

/* Animation: Top-Foto fliegt raus */
.page-der-cup .polaroid.is-flying{
  transform: translateX(120%) rotate(14deg) !important;
  opacity: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-der-cup .polaroid{ transition: none; }
}

/* Responsive: auf kleineren Screens nicht zu groß */
@media (max-width: 1000px){
  .page-der-cup .polaroid-stack{
    width: min(420px, 92%);
  }
}

/* ======================================================
   DER CUP – ALLE INFOS: Glass Cards (weiß + Trennlinien)
====================================================== */

/* Grid bleibt wie gehabt – nur Cards/Typo anpassen */
.page-der-cup .cupflow-infos{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

/* Glass Card wie Hero/Event */
.page-der-cup .cupflow-card{
  background: rgba(0,0,0,0.16);                 /* transparent-dark */
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.25);
}

/* Überschrift im Card */
.page-der-cup .cupflow-card h3{
  margin: 0 0 1.1rem;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #ffffff;
}

/* Listenlayout + Trennlinien */
.page-der-cup .cupflow-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-der-cup .cupflow-card li{
  margin: 0;
  padding: 0.75rem 0;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(255,255,255,0.16); /* Trennlinie */
}

.page-der-cup .cupflow-card li:first-child{
  border-top: none;
  padding-top: 0;
}

.page-der-cup .cupflow-card li:last-child{
  padding-bottom: 0;
}

/* Links im Card */
.page-der-cup .cupflow-card a{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-der-cup .cupflow-card a:hover{
  text-decoration: none;
}

/* Center-Headline bleibt stark */
.page-der-cup .cupflow-infos-center{
  text-align: center;
}

.page-der-cup .cupflow-infos-title{
  margin: 0;
  letter-spacing: 0;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.page-der-cup .cupflow-infos-title span{ display:block; }

/* Responsive: untereinander */
@media (max-width: 1000px){
  .page-der-cup .cupflow-infos{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .page-der-cup .cupflow-infos-center{
    order: -1;
    text-align: left;
  }
}

/* =========================================
   CUPFLOW INFOS – POSTER VERSION
========================================= */

.page-der-cup .cupflow-infos{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,0.7fr) minmax(0,1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(4rem, 7vw, 6rem);
}

/* -----------------------------
   FACTS POSTER (links)
----------------------------- */

.page-der-cup .cupflow-poster{
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;

  background:
    linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.15)),
    url("../../img/bg-facts.webp") center / cover no-repeat;

  transform: rotate(-2.2deg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  border: none;
  padding: 0;
}

/* feine Papierkante */
.page-der-cup .cupflow-poster::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  pointer-events:none;
}

/* Inhalt unten auf dem Poster */
.page-der-cup .cupflow-poster-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  color:#fff;
}

.page-der-cup .cupflow-poster h2{
  display:none; /* FACTS steht rechts groß */
}

.page-der-cup .cupflow-poster ul{
  list-style:none;
  margin:0;
  padding:0;
}

.page-der-cup .cupflow-poster li{
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.9;
}

/* plakative Hervorhebungen */
.page-der-cup .cupflow-poster .fact-date{
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  opacity: 1;
}

.page-der-cup .cupflow-poster .fact-place{
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

/* -----------------------------
   CENTER TITLE
----------------------------- */

.page-der-cup .cupflow-infos-center{
  text-align: center;
}

.page-der-cup .cupflow-infos-title{
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

/* -----------------------------
   RAHMENPROGRAMM (rechts)
----------------------------- */

.page-der-cup .cupflow-card--programm{
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  color: #fff;
}

.page-der-cup .cupflow-card--programm h2{
  margin-bottom: 1rem;
}

.page-der-cup .cupflow-card--programm ul{
  list-style:none;
  margin:0;
  padding:0;
}

.page-der-cup .cupflow-card--programm li{
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  line-height: 1.55;
}

.page-der-cup .cupflow-card--programm li:first-child{
  border-top:none;
}

/* -----------------------------
   RESPONSIVE
----------------------------- */

@media (max-width: 1000px){
  .page-der-cup .cupflow-infos{
    grid-template-columns: 1fr;
  }

  .page-der-cup .cupflow-infos-center{
    order: -1;
    text-align: left;
  }

  .page-der-cup .cupflow-poster{
    margin: 0 auto;
    transform: rotate(-1.4deg);
    max-width: 520px;
  }
}



/* ======================================================
   TEAMS PAGE
====================================================== */

.page-teams {
    background: #050608;
    color: #ffffff;
}

.teams-hero {
    position: relative;
    background: url('../../img/bg-grusswort.webp') center center / cover no-repeat;
    padding: clamp(10rem, 20vh, 18rem) 7vw 5rem;
    color: #ffffff;
    overflow: hidden;
}

.teams-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.75)
    );
    z-index: 0;
}

.teams-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    text-align: left;
}

.teams-hero-title span {
    display: block;
}

.teams-hero-text {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 520px;
}

/* Team-Logos */

.teams-grid {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.teams-grid--visible {
    opacity: 1;
    transform: translateY(0);
}

.team-card {
    background: rgba(255,255,255);
    border-radius: 20px;
    padding: 18px 20px;             /* ✅ Rand zurück */
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
}

.team-card-logo-wrap {
    width: 100%;
    height: 100%;
    display: flex;                  /* ✅ zentrieren */
    align-items: center;
    justify-content: center;
}

.team-card-logo {
    width: auto;                    /* ✅ nicht mehr 100% */
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent;        /* ✅ kein “weißer Kleberand” */
}

/* Card Pop-In Animation */
.teams-grid--visible .team-card {
    animation: team-card-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


@keyframes team-card-pop {
    0%   { opacity: 0; transform: translateY(18px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ======================================================
   TEAMS – Gradient Background + Hero Link White + Empty State
====================================================== */

.page-teams .teams-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 8vh, 6rem);
  color:#fff;

  /* Vorschlag: konsistent grün/türkis mit etwas blau (wie Cupflow) */
  background:
    radial-gradient(circle at 18% 18%, rgba(80, 200, 255, 0.48), transparent 58%),
    radial-gradient(circle at 78% 26%, rgba(0, 255, 190, 0.32), transparent 60%),
    radial-gradient(circle at 32% 82%, rgba(120, 255, 170, 0.26), transparent 60%),
    radial-gradient(circle at 86% 86%, rgba(60, 140, 255, 0.22), transparent 58%),
    linear-gradient(135deg, rgba(2, 18, 28, 1), rgba(4, 34, 28, 1));
}

.page-teams .teams-hero::before{
  content:"";
  position:absolute;
  inset:-12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
  z-index:0;
}

.page-teams .teams-hero-inner,
.page-teams .teams-grid,
.page-teams .teams-empty{
  position: relative;
  z-index: 1;
}

/* Link im Hero-Text: weiß + Underline */
.page-teams .teams-hero-text a{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-teams .teams-hero-text a:hover{
  text-decoration: none;
}

/* Empty State */
.page-teams .teams-empty{
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  max-width: 980px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.25);
}

.page-teams .teams-empty h2{
  margin: 0 0 .6rem;
}

.page-teams .teams-empty p{
  margin: 0 0 1.1rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.page-teams .teams-empty-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.75);
  background: #fff;
  color: #050608;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
  text-decoration: none;
}

.page-teams .teams-empty-btn:hover{
  background: rgba(255,255,255,0.12);
  color:#fff;
  border-color: rgba(255,255,255,0.55);
}

.page-teams .teams-hero{
  padding-top: clamp(9rem, 18vh, 14rem);
}
/* =========================================
   TEAMS – Mobile Layout Hero
========================================= */

@media (max-width: 900px){

  .page-teams .teams-hero-inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .page-teams .teams-hero-left,
  .page-teams .teams-hero-right{
    width: 100%;
  }

  .page-teams .teams-hero-right{
    max-width: 42rem;
  }
}

@media (max-width: 900px){
  .page-teams .teams-hero-title{
    margin-bottom: .4rem;
  }

  .page-teams .teams-hero-text{
    font-size: 1.05rem;
    line-height: 1.7;
  }
}


//* ===========================================
   HISTORIE – NEUES LAYOUT (ONE SECTION)
==============================================*/

body.page-historie{
  background:
    radial-gradient(circle at top left, rgba(0, 210, 170, 0.30), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 210, 60, 0.22), transparent 60%),
    radial-gradient(circle at bottom left, rgba(40, 220, 120, 0.22), transparent 55%),
    linear-gradient(135deg, #061b17, #050608);
  background-attachment: fixed;
  color:#fff;
}

/* One Section */
.history-page{
  min-height: 100vh;
  padding: clamp(9rem, 16vh, 11rem) 7vw clamp(4rem, 8vh, 6rem); /* mehr Abstand zum Header */
}

.history-page-inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero: links Title, rechts Text */
.history-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
}

.history-title{
  margin: 0;
}

.history-lead{
  margin: 0.6rem 0 0;
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
}

/* Timeline mittig + Alternation */
.history-timeline{
  margin-top: 1.2rem;
}

/* Zentrumslinie */
.history-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.history-list::before{
  content:"";
  position:absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.26),
    rgba(255,255,255,0.08)
  );
}

/* Jede Zeile als 3-Spalten-Grid: links / Mitte / rechts */
.history-item{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: start;
  margin: 0 0 2.2rem;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.history-item--visible{
  opacity: 1;
  transform: translateY(0);
}

/* Marker mittig */
.history-marker{
  grid-column: 2;
  justify-self: center;
  margin-top: 0.65rem;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: #BD1C22;
  box-shadow: 0 0 0 5px rgba(189,28,34,0.25);
}

/* Alternation: ungerade links, gerade rechts */
.history-item:nth-child(odd) .history-card{
  grid-column: 1;
  justify-self: end;
}
.history-item:nth-child(even) .history-card{
  grid-column: 3;
  justify-self: start;
}

/* Total: mittig */
.history-item-total .history-card{
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 760px;
}

/* Glas-Kachel */
.history-card{
  width: min(520px, 100%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 1.35rem 1.5rem 1.35rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.40);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.history-card--muted{
  opacity: 0.88;
}

/* Header */
.history-card-header{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.35rem;
}

.history-year{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.history-subtitle{
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
}

/* Body */
.history-card-body{
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.history-text{
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
}

.history-thumb{
  flex: 0 0 120px;
  max-width: 120px;
}

.history-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Total Marker */
.history-marker--total{
  background: #19c37d;
  box-shadow: 0 0 0 6px rgba(25,195,125,0.22);
}

/* Total Card: leichte Akzent-Variante */
.history-card-total{
  background: linear-gradient(
    135deg,
    rgba(25,195,125,0.22),
    rgba(255,210,60,0.10),
    rgba(255,255,255,0.08)
  );
  border-color: rgba(255,255,255,0.18);
}

/* Responsive: alles untereinander (Linie links) */
@media (max-width: 900px){
  .history-hero-grid{
    grid-template-columns: 1fr;
  }

  .history-list::before{
    left: 26px;
    transform: none;
  }

  .history-item{
    grid-template-columns: 52px 1fr;
    gap: 0.8rem;
  }

  .history-marker{
    grid-column: 1;
    justify-self: center;
  }

  .history-item .history-card{
    grid-column: 2 !important;
    justify-self: start !important;
    width: 100%;
    max-width: 720px;
  }

  .history-item-total .history-card{
    max-width: 720px;
  }
}

/* ===========================================
   HISTORIE – Gradient als html-Layer (bulletproof)
==============================================*/

/* 1) Basis */
html {
  background: #050608;
  position: relative;
}

/* 2) Gradient-Layer für Historie (liegt HINTER dem Content, aber VOR dem html-bg) */
body.page-historie html::before { /* falls dein CSS-Parser das nicht mag, nimm unten die Alternative */
  content: "";
}

/* Alternative, die überall sicher greift: */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;               /* default aus */
  transition: opacity .2s ease;
  background: #050608;
}

/* Nur auf Historie einschalten + Farbverlauf */
body.page-historie html::before{
  opacity: 1;
  background:
    radial-gradient(circle at top left, rgba(0, 210, 170, 0.36), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 210, 60, 0.26), transparent 60%),
    radial-gradient(circle at bottom left, rgba(40, 220, 120, 0.24), transparent 55%),
    linear-gradient(135deg, #061b17, #050608);
}

/* 3) Content über den Gradient heben */
body.page-historie {
  background: transparent !important;
}

body.page-historie header.site-header,
body.page-historie main,
body.page-historie #main-content,
body.page-historie .history-page,
body.page-historie .history-page-inner{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* =========================================
   HISTORIE – Mobile: Timeline ausblenden, Cards full width
========================================= */
@media (max-width: 900px){

  /* Linie + Marker komplett aus */
  .history-timeline::before{ display:none !important; }
  .history-marker{ display:none !important; }

  /* Container padding zurücknehmen */
  .history-timeline{ padding-left: 0 !important; }
  .history-item{ padding-left: 0 !important; }

  /* Cards auf volle Breite */
  .history-card{
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }

  /* Optional: Bild/Text schön untereinander, falls grid/flex aktiv ist */
  .history-card-body{
    display: block !important;
  }

  .history-thumb{
    margin-top: .9rem;
  }

  .history-thumb img{
    width: 100%;
    height: auto;
    display: block;
  }
}



/* ======================================================
   ANMELDUNG
====================================================== */

.page-anmeldung {
    background: #050608;
    color: #ffffff;
}

.anmeldung-hero {
    position: relative;
    min-height: 60vh;
    padding: clamp(6rem, 12vh, 7rem) clamp(1.5rem, 7vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        url('../../img/bg-der-cup.webp') center center / cover no-repeat;
}

.anmeldung-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 8, 0.6);
}

.anmeldung-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.8rem, 4vw, 3rem);
    align-items: flex-start;
    animation: fadeInUpHero 0.9s ease-out;
}

.anmeldung-hero-title {
    text-transform: uppercase;
    /*letter-spacing: 0.14em;*/
}

.anmeldung-hero-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
}

/* Formular */

.signup-section {
    padding: clamp(3.5rem, 8vh, 5rem) 7vw clamp(4rem, 9vh, 5.5rem);
    background: #050608;
}

.signup-inner {
    max-width: 900px;
    margin: 0 auto;
}

.signup-card {
    background: rgba(5, 6, 8, 0.95);
    border-radius: 24px;
    padding: 2.5rem 2.4rem 2.4rem;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 22px 55px rgba(0,0,0,0.55);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.signup-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.form-message {
    border-radius: 16px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.form-message--success {
    background: rgba(56, 142, 60, 0.12);
    border: 1px solid rgba(129, 199, 132, 0.7);
    color: #c8e6c9;
}

.form-message--error {
    background: rgba(189, 28, 34, 0.12);
    border: 1px solid rgba(244, 67, 54, 0.7);
    color: #ffcdd2;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-legend {
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.68);
    margin-bottom: 0.9rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 0.75rem;
}

.form-row--two .form-field {
    flex: 1 1 0;
}

.form-field {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-field label {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.form-field input,
.form-field textarea {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(5,6,8,0.85);
    color: #ffffff;
    padding: 0.65rem 0.75rem;
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: rgba(189,28,34,0.75);
    box-shadow: 0 0 0 1px rgba(189,28,34,0.4);
    background: rgba(5,6,8,0.95);
}

.form-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.3rem;
    margin-bottom: 1.2rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.85);
    background: #ffffff;
    color: #050608;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.btn-primary:hover {
    background: #050608;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

@keyframes fadeInUpHero {
    0% { opacity: 0; transform: translateY(35px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   ANMELDUNG – ONE SECTION LAYOUT + GREEN BACKGROUND
==============================================*/

body.page-anmeldung {
  /* Option A: schöner Grün-Gradient */
  background:
    radial-gradient(circle at top left, rgba(40, 180, 120, 0.45), transparent 55%),
    radial-gradient(circle at bottom right, rgba(20, 90, 60, 0.65), transparent 60%),
    linear-gradient(135deg, #062018, #050608);
  background-attachment: fixed;
}

/* Option B (später): Hintergrundbild statt Gradient
body.page-anmeldung {
  background: url('img/DEIN-BILD.webp') center/cover no-repeat fixed;
}
*/

.anmeldung-section {
  min-height: 100vh;
  /*padding: clamp(7rem, 14vh, 9rem) 7vw clamp(4rem, 8vh, 6rem);*/
  padding: clamp(9rem, 16vh, 11rem) 7vw clamp(4rem, 8vh, 6rem);
}

.anmeldung-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.anmeldung-copy {
  max-width: 520px;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
}

.anmeldung-right .signup-card {
  margin-top: 0.3rem;
}

/* Checkbox Layout */
.form-checkbox {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-checkbox input {
  margin-top: 0.25rem;
  transform: scale(1.05);
}

.form-checkbox strong {
  color: #ffffff;
}

/* Mobile: untereinander */
@media (max-width: 960px) {
  .anmeldung-inner {
    grid-template-columns: 1fr;
  }
}

.page-anmeldung .anmeldung-h2{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #ffffff;
  letter-spacing: 0;
}


/* ======================================================
   PARTNER-SEITE (Unterstützer) – CLEAN & STABIL
====================================================== */

.page-unterstuetzer {
  background: #050608;
  color: #ffffff;
}

/* Haupt-Section mit Gradient */
.page-unterstuetzer .teams-hero.supporters-hero {
  position: relative;
  min-height: 90vh;
  padding: 11rem 7vw 6rem; /* Abstand wie teams.php */
  overflow: visible;
  background:
    radial-gradient(circle at top left, rgba(189, 28, 34, 0.7), transparent 55%),
    radial-gradient(circle at center right, rgba(0,0,0,0.85), transparent 50%),
    #050608;
}

/* Inner: wieder clean als Stack (sonst zerschießt das Wrapper-Grid) */
.page-unterstuetzer .teams-hero-inner.supporters-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 2.7rem;
}

/* Header-Row: Title links, Text rechts (DAS ist bei dir der Wrapper in der PHP!) */
.page-unterstuetzer .supporters-header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 100px;
}

/* Headline links */
.page-unterstuetzer .teams-hero-title {
  margin: 0;
  text-align: left;
}

/* Text rechts */
.page-unterstuetzer .teams-hero-text,
.page-unterstuetzer .supporters-text {
  margin: 0;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}

/* Links im Text */
.page-unterstuetzer .teams-hero-text a,
.page-unterstuetzer .supporters-text a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-unterstuetzer .teams-hero-text a:hover,
.page-unterstuetzer .supporters-text a:hover {
  text-decoration: none;
}

/* Logo-Wall: volle Breite der Inner-Box, LINKS bündig */
.page-unterstuetzer .teams-grid.supporters-wall {
  width: 100%;
  margin: 0;                 /* keine auto-centering Effekte */
  margin-top: 0.2rem;
  align-self: stretch;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.2rem 2rem;

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  overflow: visible;
}

.page-unterstuetzer .teams-grid.supporters-wall.teams-grid--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Karten/Wrap: nichts clippen (Hover darf wachsen) */
.page-unterstuetzer .team-card,
.page-unterstuetzer .team-card-logo-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Logos: groß, weiß, Hover-Scale */
.page-unterstuetzer .team-card-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  background: transparent !important;

  filter: brightness(0) invert(1);
  opacity: 0.9;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}



.page-unterstuetzer .team-card:hover .team-card-logo {
  transform: scale(1.12);
  opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .page-unterstuetzer .supporters-header {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .page-unterstuetzer .teams-grid.supporters-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem 1.4rem;
  }
}

@media (max-width: 600px) {
  .page-unterstuetzer .teams-hero.supporters-hero {
    padding: 9rem 6vw 4rem;
  }

  .page-unterstuetzer .teams-grid.supporters-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .page-unterstuetzer .team-card-logo {
    max-height: 60px;
  }
}

/* PARTNER.PHP — Hero Textbox: H2 im Textbereich */
.page-unterstuetzer .supporters-text h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem; /* entspricht deinen anderen H2 */
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #ffffff; /* weiß wie restlicher Hero-Text */
    letter-spacing: 0; /* wie alle anderen H2 */
    text-transform: none; /* bleibt neutral (Hero-Title nutzt Monoton, hier nicht) */
}


/* ======================================================
   PARTNER: Logos in den Grid-Zellen wirklich mittig
   (ans Ende setzen)
====================================================== */

/* Jede Grid-Zelle bekommt eine definierte Höhe */
.page-unterstuetzer .teams-grid.supporters-wall{
  align-items: stretch;
  grid-auto-rows: 110px;            /* ggf. 100–130px feinjustieren */
}

/* Card + Wrap füllen die Zelle und zentrieren */
.page-unterstuetzer .team-card,
.page-unterstuetzer .team-card-logo-wrap{
  height: 100%;
  display: flex;
  align-items: center;              /* vertikal mittig */
  justify-content: center;          /* horizontal mittig */
  overflow: visible !important;     /* Hover darf nicht clippen */
}

/* Bild bleibt sauber skaliert */
.page-unterstuetzer .team-card-logo{
  max-height: 90px;                 /* dein bisheriger Wert */
  width: auto;
  height: auto;
  display: block;
}

/* ===========================================
   PARTNER – RESPONSIVE LOGOWAND (immer 5 pro Reihe)
   (GANZ ANS ENDE)
=========================================== */

/* 1) Header-Grid (Headline links, Text rechts) bleibt wie gehabt */
.page-unterstuetzer .supporters-header{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 2.2vw, 2rem);
  align-items: end;
}

/* 2) LOGOWAND: immer 5 Spalten, Slot-Höhe skaliert */
.page-unterstuetzer .teams-grid.supporters-wall{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  /* Abstände skalieren */
  gap: clamp(0.9rem, 1.6vw, 2rem) clamp(0.8rem, 1.4vw, 1.6rem);

  /* Slot-Höhe skaliert -> verhindert Overlap */
  grid-auto-rows: clamp(70px, 8vw, 110px);

  width: 100%;
  margin-top: clamp(1.6rem, 2.2vw, 2.5rem);

  align-items: center;
  justify-items: center;

  overflow: visible !important;
}

/* 3) “Slot” zentriert Inhalt, nichts schneidet */
.page-unterstuetzer .team-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  height: 100%;
  width: 100%;

  display: flex;
  align-items: center;    /* vertikal mittig */
  justify-content: center;/* horizontal mittig */

  overflow: visible !important;
}

.page-unterstuetzer .team-card-logo-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;     /* vertikal mittig */
  justify-content: center; /* horizontal mittig */
  overflow: visible !important;
}

/* 4) Logo: skaliert je nach Screen, bleibt in Slot */
.page-unterstuetzer .team-card-logo{
  width: auto;
  height: auto;

  /* Logo-Größe skaliert sauber */
  max-height: clamp(44px, 4.8vw, 86px);
  max-width: 92%;

  object-fit: contain;
  background: transparent !important;

  filter: brightness(0) invert(1);
  opacity: 0.9;

  transform-origin: center;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Hover nur auf Geräten, die Hover wirklich können */
@media (hover: hover) and (pointer: fine){
  .page-unterstuetzer .team-card-logo:hover{
    transform: scale(1.12);
    opacity: 1;
  }
}

/* 5) Mobile: weniger Spalten (weil 5 zu eng) */
@media (max-width: 900px){
  .page-unterstuetzer .supporters-header{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-unterstuetzer .teams-grid.supporters-wall{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(64px, 10vw, 96px);
  }
}

@media (max-width: 600px){
  .page-unterstuetzer .teams-grid.supporters-wall{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(58px, 12vw, 88px);
  }
}




/* ======================================================
   FALLBACK: NO VIDEO
====================================================== */

.no-video .yt-bg-video {
    display: none;
}

.no-video .hero-video-wrapper {
    background: url('../../img/charitycup_poster.jpg') center center / cover no-repeat;
}


/* ======================================================
   RESPONSIVE BREAKPOINTS (ohne Nav-Wirrwarr)
====================================================== */

/* bis 960px – generelles Layout */

@media (max-width: 960px) {

    .hero-inner {
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 6rem;
        padding-bottom: 5.5rem;
    }

    .hero-card {
        max-width: 100%;
    }

    .intro {
        margin-top: -8vh;
        padding-top: 3rem;
    }

    .intro-layout {
        flex-direction: column;
        align-items: flex-start;
    }

    .intro-cup-visual {
        order: -1;
        margin-bottom: 1.5rem;
    }

    .intro-cup-image-wrap {
        width: 70vw;
        max-width: 420px;
        min-width: 0;
        margin-top: -20px;
    }

    .facts-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .facts-diagram {
        min-height: 260px;
    }

    .organizer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .der-cup-hero-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .der-cup-visual {
        justify-content: center;
    }

    .history-timeline-section {
        padding-top: 3.5rem;
    }

    .history-list::before {
        left: 20px;
    }

    .history-item {
        padding-left: 60px;
    }

    .history-marker {
        left: 11px;
    }

    .history-card-body {
        flex-direction: column;
    }

    .anmeldung-hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .signup-card {
        padding: 2.1rem 1.7rem 2rem;
        border-radius: 20px;
    }

    .form-row--two {
        flex-direction: column;
    }
}

/* bis 600px – Feintuning */

@media (max-width: 600px) {

    .hero-card {
        padding: 2rem 1.6rem 1.6rem;
        border-radius: var(--radius-lg);
    }

    .intro {
        border-radius: 24px 24px 0 0;
    }

    .greeting {
        padding: 3.5rem 6vw 0;
    }

    .greeting-image {
        max-height: 360px;
    }

    .greeting-card {
        padding: 2rem 1.6rem;
    }

    .history-hero {
        padding-top: 6.5rem;
        padding-bottom: 3.5rem;
    }

    .history-card {
        padding: 1.3rem 1.2rem 1.2rem;
    }

    .anmeldung-hero {
        padding: 5rem 6vw 3.2rem;
        min-height: auto;
    }

    .signup-section {
        padding: 3rem 6vw 4rem;
    }

    .signup-card {
        padding: 1.9rem 1.4rem 1.8rem;
    }

    .page-unterstuetzer .teams-hero.supporters-hero {
        padding: 9rem 6vw 4rem;
    }
}


/* ======================================================
   MOBILE NAVIGATION – Konsolidierte Version
====================================================== */

@media (max-width: 960px) {

  /* Header: transparent über Hero, beim Scrollen/nav-open schwarz */

  .site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.9rem 5vw;
    background: transparent;
    border-bottom-color: transparent;
    mix-blend-mode: lighten;
  }

  .is-scrolled .site-header,
  .site-header.is-nav-open {
    background: rgba(5, 6, 8, 0.95);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(255,255,255,0.12);
    mix-blend-mode: normal;
    padding: 0.7rem 5vw;
  }

  .site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  .site-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Burger-Button */

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.7);
    padding: 0;
    cursor: pointer;
    z-index: 1001;
  }

  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #ffffff;
    transform: translateX(-50%);
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  .nav-toggle-bar {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    content: "";
  }

  .nav-toggle-bar::before {
    top: -6px;
  }

  .nav-toggle-bar::after {
    top: 6px;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
    transform: translateX(-50%) rotate(-90deg);
    top: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
    opacity: 0;
  }
    
  

  /* A11y-Icon: gleich große Fläche, aber ohne extra Kreis */

  .a11y-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
  }

  .a11y-button img {
    width: 40px;
    height: 40px;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .a11y-button:hover img {
    opacity: 1;
    transform: translateY(-1px);
  }

  /* NAVIGATION ALS ACCORDION UNTER DEM HEADER */

  .site-nav {
    order: 3;
    width: 100%;
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    max-height: 0;
    overflow: hidden;
    margin-top: 0.35rem;
    padding: 0;
    border-top: 1px solid transparent;

    text-align: right;
    background: transparent;
    box-shadow: none;
  }

  .site-nav.is-open {
    max-height: 420px;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 6, 8, 0.98);
    transition: max-height 0.25s ease;
  }

  .site-nav a {
    display: block;
    color: rgba(255, 255, 255, 0.96);
    padding: 0.6rem 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }

  .site-nav-cta {
    margin-top: 0.4rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 1px solid #BD1C22;
    background: #BD1C22;
    color: #ffffff;
    display: inline-block;
    text-align: center !important;
  }

  /* Hover-Unterstrich im Mobile-Menü aus */

  .site-nav a:not(.site-nav-cta)::after {
    display: none;
  }

  /* Header komplett transparent, wenn weder gescrollt noch Nav offen */

  body:not(.is-scrolled) .site-header:not(.is-nav-open) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    mix-blend-mode: lighten;
  }
}

/* ===========================================
   HISTORIE – Gradient immer sichtbar (Fixed Layer)
==============================================*/
html, body {
  background: #050608;
}

body.page-historie {
  position: relative;
  background: #050608;
}

/* Der eigentliche Gradient liegt als feste Ebene hinter allem */
body.page-historie::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(circle at top left, rgba(0, 210, 170, 0.34), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 210, 60, 0.24), transparent 60%),
    radial-gradient(circle at bottom left, rgba(40, 220, 120, 0.22), transparent 55%),
    linear-gradient(135deg, #061b17, #050608);
}

/* Alles, was evtl. drüber “flächig” malt, transparent setzen */
body.page-historie main,
body.page-historie .page-main,
body.page-historie #main-content,
body.page-historie .history-page{
  background: transparent !important;
}

.supporters-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;              /* passend zu euren Cards */
}

.supporters-logo{
  width:100%;
  height:100%;
  max-height:90px;
  object-fit:contain;
  background:transparent !important;
  display:block;
}

/* FIX: SVG-Logos in Links korrekt rendern (Safari-Bug) */
.supporters-logo-wrap a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.team-card-logo-wrap a {
  display: inline-flex !important;
}

/* Partner-Logos: Link bekommt echte Box, Img bekommt definierte Größe */
.page-unterstuetzer .supporters-logo-wrap .supporters-link{
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.page-unterstuetzer .supporters-logo-wrap img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: clamp(44px, 4.8vw, 86px) !important;
  object-fit: contain !important;
}

/* ======================================================
   LEGAL & KONTAKT – Basislayout
====================================================== */

.page-impressum,
.page-datenschutz,
.page-kontakt {
  background: #050608;
  color: #ffffff;
}

/* Wrapper */
.legal-page,
.contact-page {
  padding: clamp(6rem, 10vh, 8rem) 7vw clamp(5rem, 8vh, 7rem);
}

.legal-inner,
.contact-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* Kicker */
.legal-kicker,
.contact-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.6rem;
}

/* Haupt-Headline */
.legal-page h1,
.contact-page h1 {
  font-family: 'Monoton', sans-serif;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 0.95;
  margin: 0 0 3rem;
}

/* Zwischenüberschriften */
.legal-page h2,
.contact-page h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin: 3rem 0 1rem;
}

.legal-page h3,
.contact-page h3 {
  font-weight: 600;
  margin: 2rem 0 0.6rem;
}

/* Text */
.legal-page p,
.contact-page p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1rem;
}

/* Listen */
.legal-page ul,
.contact-page ul {
  padding-left: 1.2rem;
  margin: 1rem 0 1.5rem;
}

.legal-page li,
.contact-page li {
  margin: 0.45rem 0;
  line-height: 1.6;
}

/* Links */
.legal-page a,
.contact-page a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page a:hover,
.contact-page a:hover {
  text-decoration: none;
}

/* Trennlinie */
.contact-sep {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 3rem 0;
}

/* ======================================================
   KONTAKTFORMULAR
====================================================== */

.contact-form {
  margin-top: 2.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.4rem;
}

.contact-span-2 {
  grid-column: 1 / -1;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  opacity: 0.9;
}

.contact-form input,
.contact-form textarea {
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #bd1c22;
}

/* Checkbox */
.contact-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.75rem;
}

.contact-consent input {
  margin-top: 0.2rem;
}

/* Button */
.contact-form button {
  margin-top: 2rem;
  background: #bd1c22;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form button:hover {
  background: #d52128;
}

/* Status */
.contact-success,
.contact-error {
  margin-top: 1.2rem;
  font-size: 0.85rem;
}

.contact-success { color: #7dffb3; }
.contact-error   { color: #ff7d7d; }

/* Mobile */
@media (max-width: 700px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   LEGAL & KONTAKT – Gradient Hintergrund
====================================================== */

.page-impressum,
.page-datenschutz,
.page-kontakt {
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 210, 180, 0.28), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(80, 190, 255, 0.32), transparent 60%),
    radial-gradient(circle at 35% 75%, rgba(100, 255, 200, 0.22), transparent 60%),
    linear-gradient(135deg, #04161b 0%, #050608 60%);
  color: #ffffff;
}

/* ======================================================
   Kontakt – Success / Error Box
====================================================== */

.contact-status{
  margin: 1.4rem 0 1.2rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  color: #fff;
}

.contact-status--success{
  background: linear-gradient(135deg, rgba(26, 180, 120, 0.92), rgba(10, 120, 90, 0.88));
}

.contact-status--error{
  background: linear-gradient(135deg, rgba(220, 55, 75, 0.92), rgba(150, 20, 35, 0.88));
}

.contact-status strong{
  display: block;
  margin-bottom: .25rem;
  font-size: 1.05rem;
}


/* ======================================================
   Legal/Kontakt – Abstand Header -> Main
====================================================== */

.page-impressum .page-main,
.page-datenschutz .page-main,
.page-kontakt .page-main{
  padding-top: clamp(6.5rem, 10vh, 8.5rem);
}


/* ACTIVE NAV LINK (Desktop + Mobile) */
.site-nav a[aria-current="page"]{
  color:#fff;
}

/* Active underline nur für normale Links (nicht CTA) */
.site-nav a[aria-current="page"]:not(.site-nav-cta)::after{
  width:100%;
}

/* DER CUP: Underline nur im Main-Content, nicht im Header/Nav */
.page-der-cup header a,
.page-der-cup .site-header a,
.page-der-cup .site-nav a{
  text-decoration: none !important;
}

.page-der-cup main a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-der-cup main a:hover{ text-decoration: none; }

/* Desktop: Burger aus */
.nav-toggle{ display:none; }

@media (max-width: 960px){
  .nav-toggle{ 
    display:inline-flex; 
    position: relative;      /* <- WICHTIG */
  }

  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after{
    position: absolute;      /* <- gehört zum Button */
    left: 50%;
  }
}

/* FIX: Historie darf den Sticky-Header nicht auf relative überschreiben */
@media (max-width: 960px){
  body.page-historie header.site-header{
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }
}

/* Header muss immer klickbar über Video/Overlays liegen */
.site-header{ pointer-events: auto; }
.site-header-inner{ pointer-events: auto; }

@media (max-width: 960px){
  .site-header{ z-index: 2000; }
  .site-nav{ position: relative; z-index: 2001; }
  .nav-toggle{ z-index: 2002; position: relative; }
}



@media (max-width: 960px) {
  .site-header { pointer-events: auto; }
  .nav-toggle { position: relative; }
}

/* Header immer klickbar über Overlays */
.site-header,
.site-header-inner,
.site-nav,
.nav-toggle{
  pointer-events: auto !important;
}

/* Mobile: im Top-Zustand wirklich transparent */
@media (max-width: 960px){
  body:not(.is-scrolled) .site-header:not(.is-nav-open){
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================================================
   HEADER – FINAL STABLE (Mobile + Desktop)
   Ziel:
   - Start: transparent über Gradient
   - Scroll: solid black sticky (kein Glas/Blur)
   - Burger immer klickbar (Layering + Pointer Events)
========================================================= */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999 !important;
  pointer-events: auto !important;
  transform: translateZ(0); /* Safari-Stabilität */
}

.site-header *{
  pointer-events: auto;
}

body:not(.is-scrolled) .site-header{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Sticky = immer schwarz (auch Historie etc.) */
body.is-scrolled .site-header,
.site-header.is-nav-open{
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

/* Wichtig: kein Mix-Blend im Header, sonst "verschwindet" er je nach Hintergrund */
@media (max-width: 980px){
  .site-header-inner{
    mix-blend-mode: normal !important;
  }
}

/* =========================
   FIX: Historie Header Sticky (schwarz wie überall)
   ========================= */

/* Historie: beim Pageload transparent (auf Gradient) */
body.page-historie:not(.is-scrolled) .site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* Historie: sobald gescrollt -> schwarz (kein Glas) */
body.page-historie.is-scrolled .site-header {
  background: #050608 !important; /* oder #000 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
/* =========================================
   FIX: HISTORIE – Header muss sticky sein (Desktop)
   Ursache: Historie-Block setzt header.site-header auf position:relative
========================================= */

body.page-historie header.site-header{
  position: fixed !important;   /* Sticky zurückholen */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;

  /* Start: transparent über Gradient (wie gewünscht) */
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Beim Scroll: schwarzer Sticky-Header (kein Glas) */
body.page-historie.is-scrolled header.site-header{
  background: rgba(0,0,0,.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Optional: falls irgendwo noch "glassy" Styles greifen */
body.page-historie.is-scrolled header.site-header::before,
body.page-historie.is-scrolled header.site-header::after{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}