/* =============================================
   Final4 Faustball – main.css
   Primär: #29255b  |  Akzent: #dd3730
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ─── CSS Variables ─── */
:root {
  --primary:      #29255b;
  --primary-dark: #1b1840;
  --primary-mid:  #3a3580;
  --accent:       #dd3730;
  --accent-dark:  #b52c26;
  --white:        #ffffff;
  --off-white:    #f5f6fa;
  --light-gray:   #e8eaf0;
  --mid-gray:     #8b90a8;
  --dark:         #111122;
  --text:         #2a2a3e;

	/*
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;*/

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Area Normal', sans-serif;
  --font-title:   'Neutra Display 2', sans-serif;
	
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  --shadow-sm:  0 2px 8px rgba(41,37,91,.12);
  --shadow-md:  0 4px 24px rgba(41,37,91,.18);
  --shadow-lg:  0 8px 48px rgba(41,37,91,.25);

  --transition: 0.25s cubic-bezier(.4,0,.2,1);
  --transition-slow: 0.45s cubic-bezier(.4,0,.2,1);
}
/* --- Display-Schriften (Für Überschriften / Buttons) --- */
@font-face {
  font-family: 'Neutra Display 1';
  src: url('../assets/NeutraDisp Titling.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neutra Display 2';
  src: url('../assets/NeutraDisp BoldAlt.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* --- Text-Schriften (Für fettgedruckten Text) --- */
@font-face {
  font-family: 'Neutra Text';
  src: url('../assets/NeutraText BoldAlt.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* --- Fliesstext-Schrift (Für normalen Body-Text) --- */
@font-face {
  font-family: 'Area Normal';
  src: url('../assets/AreaNormal-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── Utility ─── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); }

.btn-outline {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,.6);
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); }

.btn-dark { background: var(--primary); color: var(--white); }
.btn-dark:hover { background: var(--primary-dark); }

.section-label {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.1;
  color: var(--primary); text-transform: uppercase;
}

/* ─── Top Bar ─── */
.top-bar {
  background: var(--primary-dark);
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  padding: 6px 0;
  font-family: var(--font-display);
  letter-spacing: .04em;
}
.top-bar .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.top-bar a { color: rgba(255,255,255,.7); }
.top-bar a:hover { color: var(--white); }
.top-bar-links { display: flex; gap: 20px; }

/* ─── Header / Navbar ─── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--primary);
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
  transition: background var(--transition-slow);
}

.site-header.scrolled { background: var(--primary-dark); }

.navbar {
  display: flex; align-items: center;
  height: 70px; gap: 24px;
}

.nav-logo {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.nav-logo-badge {
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 900;
  padding: 6px 14px;
  letter-spacing: .06em;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600; letter-spacing: .1em;
  color: rgba(255,255,255,.9); line-height: 1.3;
  text-transform: uppercase;
}
.nav-logo-text span { display: block; font-size: .72rem; color: rgba(255,255,255,.55); }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1;
}
.nav-links a {
  color: rgba(255,255,255,.82);
  font-family: var(--font-display);
  font-size: .88rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.1); }
.nav-links a.active { color: var(--white); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '▾'; margin-left: 4px; font-size: .7rem; opacity: .6;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 200px;
  background: var(--primary-dark);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 100;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
  display: block; padding: 10px 16px;
  font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  border-radius: 0;
  transition: color var(--transition), padding-left var(--transition);
}
.dropdown-menu a:hover { color: var(--white); padding-left: 22px; background: rgba(255,255,255,.06); }
.dropdown-menu a:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dropdown-menu a:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Event Switch */
.event-switch {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 0;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px; overflow: hidden;
}
.event-switch-btn {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: 7px 16px;
  transition: background var(--transition), color var(--transition);
}
.event-switch-btn.active {
  background: var(--accent);
  color: var(--white);
}
.event-switch-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.12);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: 4px; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─── Hero ─── */
.hero {
  position: relative; overflow: hidden;
  background: var(--primary);
  min-height: 580px;
  display: flex; align-items: center;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(221,55,48,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(58,53,128,.6) 0%, transparent 55%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-mid) 100%);
}

.hero-pattern {
  position: absolute; inset: 0; opacity: .04;
  background-image: repeating-linear-gradient(
    45deg,
    #fff 0px, #fff 1px,
    transparent 1px, transparent 40px
  );
}

.hero-content {
  position: relative; z-index: 2;
  padding: 80px 0;
  max-width: 680px;
}

.hero-event-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.hero-event-tag::before {
  content: ''; display: block; width: 6px; height: 6px;
  background: rgba(255,255,255,.7); border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 900; line-height: .95;
  color: var(--white); text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-title .accent { color: var(--accent); }

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.7); text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-bottom: 36px;
}
.hero-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.8);
}
.hero-meta-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Event Countdown Strip ─── */
.countdown-strip {
  background: var(--accent);
  padding: 14px 0;
  overflow: hidden;
}
.countdown-strip .container {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.countdown-label {
  font-family: var(--font-display);
  font-size: .85rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}
.countdown-units { display: flex; gap: 16px; align-items: center; }
.countdown-unit {
  text-align: center;
  min-width: 52px;
}
.countdown-number {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 900; line-height: 1;
  color: var(--white); display: block;
}
.countdown-text {
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}
.countdown-sep {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 900;
  color: rgba(255,255,255,.4); line-height: 1;
  margin-bottom: 16px;
}

/* ─── News Section ─── */
.section { padding: 80px 0; }
.section-alt { background: var(--off-white); }

.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 44px; flex-wrap: wrap;
}
.section-header-left {
	width: auto; min-width: 60%;
}
.section-header-right { padding-bottom: 4px; }

