/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight/InterTight-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Fonts */
  --font-family: 'Google Sans', system-ui, sans-serif;
  --font-family-display: 'DM Serif Display', Georgia, serif;
  --font-family-condensed: 'Inter Tight', system-ui, sans-serif;

  /* Farben */
  --color-accent: #ed294e;
  --color-white: #fff;
  --color-off-white: #f9f9f9;
  --color-black: #000;
  --color-off-black: #1d1d1d;
  --color-black-muted: #464141;
  --color-text-muted: #393939;
  --color-text-light: #6c6b6b;

  --color-comp-liga: var(--color-accent);
  --color-comp-pokal: #7c3aed;
  --color-comp-freundschaft: #0891b2;


  /* Dunkle Home-Table */
  --color-dark: #111;
  --color-dark-row: #1a1a1a;
  --color-dark-btn: #2a2a2a;

  /* Tabellen-Zonen */
  --color-zone-aufstieg: #16a34a;
  --color-zone-aufstieg-relegation: #84cc16;
  --color-zone-abstieg-relegation: #f59e0b;
  --color-zone-abstieg: #dc2626;

  /* Spacing — fließend mit clamp */
  --spacing-xs: clamp(.25rem, .5vw, .375rem);
  --spacing-s:  clamp(.5rem, 1vw, .75rem);
  --spacing-m:  clamp(1rem, 2vw, 1.5rem);
  --spacing-ml: clamp(1.25rem, 2.5vw, 1.75rem);
  --spacing-l:  clamp(1.5rem, 3vw, 2rem);
  --spacing-xl: clamp(2rem, 5vw, 4rem);

  --card-height: 400px;
  --card-aspectratio: 3/4;

  /* Radien */
  --radius-s: .2rem;
  --radius-m: .5rem;
  --radius-l: 1rem;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-large: 0px 4px 16px rgba(0, 0, 0, .15);
  --shadow-button: 0px 4px 8px rgba(0, 0, 0, .1);

  /* Zeilenhöhe für Fixtures & Table-Rows */
  --row-height: 3.5rem;

  /* Font Sizes */
  --font-size-xxs: clamp(.5rem, 1vw, .7rem);
  --font-size-xs: clamp(.7rem, 1vw, .9rem);
  --font-size-s: clamp(.9rem, 2vw, 1rem);
  --font-size-m: clamp(1rem, 2vw, 1.2rem);
  --font-size-l: clamp(1.5rem, 2vw, 2rem);
  --font-size-xl: clamp(2rem, 2vw, 3rem);
  --font-size-xxl: clamp(2.5rem, 2vw, 4rem);
  --font-size-xxxl: clamp(3.5rem, 2vw, 5rem);
}

/* ============================================================
   RESET
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* alte Edge / IE */
}

*::-webkit-scrollbar {          /* Chrome, Safari, neue Edge */
  display: none;
}

body {
  font-family: var(--font-family-condensed);
  background-color: var(--color-white);
}

/* ============================================================
   LAYOUT & GENERISCHE KOMPONENTEN
   ============================================================ */


.container, .wrapper {
  max-width: 1200px;
  margin: auto;
  height: 100%;
}
.container{
  padding: var(--spacing-xl) 0;
}

.container.home-table,
.container.home-fixtures{
  padding: var(--spacing-s) 0;
}

.wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}


.section-header {
  display: flex;
  padding: var(--spacing-m);
  font-family: var(--font-family-display);
}

.section-header h2,
.section-header h1 {
  font-size: 2rem;
}

.section-content{
  display: flex;
  padding: var(--spacing-m);
  line-height: 1.5;
}

.section-link {
  display: flex;
  width: 100%;
  padding: var(--spacing-s);
  justify-content: end;
  align-items: center;
  color: var(--color-black-muted);
}

.section-link a {
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  text-transform: uppercase;
  padding: var(--spacing-s);

}

.section-link p{
    font-size: var(--font-size-xs);
}

a {
  color: inherit;
  text-decoration: none;
}

.button{
  all: unset;
}

 a.button, .button {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  border-radius: var(--radius-m);
  text-transform: uppercase;
  font-size: var(--font-size-s);
  line-height: 1;
  font-weight: 600;
  padding: var(--spacing-s) var(--spacing-m);
  width: max-content;
  color: var(--color-white);
  background-color: var(--color-accent);
}

.button-wrapper{
  padding: var(--spacing-m);
  display: flex;
}

p{
  font-size: var(--font-size-m);
}

h2{
  font-family: var(--font-family-display);
}

h3{
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
}

.icon {
  display: flex;
  align-items: center;
}

.icon svg {
  height: 24px;
  stroke-width: 1.5;
}

/* Horizontaler Slider-Container (News, ggf. weitere) */
.card-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-l);
  overflow: hidden;
  scroll-snap-align: center;
}

a.card {
  box-shadow: var(--shadow-large);
}

.card-dark{
    background: linear-gradient(var(--color-black), var(--color-off-black));
    color: var(--color-white)
}



@media (min-width: 1024px) {
  /* Desktop-Styles */
  .wrapper{
    gap: var(--spacing-m);
    padding: var(--spacing-xl) var(--spacing-m);
  }
}
/* ============================================================
   FC SERBIA NÜRNBERG · NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .3s ease;
}

.site-header.nav-hidden {
  transform: translateY(-100%);
}

.nav-container {
  background: var(--color-white);
}

.main-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-off-white);
  padding: var(--spacing-s) var(--spacing-m);
}

/* ---------- Brand: Logo + Titel links ---------- */
.main-nav--brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.main-nav--logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-off-white);   /* Platzhalter, bis das Wappen drin ist */
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-nav--title {
  font-family: var(--font-family-condensed);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-off-black);
}

.main-nav--items {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  align-items: center;
}

nav a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Nav Items ---------- */
.main-nav--item a {
  display: inline-block;
  font-family: var(--font-family-condensed);
  font-weight: 500;
  font-size: var(--font-size-xs);
  letter-spacing: .03em;
  color: var(--color-text-muted);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-full);
  transition: background .2s ease, color .2s ease;
}

.main-nav--item a:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* Active = dunkle Pille (nur direkter Link, nicht Dropdown-Sublinks) */
.main-nav--item.active > a {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Kader-Dropdown ---------- */
.main-nav--sub {
  position: relative;
}

/* summary sieht aus wie ein normaler Nav-Link */
.main-nav--sub-toggle {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--font-family-condensed);
  font-weight: 500;
  font-size: var(--font-size-xs);
  letter-spacing: .03em;
  color: var(--color-text-muted);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-full);
  transition: background .2s ease, color .2s ease;
}

.main-nav--sub-toggle::-webkit-details-marker {
  display: none;
}

.main-nav--sub-toggle:hover {
  background: var(--color-off-white);
}

.main-nav--sub-menu {
  display: flex;
  flex-direction: column;
}

.main-nav--sub-menu a {
  display: block;
  font-family: var(--font-family-condensed);
  font-weight: 500;
  font-size: var(--font-size-xs);
  letter-spacing: .03em;
  color: var(--color-off-black);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-m);
  transition: background .2s ease;
}

.main-nav--sub-menu a:hover {
  background: var(--color-off-white);
}

/* Aktives Team im Dropdown */
.main-nav--sub-menu a.is-active {
  background: var(--color-off-black);
  color: var(--color-white);
}

/* ---------- Toggle Button (Hamburger) ---------- */
.nav-toggle {
  display: none;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-s);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-off-black);
  transition: background .2s ease;
}

.nav-toggle:hover {
  background: var(--color-white);
}

.nav-close {
  display: none;
}

/* ============================================================
   DESKTOP: Kader-Dropdown als Hover-Flyout
   ============================================================ */

@media (min-width: 769px) and (hover: hover) {
  .main-nav--sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-large);
    padding: var(--spacing-s);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  .main-nav--has-sub:hover .main-nav--sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ============================================================
   MOBILE — Fullscreen-Overlay-Menü
   ============================================================ */

@media (max-width: 768px) {

  .main-nav {
    padding: var(--spacing-m);
  }

  .nav-toggle {
    display: flex;
    z-index: 99;
  }

  /* ---------- Fullscreen-Overlay ---------- */
  .main-nav--items {
    flex-direction: column;
    position: fixed;
    inset: 0;                          /* füllt den ganzen Viewport */
    width: 100%;
    height: 100svh;
    gap: var(--spacing-m);
    justify-content: center;
    align-items: center;               /* zentriert */
    padding: var(--spacing-xl) var(--spacing-l);

    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* versteckt: ausgeblendet + nicht klickbar */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 200;
  }

  .main-nav--items.active {
    opacity: 1;
    visibility: visible;
  }

  /* ---------- Close-Button ---------- */
  .nav-close {
    position: absolute;
    top: var(--spacing-m);
    right: var(--spacing-m);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-s);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-off-black);
    cursor: pointer;
  }

  /* ---------- Items: zentriert, groß, "von oben" ---------- */
  .main-nav--item {
    display: flex;
    justify-content: center;
    /* Start-Zustand für den Von-oben-Effekt */
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity .3s ease, transform .3s ease;
  }

  .main-nav--items.active .main-nav--item {
    opacity: 1;
    transform: translateY(0);
  }

  /* gestaffeltes Einrutschen der Items */
  .main-nav--items.active .main-nav--item:nth-child(2) { transition-delay: .05s; }
  .main-nav--items.active .main-nav--item:nth-child(3) { transition-delay: .10s; }
  .main-nav--items.active .main-nav--item:nth-child(4) { transition-delay: .15s; }
  .main-nav--items.active .main-nav--item:nth-child(5) { transition-delay: .20s; }
  .main-nav--items.active .main-nav--item:nth-child(6) { transition-delay: .25s; }
  .main-nav--items.active .main-nav--item:nth-child(7) { transition-delay: .30s; }
  .main-nav--items.active .main-nav--item:nth-child(8) { transition-delay: .35s; }
  .main-nav--items.active .main-nav--item:nth-child(9) { transition-delay: .40s; }

  .main-nav--item a {
    display: block;
    padding: var(--spacing-m) var(--spacing-l);
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    border-radius: var(--radius-m);
    color: var(--color-off-black);

  }

  .main-nav--item a:hover {
    background: var(--color-off-white);
  }

  .main-nav--item.active > a {
    background: var(--color-accent);
    color: var(--color-white);
  }

  /* ---------- Kader-Dropdown im Overlay ---------- */
  .main-nav--sub {
    text-align: center;
  }

  .main-nav--sub-toggle,
  .main-nav--item a{
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--spacing-m);
    font-family: var(--font-family-condensed);
  }


  .main-nav--sub-toggle {
    display: block;
    text-align: center;
    line-height: 1;
    padding: var(--spacing-s) var(--spacing-l);
    border-radius: var(--radius-m);
  }

  .main-nav--sub-menu {
    align-items: center;
    margin-top: var(--spacing-s);
  }

  .main-nav--sub-menu a {
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: var(--font-size-s);
    padding: var(--spacing-s) var(--spacing-m);
    color: var(--color-text-muted);
    text-transform: none;
  }

  .main-nav--sub-menu a.is-active {
    background: var(--color-accent);
    color: var(--color-white);
  }
}
/* ============================================================
   SECTION-HEADER + FILTER (Fixtures + Tabellen gemeinsam)
   ============================================================ */

.home-fixtures-header,
.spielplan-header,
.home-table-header,
.tabelle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.spielplan-header,
.tabelle-header {
  font-size: var(--font-size-m);
}

.home-fixtures-filter,
.spielplan-filter,
.home-table-filter,
.tabelle-filter {
  display: flex;
  gap: var(--spacing-s);
}