.news-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
}
.filter-btn {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--light-gray);
  color: var(--mid-gray);
  background: var(--white);
  transition: all var(--transition);
width: auto;
	justify-content: flex-start;
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--primary); color: var(--white); border-color: var(--primary);
}

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

.news-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.news-card-img {
  aspect-ratio: 16/9; overflow: hidden; position: relative;
  background: var(--light-gray);
}
.news-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.04); }

.news-card-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--white);
  background: var(--primary); padding: 3px 10px;
  border-radius: 100px;
}
.news-card-tag.tag-feld   { background: var(--primary); }
.news-card-tag.tag-halle  { background: var(--accent); }
.news-card-tag.tag-global { background: var(--primary-mid); }

.news-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.news-card-date {
  font-size: .78rem; color: var(--mid-gray); margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .04em;
}
.news-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  color: var(--primary); margin-bottom: 10px;
  text-transform: uppercase;
}
.news-card-excerpt { font-size: .9rem; color: var(--mid-gray); line-height: 1.55; flex: 1; }
.news-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--transition);
}
.news-card-link:hover { gap: 10px; }

/* ─── Teams Section ─── */
.teams-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.team-card {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
}
.team-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.team-logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--light-gray);
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  overflow: hidden;
}
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary); letter-spacing: .04em;
}
.team-region {
  font-size: .8rem; color: var(--mid-gray); margin-top: 4px;
}
.team-api-badge {
  font-family: var(--font-display);
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid-gray);
  background: var(--off-white); border: 1px solid var(--light-gray);
  padding: 2px 8px; border-radius: 100px;
  display: inline-block; margin-top: 8px;
}

/* ─── Spielplan ─── */
.schedule-table {
  width: 100%; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.schedule-table th {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 20px; text-align: left;
}
.schedule-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--light-gray);
  font-size: .92rem;
	
}
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:nth-child(even) td { background: var(--off-white); }
.schedule-table tr:hover td { background: rgba(41,37,91,.04); }

.match-teams {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary);
}
.match-kategorie{
	color:var(--primary);
}
.match-score {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 900;
  color: var(--accent); white-space: nowrap;
}
.match-time { color: var(--mid-gray); white-space: nowrap; }
.match-venue { font-size: .82rem; color: var(--mid-gray); }

.schedule-day-header {
  background: var(--light-gray);
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary);
  padding: 10px 20px;
  border-bottom: 1px solid var(--light-gray);
}

/* ─── Livestream CTA ─── */
.livestream-section {
  background: var(--primary-dark);
  position: relative; overflow: hidden;
  padding: 80px 0;
}
.livestream-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(221,55,48,.25) 0%, transparent 65%);
}
.livestream-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 60px; flex-wrap: wrap;
}
.livestream-text { flex: 1; min-width: 260px; }
.livestream-text .section-title { color: var(--white); }
.livestream-desc {
  color: rgba(255,255,255,.7);
  margin-top: 16px; max-width: 480px;
}
.livestream-visual {
  flex: 1; min-width: 300px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.livestream-play-btn {
  width: 72px; height: 72px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--white);
  box-shadow: 0 0 0 0 rgba(221,55,48,.5);
  animation: ping 2s ease-in-out infinite;
  cursor: pointer;
  transition: transform var(--transition);
}
.livestream-play-btn:hover { transform: scale(1.1); }
@keyframes ping {
  0%  { box-shadow: 0 0 0 0 rgba(221,55,48,.5); }
  70% { box-shadow: 0 0 0 28px rgba(221,55,48,0); }
  100%{ box-shadow: 0 0 0 0 rgba(221,55,48,0); }
}