.home-fixtures-filter button,
.spielplan-filter button,
.home-table-filter button,
.tabelle-filter button {
  appearance: none;
  border: none;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  font-weight: 600;
  height: 42px;
  aspect-ratio: 1/1;
  line-height: 1;
  color: inherit;
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  box-shadow: var(--shadow-button);
}

.home-fixtures-filter button.is-active,
.spielplan-filter button.is-active,
.home-table-filter button.is-active,
.tabelle-filter button.is-active {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Panels/Rows: nur aktives Team sichtbar */
.home-fixtures-panel,
.home-table-panel,
.tabelle-panel,
.fixtures-row {
  display: none;
}

.home-fixtures-panel.is-active,
.home-table-panel.is-active,
.tabelle-panel.is-active,
.fixtures-row.is-active {
  display: block;
}

.spielplan-panel { display: none; }
.spielplan-panel.is-active { display: block; }
/* ============================================================
   FIXTURE — große Card (Spielplan-Seite)
   ============================================================ */

.page--spielplan, .page--spielplan {
  background-color: var(--color-off-white);
}

.spielplan {
  margin: auto;
}



.fixtures {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.fixture {
  width: 100%;
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 5vw - 1.8rem, var(--spacing-m));
  box-shadow: none;
}


.fixture--date {
  text-align: center;
  font-weight: 600;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  padding: var(--spacing-s);
  color: var(--color-text-muted);
}

.fixture--game {
  display: grid;
  grid-template-columns: 1fr clamp(80px, 20vw, 120px) 1fr;
  gap: var(--spacing-m);
  align-items: center;
}

.fixture--team {
  display: flex;
  flex-direction: column;    /* mobil: Logo über Name */
  align-items: center;
  gap: var(--spacing-s);
  font-weight: 600;
  font-size: var(--font-size-s);
  text-align: center;
}

.fixture--logo {
  display: flex;
  justify-content: center;
}

.fixture--logo img {
  max-height: clamp(40px, 2vw, 72px);
}

.fixture--datetime {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-m);
  font-family: var(--font-family-display);
  background-color: var(--color-off-black);
  color: var(--color-off-white);
  width: 100%;
}

/* Hintergrund nur bei anstehenden Spielen (Uhrzeit) */
.fixture[data-status="offen"] .fixture--datetime {
  background-color: var(--color-off-white);
  color: var(--color-off-black);
}

.fixture--time,
.fixture--result {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;

}

.fixture--wettbewerb {
  font-weight: 500;
  text-align: center;
  font-size: clamp(.75rem, 1.5vw, .9rem);
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--radius-s);
  align-self: center;
}

.fixture--wettbewerb[data-typ="liga"]         { color: var(--color-black); }
.fixture--wettbewerb[data-typ="pokal"]        { color: #7c3aed; }
.fixture--wettbewerb[data-typ="freundschaft"] { color: #0891b2; }
.fixture--wettbewerb[data-typ="unbekannt"]    { color: var(--color-text-muted); }

/* ============================================================
   DESKTOP: Teams in einer Reihe, Logos zur Mitte, Namen nach außen
   ============================================================ */

@media (min-width: 768px) {

  .fixture--team {
    flex-direction: row;
    gap: var(--spacing-m);
    align-items: center;
  }

  /* Heim: Reihenfolge umkehren → Name außen (links), Logo innen (Mitte) */
  .fixture--team--home {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  /* Gast: normale Reihenfolge → Logo innen (Mitte), Name außen (rechts) */
  .fixture--team--away {
    flex-direction: row;
    justify-content: flex-start;
  }
}



/* Nächstes Spiel: Accent-Border rundum */
.fixture--next {
  box-shadow: var(--shadow-large);
}

/*
.fixture--next .fixture--date{
  color: var(--color-accent);
}
  */

/* Akkordeon vergangene Spiele */
.fixtures-vergangen {
  border-radius: var(--radius-m);
}

.fixtures-vergangen--summary {
  cursor: pointer;
  padding: var(--spacing-m);
  text-align: center;
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text-muted);
  list-style: none;          /* Default-Dreieck weg */
  user-select: none;
}

.fixtures-vergangen--summary::-webkit-details-marker {
  display: none;             /* Safari-Dreieck weg */
}

.fixtures-vergangen--summary::after {
  content: ' ▾';
}

.fixtures-vergangen[open] .fixtures-vergangen--summary::after {
  content: ' ▴';
}

.fixtures-vergangen--liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding-top: var(--spacing-m);
}
/*
.fixture[data-status="gespielt"] {
  color: var(--color-text-light);
}
  */


  /* Monats-Überschrift im Spielplan (und Tag im Spieltag) */
.fixtures-monat,
.fixtures-tag {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs);
}
/* ============================================================
   HERO-FIXTURE — Card im Hero-Slider (Startseite)
   ============================================================ */

  .hero-fixtures {
  display: flex;
  gap: var(--spacing-m);
  overflow-x: auto;
  padding: var(--spacing-m);
  scroll-snap-type: x mandatory;
}

.hero-fixture {
  min-width: 80svw;
  max-width: 400px;
  scroll-snap-align: center;
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

@media (min-width: 1024px) {
  /*.hero-fixtures {
    flex-direction: column;
  }*/

  .hero-fixture {
    min-width: 0;                 /* 80svw aufheben */
    width: 100%;                  /* volle Breite der Hero-Spalte */
    max-width: 400px;
  }
}

/* ---------- Meta-Zeile: Status · Mannschaft · Wettbewerb ---------- */

.hero-fixture--meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-s);
  font-family: var(--font-family-condensed);
  color: var(--color-text-muted);
  font-weight: 500;
}

.hero-fixture--meta p{
  font-size: var(--font-size-xs);
  color: var(--color-black);
}

.hero-fixture--status {
  text-align: left;
}

.hero-fixture--mannschaft{
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-fixture--wettbewerb {
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Spiel: Team · Datetime · Team ---------- */

.hero-fixture--game {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-s);
  align-items: center;
}

.hero-fixture--team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-s);
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.hero-fixture--logo {
  display: flex;
  justify-content: center;
}