/* ─── Sponsors ─── */
.sponsor-level-title {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid-gray);
  text-align: center; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.sponsor-level-title::before,
.sponsor-level-title::after {
  content: ''; flex: 1; height: 1px; background: var(--light-gray);
}

.sponsor-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 24px;
  margin-bottom: 40px;
}
.sponsor-logo {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-md);
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: center;
  min-width: 140px; min-height: 72px;
max-width: 300px;
  transition: box-shadow var(--transition), border-color var(--transition);
  color: var(--mid-gray);
  font-family: var(--font-display);
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.sponsor-logo:hover { box-shadow: var(--shadow-sm); border-color: var(--primary); }
.sponsor-logo.gold   { min-width: 180px; min-height: 88px; font-size: 1rem; }
.sponsor-logo.silver { min-width: 150px; min-height: 76px; }

/* ─── Info Cards (Arena, Anreise) ─── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.info-card {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.info-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary); }
.info-card-icon {
  width: 48px; height: 48px;
  background: rgba(41,37,91,.08);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 16px;
}
.info-card-title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px; letter-spacing: .04em;
}
.info-card-text { font-size: .9rem; color: var(--mid-gray); line-height: 1.6; }

/* ─── Organisation ─── */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.org-card {
  background: var(--white); border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-md); padding: 24px;
  text-align: center; transition: box-shadow var(--transition);
}
.org-card:hover { box-shadow: var(--shadow-sm); }
.org-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--light-gray);
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; overflow: hidden;
}
.org-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary); letter-spacing: .04em;
}
.org-role { font-size: .82rem; color: var(--mid-gray); margin-top: 4px; }
.org-contacts { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.org-contact-link {
  font-size: .82rem; color: var(--accent); display: flex; align-items: center;
  justify-content: center; gap: 6px;
}

/* ─── Archive / History ─── */
.archive-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.archive-table th {
  background: var(--primary); color: var(--white);
  font-family: var(--font-display); font-size: .82rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 20px; text-align: left;
}
.archive-table td {
  padding: 12px 20px; border-bottom: 1px solid var(--light-gray);
  font-size: .9rem; color: var(--primary);
}
.archive-table tr:last-child td { border-bottom: none; }
.archive-table tr:nth-child(even) td { background: var(--off-white); }

/* ─── Contact Form ─── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-family: var(--font-display); font-size: .82rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 6px;
}
.form-input,
.form-textarea,
.form-select {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .95rem; color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41,37,91,.12);
}
.form-textarea { resize: vertical; min-height: 130px; }

/* ─── Volunteers ─── */
.volunteer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.volunteer-info h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; text-transform: uppercase;
  color: var(--primary); margin-bottom: 12px;
}
.volunteer-info p { color: var(--mid-gray); margin-bottom: 20px; }
.volunteer-shifts { display: flex; flex-direction: column; gap: 10px; }
.shift-item {
  background: var(--off-white); border-left: 3px solid var(--primary);
  padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.shift-day { font-family: var(--font-display); font-weight: 700; font-size: .9rem; text-transform: uppercase; color: var(--primary); }
.shift-time { font-size: .85rem; color: var(--mid-gray); }

/* ─── Footer ─── */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,.7);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-brand {}
.footer-logo-badge {
 /* background: var(--accent);*/ color: var(--white);
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 900;
  padding: 5px 14px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  display: inline-block; margin-bottom: 16px;
}
.footer-desc {
  font-size: .88rem; line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin-bottom: 20px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: rgba(255,255,255,.6);
  transition: background var(--transition), color var(--transition);
}
.footer-social-link:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: .88rem; color: rgba(255,255,255,.55);
  transition: color var(--transition), padding-left var(--transition);
}
.footer-links a:hover { color: var(--white); padding-left: 4px; }

.footer-sponsors-row {
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-sponsors-row .sponsor-label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35); flex-shrink: 0;
}
.footer-sponsor-logos { 
  display: flex; 
  gap: 16px; 
  flex-wrap: wrap; 
  align-items: center; 
}