.hero-fixture--logo img {
  height: 40px;
}

.hero-fixture--datetime {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--color-off-white);
  padding: var(--spacing-s);
  border-radius: var(--radius-m);
  height: max-content;
}

.hero-fixture--date {
  font-weight: 400;
  font-size: .7rem;
  flex-wrap: nowrap;

}

.hero-fixture--time,
.hero-fixture--result {
  font-family: var(--font-family-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

/* Gespielte Spiele: dunkles Datetime-Feld wie im Spielplan */
.hero-fixture[data-status="gespielt"] .hero-fixture--datetime {
  background-color: var(--color-off-black);
  color: var(--color-off-white);
}
/* ============================================================
   HOME-FIXTURE — kompakte Zeile (Home-Auszug)
   ============================================================ */

.home-fixtures {
  background-color: var(--color-off-white);
}

.home-fixture {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-m);
  min-height: var(--row-height);
  align-items: center;
  background-color: var(--color-white);
  border-radius: var(--radius-s);
}

.fixtures--home{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-m);
}

.home-fixture--team {
  display: flex;
  width: 100%;
  gap: var(--spacing-s);
  align-items: center;
  font-size: var(--font-size-s);
  font-weight: 500;
}

.home-fixture--team--home { 
  justify-content: right; 
  text-align: right;
}

.home-fixture--team--away { 
  justify-content: left; 
  text-align: left;
}

.home-fixture--team--home .home-fixture-name{

}

.home-fixture--logo img {
  max-height: 30px;
}

.home-fixture--data {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .15rem;
  padding: var(--radius-s);
  border-radius: var(--radius-m);
  font-weight: 600;
  color: var(--color-off-white);
  background-color: var(--color-off-black);
}

.home-fixture[data-status="offen"] .home-fixture--data {
  background-color: var(--color-off-white);
  color: var(--color-off-black);
}

.home-fixture--datum {
  font-weight: 400;
  font-size: .65rem;
}

@media (min-width: 1024px) {
  .home-fixtures {
    border-radius: var(--radius-l);
  }
}
/* ============================================================
   TABLE
   ============================================================ */

.page--tabelle{
  background-color: var(--color-off-white);
}

.tabelle {
  max-width: 1200px;
  margin: auto;
}

.table {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-xs);
  padding: var(--spacing-m);
}

.table--home {
  padding: var(--spacing-m);
}


/* ---------- Zeile ---------- */

.table-row {
  position: relative;
  display: grid;
  /* mit Logo: Rang · Logo · Name · Sp · Diff · Pkt */
  grid-template-columns: clamp(1.25rem, 4vw, 1.75rem) clamp(28px, 5vw, 40px) 1fr clamp(2.25rem, 5vw, 3rem) clamp(2.25rem, 5vw, 3rem) clamp(2.25rem, 5vw, 3rem) clamp(2.25rem, 5vw, 3rem);
  align-items: center;
  gap: clamp(var(--spacing-xs), 1.5vw, var(--spacing-m));
  padding: clamp(var(--spacing-xs), 2vw, var(--spacing-m)) clamp(var(--spacing-s), 3vw, var(--spacing-l));
  min-height: var(--row-height);
  background-color: var(--color-white);
  font-size: var(--font-size-s);
  font-weight: 500;
}

/* ohne Logo: Rang · Name · Sp · Diff · Pkt */
.table-row--nologo {
  grid-template-columns: clamp(1.25rem, 4vw, 1.75rem) 1fr clamp(1.75rem, 4vw, 2.5rem) clamp(2.25rem, 5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem);
}

.table-row--logo img {
  max-height: clamp(24px, 4vw, 34px);
  display: block;
}