.footer-sponsor-logo {
  background: rgba(255,255,255,1.00);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: 0; /* Padding komplett entfernt, damit das Bild an den Rand stößt */
  overflow: hidden; /* Wichtig, damit das Bild nicht über die abgerundeten Ecken ragt */
  
  /* Optionale feste Box-Grösse, damit alle Sponsoren-Kacheln gleich gross sind */
  max-width: 160px; 
  height: 70px; 
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sorgt dafür, dass der Linkbereich die komplette Kachel ausfüllt */
.footer-sponsor-logo a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* Kontrolliert das Bild im Inneren */
.footer-sponsor-logo img {
  width: 100%;
  height: 100%;
  display: block;
  /* 
     'contain' sorgt dafür, dass das Logo vollständig sichtbar bleibt ohne Verzerrung.
     Falls das Bild die Box radikal beschneiden und komplett ausfällen soll, 
     ändere es zu 'cover'. Für Sponsorenlogos ist 'contain' meistens besser.
  */
  object-fit: contain; 
}

.footer-bottom {
  padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-copyright {
  font-size: .8rem; color: rgba(255,255,255,.35);
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
  font-size: .8rem; color: rgba(255,255,255,.35);
  transition: color var(--transition);
}
.footer-legal a:hover { color: rgba(255,255,255,.7); }

/* ─── Floating Buttons ─── */
.fab-group {
  position: fixed; bottom: 28px; right: 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 900;
}
.fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fab:hover { transform: scale(1.1); box-shadow: var(--shadow-lg); }
.fab-livestream { background: var(--accent); }
.fab-whatsapp   { background: #25D366; }
.fab-label {
  position: absolute; right: 62px;
  background: var(--dark); color: var(--white);
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.fab:hover .fab-label { opacity: 1; }
/* Pulsierender Effekt für den FAB */
.fab-pulse {
  animation: fab-ping 2s ease-in-out infinite;
}

/* Eigens auf die FAB-Grösse abgestimmte Animation */
@keyframes fab-ping {
  0%   { box-shadow: 0 0 0 0 rgba(221, 55, 48, 0.6); }
  70%  { box-shadow: 0 0 0 20px rgba(221, 55, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 55, 48, 0); }
}
/* ─── Page Hero (sub-pages) ─── */
.page-hero {
  background: var(--primary);
  padding: 56px 0 48px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(221,55,48,.15) 0%, transparent 60%);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900; text-transform: uppercase; line-height: 1;
  color: var(--white); margin-bottom: 8px;
}
.page-hero-sub {
   font-family: var(--font-title);
  font-size: 1rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-size: .75rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255,255,255,.55); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb-sep { opacity: .4; }

/* ─── Mobile Navigation ─── */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 990;
  background: var(--primary-dark);
  flex-direction: column;
  padding: 100px 24px 40px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.8);
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color var(--transition), padding-left var(--transition);
}
.mobile-nav a:hover { color: var(--white); padding-left: 8px; }
.mobile-nav-event-switch {
  display: flex; gap: 12px; margin-top: 32px;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .nav-links a { padding: 8px 8px; font-size: .82rem; }
}

@media (max-width: 960px) {
  .nav-links, .event-switch { display: none; }
  .nav-toggle { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid, .volunteer-grid { grid-template-columns: 1fr; }
  .hero-content { max-width: 100%; }
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .countdown-strip .container { gap: 20px; }
  .hero-title { font-size: 3.2rem; }
  .schedule-table { font-size: .84rem; }
  .schedule-table th, .schedule-table td { padding: 10px 12px; }
}

/* ─── Animations ─── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ─── Active event context classes ─── */
body.ctx-halle .event-switch-btn[data-event="halle"] { background: var(--accent); color: var(--white); }
body.ctx-feld   .event-switch-btn[data-event="feld"]  { background: var(--accent); color: var(--white); }

body.ctx-halle .hero-event-tag::after { content: ' HALLE'; }
body.ctx-feld   .hero-event-tag::after { content: ' FELD'; }

/* ─── Print ─── */
@media print {
  .site-header, .fab-group, .mobile-nav { display: none; }
}


/* ─── Ergänzungen für Banner & Vereinslogos ─── */
.content-banner-strip {
  background: var(--off-white);
  padding: 0; /* Padding entfernt für volle Breite */
  display: flex;
  justify-content: center;
  width: 100%;
}

.header-content-banner {
  width: 100%;
  max-width: 100%; /* Auf 100% gesetzt, damit es sich über die ganze Breite erstreckt */
  height: auto;
  border-radius: 0; /* Abrundung entfernt für nahtlosen Übergang */
  box-shadow: none;
  object-fit: cover;
  margin: 0;
}

.team-logo-container {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-club-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.team-logo-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--light-gray);
  color: var(--primary-mid);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ─── Hero-Bereich Hintergrund-Logik ─── */

/* Wenn ein Banner vorhanden ist (Feld): Banner über die ganze Breite, KEINE Overlays/Schraffuren */
.hero.hero-has-banner {
  background: url('../pictures/design/content/2026_final4_header_img_03.png') no-repeat center center;
  background-size: cover;
}
.hero.hero-has-banner .hero-bg,
.hero.hero-has-banner .hero-pattern {
  display: none !important; /* Deaktiviert die Farb-Verläufe und Standard-Schraffuren */
}

/* Wenn kein Banner vorhanden ist (Halle): Schraffierter Hintergrund bleibt wie gehabt */
.hero.hero-has-pattern {
  background-color: var(--primary);
}


/* ─── Hero Basis-Styles ─── */
.hero {
  position: relative; overflow: hidden;
  min-height: 580px;
  display: flex; align-items: center;
  transition: background 0.3s ease;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(221,55,48,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(58,53,128,.6) 0%, transparent 55%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-mid) 100%);
}

.hero-pattern {
  position: absolute; inset: 0; opacity: .04;
  background-image: repeating-linear-gradient(
    45deg,
    #fff 0px, #fff 1px,
    transparent 1px, transparent 40px
  );
}

.hero-content {
  position: relative; z-index: 2;
  padding: 80px 0;
  max-width: 680px;
}

.hero-event-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.hero-event-tag::before {
  content: ''; display: block; width: 6px; height: 6px;
  background: rgba(255,255,255,.7); border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 900; line-height: .95;
  color: var(--white); text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-title .accent { color: var(--accent); }

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem); /* Leicht herabgesetzt, damit der längere Text gut bricht */
  font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.9); text-transform: uppercase;
  margin-bottom: 28px;
  line-height: 1.3;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-bottom: 36px;
}
.hero-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.8);
}
.hero-meta-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }



/* Klasse für noch nicht aktive Buttons */
.btn-disabled {
  opacity: 0.5;                 /* Macht den Button halbtransparent (wirkt dadurch grauer) */
  filter: grayscale(60%);       /* Entzieht dem Button etwas Farbe */
  pointer-events: none;         /* Sperrt den Link komplett (er ist nicht mehr anklickbar) */
  user-select: none;            /* Verhindert, dass der Text markiert werden kann */
}



/* Live-Zustand für den Livestream-Link in der Top-Bar */
.topbar-live {
  color: #ffffff !important;         /* Text komplett in Weiss */
  font-weight: 700 !important;       /* Text fett hervorheben */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Der rote Aufnahme-Kreis (Live-Dot) */
.topbar-live .fa-circle {
  color: var(--accent, #dd3730);     /* Dein Website-Rot */
  font-size: 0.75rem;                /* Etwas kleiner als der Text */
  animation: live-blink 1.5s infinite ease-in-out; /* Weiches Blinken */
}

/* Blinkanimation für den roten Punkt */
@keyframes live-blink {
  0%   { opacity: 1; filter: drop-shadow(0 0 2px rgba(221,55,48,0.8)); }
  50%  { opacity: 0.3; filter: drop-shadow(0 0 0px rgba(221,55,48,0)); }
  100% { opacity: 1; filter: drop-shadow(0 0 2px rgba(221,55,48,0.8)); }
}


/* Für normale Text-Links im Live-Modus */
.link-live {
  font-weight: 700 !important;
  color: var(--accent, #dd3730) !important; /* Nutzt dein Rot */
}
.link-live .fa-circle {
  font-size: 0.7rem;
  margin-right: 4px;
  animation: live-blink 1.5s infinite ease-in-out;
}

/* Für Buttons, die im Live-Modus pulsieren sollen */
.btn-live-pulse {
  animation: btn-shadow-pulse 2s infinite ease-in-out;
  background-color: var(--accent, #dd3730) !important;
  border-color: var(--accent, #dd3730) !important;
  color: #fff !important;
}

@keyframes btn-shadow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(221, 55, 48, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(221, 55, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(221, 55, 48, 0); }
}