.table-row--rang,
.table-row--sp,
.table-row--diff,
.table-row--pkt,
.table-row--tore {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.table-row--pkt { font-weight: 700; }

.table-row--name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- Zonen-Balken (nur Gesamttabelle) ---------- */

.table-row--zone {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.table-row[data-zone="aufstieg"] .table-row--zone            { background: var(--color-zone-aufstieg); }
.table-row[data-zone="aufstieg-relegation"] .table-row--zone { background: var(--color-zone-aufstieg-relegation); }
.table-row[data-zone="abstieg-relegation"] .table-row--zone  { background: var(--color-zone-abstieg-relegation); }
.table-row[data-zone="abstieg"] .table-row--zone             { background: var(--color-zone-abstieg); }
/* mittelfeld: Span da, aber ohne Farbe → unsichtbar */

/* ---------- Gesamttabelle (hell) ---------- */

.tabelle .table-row.is-self {
  color: var(--color-accent);
}

/* ============================================================
   HOME-TABLE: invertiert (dunkel)
   ============================================================ */

.home-table {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.home-table .section-link {
  color: var(--color-white);
}

.home-table-filter button {
  background-color: var(--color-dark-btn);
  color: var(--color-white);
}

.home-table-filter button.is-active {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.home-table .table-row {
  background-color: var(--color-dark-row);
  color: var(--color-white);
  border-radius: var(--radius-s);
}

.home-table .table-row.is-self {
  color: var(--color-accent);
}

@media (min-width: 1024px) {
  .home-table{
    border-radius: var(--radius-l);
  }
}

.tabelle-liga {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--color-text-muted);
  padding: 0 var(--spacing-m) 0;
}
/* ============================================================
   HERO
   ============================================================ */

section.hero {
  height: 92svh;
  background-color: rgb(140, 137, 137);
  margin-bottom: var(--spacing-xl);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

@media (min-width: 1024px) {
  section.hero {
    height: 80svh;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
}

/* ---------- Featured Article ---------- */

.hero-featured--article {
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.hero-featured--article-title {
  color: var(--color-white);
  font-family: var(--font-family-display);
  font-size: 2.2rem;
  line-height: 1;
}

.hero-featured--article-meta {
  color: var(--color-white);
  font-size: .9rem;
  display: flex;
  gap: var(--spacing-s);
  font-weight: 600;
}

.hero-featured--article-meta--tag {
  color: var(--color-accent);
  text-transform: uppercase;
}

.hero-featured--article-meta--date {
  font-weight: 500;
}

/* ---------- Hero-Widget-Wrapper (hält die Fixture-Cards) ---------- */

.hero-widget {
  display: flex;
  gap: var(--spacing-m);
  overflow-x: auto;
  padding: var(--spacing-m);
  scroll-snap-type: x mandatory;
}

.hero-widget .fixture-card {
  min-width: 300px;
  max-width: 400px;
}

@media (min-width: 1024px) {
  .hero-widget {
    justify-content: right;
    flex-direction: column;
  }


}
/* ============================================================
   HOME-NEWS
   ============================================================ */

section.home-news{
  background-color: var(--color-off-white);
}

.news-card {
  scroll-snap-align: center;
  aspect-ratio: var(--card-aspectratio);
  display: flex;
  flex-direction: column;
}

.news-image {
  flex: 1;                    /* füllt den Platz über dem Content */
  min-height: 0;              /* erlaubt Schrumpfen im Flex */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-off-white); /* Fallback ohne Bild */
  overflow: hidden;
  position: relative;
}

.news-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;      /* erbt das Bild vom inline-style */
  background-size: cover;
  background-position: center;
  transition: transform .75s ease;
}

.news-card:hover .news-image::before {
  transform: scale(1.1);
}

.news-content {
  flex-shrink: 0;             /* Textbereich bleibt konstant, schrumpft nicht */
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.news-meta *{
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1;
}

.news-meta .separator{
  font-weight: 200;
}

.news-tag {
  color: var(--color-accent);
}

.news-date {
  color: var(--color-text-muted);
}

.news-title {
  font-size: var(--font-size-m);
  font-weight: 600;
  line-height: 1.2;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.page--newsroom{
  background-color: var(--color-off-white);
}
.card-team {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--color-white);
  border-radius: var(--radius-l);
  scroll-snap-align: center;
  aspect-ratio: var(--card-aspectratio);
}

/* Bild-Ebene (zoomt beim Hover) */
.card-team::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .5s ease;
}

/* Overlay für Textlesbarkeit */
.card-team::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 80%);
  z-index: 1;
}

.card-team--content {
  position: relative;
  z-index: 2;
  padding: var(--spacing-l);
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.card-team--name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-l);
  line-height: 1;
}

.card-team--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-m);
}

.card-team--liga {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: .8;
}

.card-team--cta {
  display: flex;
  gap: var(--spacing-s);
  align-items: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.card-team--cta p {
  font-size: var(--font-size-xs);
}

/* Hover-Zoom nur auf Geräten mit echtem Hover */
@media (hover: hover) {
  .card-team:hover::before {
    transform: scale(1.08);
  }
}

/* ============================================================
   BEITRAG (Einzelansicht)
   ============================================================ */

.beitrag {
  padding: var(--spacing-m);
}

.beitrag-article {
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================================
   HERO (Titelbild mit Titel drüber)
   ============================================================ */

.beitrag-hero {
  position: relative;
  margin-bottom: var(--spacing-l);
  
}

/* --- Mit Bild: Titel liegt unten im Bild, weiße Schrift --- */

.beitrag-hero--bild {
  position: relative;          /* Anker für absolute Kinder */
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 360px;
}

.beitrag-hero--img {
  position: absolute;
  inset: 0;                    /* füllt den ganzen Container */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Verlauf von unten (dunkel) nach oben (transparent) */
.beitrag-hero--bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .85) 0%,
    rgba(0, 0, 0, .5) 30%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 1;
}

.beitrag-hero--inhalt {
  position: absolute;   /* über dem Bild, am unteren Rand */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--spacing-l) var(--spacing-m);
}

/* Im Bild: alles weiß */
.beitrag-hero--bild .beitrag-titel {
  color: var(--color-white);
}

.beitrag-hero--bild .beitrag-datum {
  color: rgba(255, 255, 255, .85);
}

.beitrag-hero--bild .beitrag-tag {
  color: var(--color-white);
}

/* --- Ohne Bild: normaler Header, dunkle Schrift --- */

.beitrag-hero:not(.beitrag-hero--bild) .beitrag-hero--inhalt {
  padding: var(--spacing-l) 0 var(--spacing-m);
}
/* ---------- Header: Meta (Tag + Datum) ---------- */

.beitrag-header--meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: var(--spacing-s);
}

.beitrag-tag {
  color: var(--color-accent);
  text-transform: uppercase;
}

.beitrag-datum {
  color: var(--color-black-muted);
}

/* ---------- Titel ---------- */

.beitrag-titel {
  font-family: var(--font-family-display);
  font-size: 2.5rem;
  line-height: 1.05;
}

/* ---------- Inhalt (p / blockquote / strong) ---------- */

.beitrag-inhalt {
  font-size: 1.05rem;
  line-height: 1.7;
}

.beitrag-inhalt p {
  margin-bottom: var(--spacing-m);
}

.beitrag-inhalt strong {
  font-weight: 700;
}

.beitrag-inhalt blockquote {
  font-family: var(--font-family-display);
  font-size: 1.4rem;
  line-height: 1.3;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-m);
  margin: var(--spacing-l) 0;
}

/* ---------- Blocks: Bild ---------- */

.beitrag-inhalt figure[data-ratio] {
  margin: var(--spacing-l) 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.beitrag-inhalt figure[data-ratio] img {
  width: 100%;
  height: auto;
  display: block;
}

.beitrag-inhalt figure[data-ratio] figcaption {
  font-size: .85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding-top: var(--spacing-s);
}

/* ---------- Blocks: Überschriften ---------- */

.beitrag-inhalt h2 {
  font-family: var(--font-family-display);
  font-size: 1.8rem;
  line-height: 1.15;
  margin: var(--spacing-l) 0 var(--spacing-s);
}

.beitrag-inhalt h3 {
  font-family: var(--font-family-display);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: var(--spacing-l) 0 var(--spacing-s);
}

/* ---------- Blocks: Video ---------- */

.beitrag-inhalt .video {
  margin: var(--spacing-l) 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.beitrag-inhalt .video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* ---------- Blocks: Liste ---------- */

.beitrag-inhalt ul,
.beitrag-inhalt ol {
  margin: var(--spacing-m) 0;
  padding-left: var(--spacing-l);
}

.beitrag-inhalt li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.6;
}

.beitrag-inhalt a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Blocks: Galerie / Slider ---------- */

.gallery-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* Desktop: 3er-Grid */
  gap: var(--spacing-m);
  margin: var(--spacing-l) 0;
}

.gallery-slider--item {
  border-radius: var(--radius-l);
  overflow: hidden;
  margin: 0;
}

.gallery-slider--item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobil: horizontaler Snap-Slider, randlos */
@media (max-width: 767px) {
  .gallery-slider {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(80%, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    margin-left: calc(var(--spacing-m) * -1);
    margin-right: calc(var(--spacing-m) * -1);
    padding-left: var(--spacing-m);
    padding-right: var(--spacing-m);
  }
  .gallery-slider--item {
    scroll-snap-align: center;
    aspect-ratio: auto;
  }
}
section.member{
    background: linear-gradient(rgb(13, 13, 13)), var(--color-off-black);
    color: var(--color-off-white);   
}

section.member .card{
    padding: var(--spacing-ml);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    aspect-ratio: var(--card-aspectratio);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Overlay: oben schwarz → unten transparent (Text sitzt oben) */
section.member .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 100%);
    z-index: 0;
}

/* Text über das Overlay */
section.member .card > * {
    position: relative;
    z-index: 1;
}

section.member .card p{
    font-size: var(--font-size-m);
    line-height: 1.5;
}

section.member p.card-tagline{
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

section.member .card h3{
    margin-bottom: var(--spacing-l);
}

section.member a.button{
    background-color: var(--color-accent);
    color: var(--color-white);
}

section.member .card {
  position: relative;
  overflow: hidden;
}

/* Bild-Ebene (zoomt) */
section.member .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .75s ease;
}

section.member .card:hover::before {
  transform: scale(1.1);
}

/* Overlay (ruhig, über dem Bild) */
section.member .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 100%);
  z-index: 1;
}

/* Text über allem */
section.member .card > * {
  position: relative;
  z-index: 2;
}
/* ============================================================
   KADER
   ============================================================ */

.page--kader {
  background-color: var(--color-off-white);
}

/* Positions-Überschrift */

.kader-gruppe-header {
  margin-top: var(--spacing-l);
}

.kader-gruppe-header:first-of-type {
  margin-top: 0;
}

/* Grid: mobil 2 Spalten, Desktop max 4 */
.kader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-s);
  padding: var(--spacing-m);
}

@media (min-width: 768px) {
  .kader-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1024px) {
  .kader-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Player Card ---------- */

.player-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--color-white);
  border-radius: var(--radius-l);
}

/* Bild-Ebene (zoomt beim Hover) */
.player-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: 120%;
  background-position: center 25%;
  z-index: 0;
  transform: scale(1.15);
  transform-origin: center 25%;
  transition: transform .5s ease;
}

@media (hover: hover) {
  .player-card:hover::before {
    transform: scale(1.25);
  }
}

/* Overlay: unten schwarz → oben transparent */
.player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 33%);
  z-index: 1;
}

.player-card--content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  position: relative;
  z-index: 2;
  padding: var(--spacing-m);
  width: 100%;
  font-family: var(--font-family-condensed);
  line-height: 1;
}

.player-card--vorname {
  font-size: var(--font-size-s);
  font-weight: 500;
}

.player-card--nachname {
  font-size: var(--font-size-l);
  font-weight: 700;
  font-family: var(--font-family-display);
}

/* Hover-Zoom nur auf Geräten mit echtem Hover */
@media (hover: hover) {
  .player-card:hover::before {
    transform: scale(1.06);
  }
}
/* ============================================================
   SPONSOREN
   ============================================================ */

.sponsoren {
  background-color: var(--color-off-white);
}

/* Mobile: Grid */
.card-grid-sponsor {
  display: grid;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.card-grid-sponsor--premium {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.card-grid-sponsor--standard {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* Sponsor-Card: Logo als Hintergrund */
.sponsor-card {
  background-color: var(--color-white);
  box-shadow: none;
  height: 100%;
  aspect-ratio: 16/9;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;    /* Logo respektiert das Padding */
}

.card-grid-sponsor--premium .sponsor-card {
  padding: var(--spacing-m);
}

.card-grid-sponsor--standard .sponsor-card {
  padding: var(--spacing-s);
}

/* Desktop: Flex, zentriert */
@media (min-width: 1024px) {
  .card-grid-sponsor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .card-grid-sponsor--premium .sponsor-card {
    width: 160px;
    height: 100px;
  }

  .card-grid-sponsor--standard .sponsor-card {
    width: 120px;
    height: 80px;
  }
}
/* ============================================================
   TEAM-HERO
   ============================================================ */

.team-hero .container {
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
}

/* Hero-Bild bekommt seitliches Padding (Slider hat sein eigenes) */
.team-hero--media {
  margin: 0 var(--spacing-m);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}

.team-hero--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-l);
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 60%);
}

.team-hero--title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

/* ---------- Stat-Cards ----------
   Mobil: Slider (kommt von .card-container aus styles.css).
   Desktop: Override auf 4-Spalten-Raster, kein Scroll.
*/
@media (min-width: 768px) {
  .team-hero--stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    overflow-x: visible;
  }
}

/* team-stat erbt bg/radius/shadow von .card — hier nur Layout */
.team-stat {
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  background-color: var(--color-white);
}

.team-stat--label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.team-stat--value {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xxl);
  line-height: 1;
  text-align: left;
}

.team-stat--form-row {
  display: flex;
  gap: var(--spacing-s);
  justify-content: start;
}

.form-dot {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-white);
}

.form-dot--s { background-color: var(--color-zone-aufstieg); }
.form-dot--u { background-color: var(--color-text-light); }
.form-dot--n { background-color: var(--color-accent); }
section.sponsor{
    background-color: var(--color-white);
    color: var(--color-off-black);
}

section.sponsor .card{
    padding: var(--spacing-ml);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    aspect-ratio: var(--card-aspectratio);
    position: relative;
    overflow: hidden;
}

/* Text über allem */
section.sponsor .card > * {
    position: relative;
    z-index: 2;
}

section.sponsor .card p{
    font-size: var(--font-size-m);
    line-height: 1.5;
}

section.sponsor p.card-tagline{
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

section.sponsor .card h3{
    margin-bottom: var(--spacing-l);
}

section.sponsor a.button{
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Bild-Ebene (zoomt) */
section.sponsor .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-color: var(--color-off-black);
  z-index: 0;
  transition: transform .75s ease;
}

section.sponsor .card:hover::before {
  transform: scale(1.1);
}

/* Overlay: oben schwarz → unten transparent */
section.sponsor .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, transparent 100%);
  z-index: 1;
}
/* ============================================================
   FC SERBIA NÜRNBERG · SPIELER-DETAILSEITE
   Mobile first — hell, rundes Foto, Meta-Zeile, Stat-Cards.
   ============================================================ */

.page--spieler {
  background-color: var(--color-off-white);
}


/* ============================================================
   HERO
   ============================================================ */

.spieler-hero {
  padding-bottom: var(--spacing-l);
}

/* ---------- Prev / Next ---------- */
.spieler-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-m);
}

.spieler-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  font-family: var(--font-family-condensed);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  transition: color .2s ease;
}

.spieler-nav a:hover { color: var(--color-off-black); }
.spieler-nav--prev .icon svg { transform: rotate(180deg); }
.spieler-nav .icon svg { height: 18px; }


/* ---------- Hero-Inhalt: Foto rund, dann Name, dann Meta ---------- */
.spieler-hero--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-m);
  text-align: center;
}

.spieler-hero--photo {
  width: clamp(200px, 60vw, 300px);
  aspect-ratio: 1/1;
  border-radius: var(--radius-full);
  background-image: var(--img);
  background-size: 120%;
  background-position: center 20%;
  background-color: var(--color-off-black);   /* Fallback ohne Bild */
  border: 3px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .spieler-hero--photo { background-image: var(--img-2x); }
}

.spieler-hero--head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
}

.spieler-hero--name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-display);
  line-height: .9;
  color: var(--color-off-black);
  gap: var(--spacing-s);
}

.spieler-hero--vorname {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-l);
  font-weight: 400;
}

.spieler-hero--nachname {
  font-size: var(--font-size-xxxl);
  font-weight: 400;
}


/* ---------- Meta-Zeile: Flagge Nationalität | Alter | Position ---------- */
.spieler-hero--meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  font-family: var(--font-family-condensed);
  font-weight: 500;
  font-size: var(--font-size-s);
  color: var(--color-off-black);
}

.spieler-meta--item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
}

.spieler-meta--nation {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

.spieler-meta--sep {
  color: var(--color-text-light);
  font-weight: 300;
}

.spieler-hero--cta {
  margin-top: var(--spacing-s);
}


/* ============================================================
   BODY: Stat-Cards
   ============================================================ */

.spieler-body {
  padding-bottom: var(--spacing-xl);
}

/* Mobil: Slider (.card-container). Desktop: 3-Spalten-Raster. */
@media (min-width: 768px) {
  .spieler-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    overflow-x: visible;
  }
}

/* spieler-stat erbt bg/radius/shadow von .card — hier nur Layout */
.spieler-stat {
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-s);
  min-height: 120px;
  background-color: var(--color-white);
}

.spieler-stat--label {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Einheitlicher Card-Wert: Display, size-l — gilt für Alter,
   Datum, Position und Ländernamen gleichermaßen */
.spieler-stat--value,
.spieler-nation--name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-l);
  line-height: 1;
}


/* ---------- Nationalitäten: Flagge + Name, je Zeile ---------- */
.spieler-stat--nationen {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.spieler-nation {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}


/* ---------- Flaggen-Chip ---------- */
.spieler-flag {
  width: 20px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-s);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}


/* ============================================================
   BIO (auskommentiert im Template — Style steht bereit)
   ============================================================ */

.spieler-bio {
  padding: var(--spacing-l);
  margin-top: var(--spacing-m);
  background-color: var(--color-white);
  border-radius: var(--radius-l);
}

.spieler-bio--title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-l);
  margin-bottom: var(--spacing-m);
}

.spieler-bio--text {
  font-size: var(--font-size-m);
  line-height: 1.6;
  color: var(--color-text-muted);
}


/* ============================================================
   DESKTOP: Foto links, Kopf rechts
   ============================================================ */

@media (min-width: 768px) {
  .spieler-hero--inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-m);
  }

  .spieler-hero--photo {
    width: clamp(280px, 30vw, 360px);
  }

  .spieler-hero--head {
    align-items: flex-start;
  }

  .spieler-hero--meta {
    justify-content: flex-start;
  }
}
/* ============================================================
   FC SERBIA NÜRNBERG · IMPRESSUM
   ============================================================ */

.impressum {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 100%;
    padding: var(--spacing-m);
}


/* ---------- Block ---------- */
.impressum-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.impressum-block p {
    font-size: var(--font-size-m);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.impressum-block a {
    color: var(--color-accent);
    text-decoration: none;
}

.impressum-block a:hover {
    text-decoration: underline;
}


/* ---------- Label (kleine Überschrift über einem Block) ---------- */
.impressum-label {
    font-family: var(--font-family-condensed);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

/* ---------- Überschriften im Haftungsausschluss ---------- */
.impressum-block h2 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-l);
    color: var(--color-off-black);
    margin-bottom: var(--spacing-s);
}

.impressum-block h3 {
    font-family: var(--font-family-condensed);
    font-size: var(--font-size-m);
    font-weight: 600;
    color: var(--color-off-black);
    margin-top: var(--spacing-m);
    margin-bottom: var(--spacing-xs);
}


/* ---------- Vorstand-Liste ---------- */
.impressum-vorstand {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.impressum-vorstand li {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-s) var(--spacing-m);
    background-color: var(--color-off-white);
    border-radius: var(--radius-l);
}

.vorstand-name {
    font-family: var(--font-family-condensed);
    font-weight: 600;
    font-size: var(--font-size-m);
    color: var(--color-off-black);
}

.vorstand-funktion {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* ============================================================
   FC SERBIA NÜRNBERG · FOOTER
   ============================================================ */

.site-footer {
    background-color: black;
    color: var(--color-off-white);
    padding: var(--spacing-xl) 0 var(--spacing-l);
    padding: var(--spacing-m);
}


/* ---------- Grid ---------- */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 2fr;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Wrapper für die zwei Link-Spalten (Saison + Verein) */
.footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}


/* ---------- Marke ---------- */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    max-width: 32ch;
}

.footer-logo img {
    height: 64px;
    width: auto;
    display: block;
}

.footer-brand-address {
    font-size: var(--font-size-s);
    line-height: 1.7;
    color: var(--color-text-light);
}

.footer-social {
    display: flex;
    gap: var(--spacing-s);
    margin-top: var(--spacing-xs);
}

.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-m);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-off-white);
    transition: background-color var(--transition-speed, .2s) ease,
                border-color var(--transition-speed, .2s) ease;
}

.footer-social a:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}


/* ---------- Link-Spalten ---------- */
.footer-col h4 {
    font-family: var(--font-family-condensed);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--color-off-white);
    margin-bottom: var(--spacing-m);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.footer-col a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: var(--font-size-s);
    transition: color var(--transition-speed, .2s) ease;
}

.footer-col a:hover {
    color: var(--color-off-white);
}


/* ---------- Unterzeile ---------- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    padding-top: var(--spacing-l);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.footer-bottom a {
    color: var(--color-text-light);
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--color-off-white);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
    /* Brand oben, Link-Spalten darunter */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-l);
        text-align: center;
    }

    /* Link-Spalten NEBENEINANDER bleiben */
    .footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-l);
    }

    /* Marke zentrieren */
    .footer-brand {
        align-items: center;
        max-width: none;
    }

    .footer-logo img {
        margin: 0 auto;
    }

    .footer-social {
        justify-content: center;
    }

    /* Unterzeile zentrieren */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* ============================================================
   FC SERBIA NÜRNBERG · MITGLIEDSANTRAG
   ============================================================ */

.main-antrag {
  background-color: var(--color-off-white);
}

.antrag {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.antrag-lead {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-m);
  font-weight: 500;
  color: var(--color-off-black);
}

.antrag-intro {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-m);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Formular ---------- */
.antrag-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.antrag-row {
  display: flex;
  gap: var(--spacing-s);
}

.antrag-row > * {
  flex: 1;
}

/* ---------- Textfelder ---------- */
.antrag-input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: var(--spacing-m);
  border: 1px solid var(--color-off-white);
  border-radius: var(--radius-m);
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  background: var(--color-white);
  color: var(--color-off-black);
  transition: border-color .2s ease;
}

.antrag-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.antrag-input::placeholder {
  color: var(--color-text-light);
}

/* ---------- Select ---------- */
.antrag-select {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-m);
  border: 1px solid var(--color-off-white);
  border-radius: var(--radius-m);
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  background: var(--color-white);
  color: var(--color-off-black);
  cursor: pointer;
  transition: border-color .2s ease;
}

.antrag-select:focus {
  border-color: var(--color-accent);
}

/* ---------- Checkboxen ---------- */
.antrag-checks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  margin-top: var(--spacing-m);
}

.antrag-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  cursor: pointer;
}

.antrag-check-box {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 20px;
  margin: 2px 0 0;
  padding: 0;
  cursor: pointer;
}

.antrag-check-text {
  flex: 1;
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- Submit ---------- */
.antrag-submit {
  justify-content: space-between;
}

/* ---------- Honeypot ---------- */
.antrag-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- Erfolg / Fehler ---------- */
.antrag-success {
  background: var(--color-off-white);
  border-radius: var(--radius-l);
  padding: var(--spacing-l);
}

.antrag-success h2 {
  font-family: var(--font-family-display);
  color: var(--color-accent);
  margin-bottom: var(--spacing-s);
}

.antrag-errors {
  font-family: var(--font-family-condensed);
  background: #fff0f2;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-l);
  padding: var(--spacing-m);
  font-size: var(--font-size-s);
}

.antrag-errors ul {
  margin: var(--spacing-xs) 0 0;
  padding-left: var(--spacing-m);
}

/* ---------- Mobil ---------- */
@media (max-width: 560px) {
  .antrag-row {
    flex-direction: column;
  }
}

/* ---------- Mitgliedsnummer mit festem Präfix ---------- */
.antrag-nummer {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  background: var(--color-white);
  border: 1px solid var(--color-off-white);
  border-radius: var(--radius-m);
  padding-left: var(--spacing-m);
}

.antrag-nummer:focus-within {
  border-color: var(--color-accent);
}

.antrag-nummer-praefix {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.antrag-nummer-input {
  border: none;
  padding-left: 0;
  background: transparent;
}

.antrag-nummer-input:focus {
  border-color: transparent;
}

.antrag-countdown {
  font-family: var(--font-family-condensed);
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  margin-top: var(--spacing-m);
}

.antrag-countdown a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.antrag-submit {
  justify-content: space-between;
  transition: opacity .2s ease, transform .1s ease;
}

.antrag-submit:hover {
  opacity: .9;
}

.antrag-submit:focus-visible {
  outline: 2px solid var(--color-off-black);
  outline-offset: 2px;
}

.antrag-submit:active {
  transform: scale(.98);
}