/* ==========================
   CSS VARIABLEN (Design System)
========================== */
:root {
  /* Primäre Farben */
  --primary-green: #4F8C22;
  --light-green: #68B92E;
  --dark-bg: #222;
  --white: #fff;

  /* Hintergrundfarben */
  --bg-light: #f4f4f4;
  --bg-lighter: #f9f9f9;
  --bg-card: #ffffff;
  --bg-section: #f4f6f8;

  /* Glasmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);

  /* Textfarben */
  --text-primary: #333;
  --text-secondary: #555;
  --text-muted: #666;
  --text-light: #888;
  --text-lighter: #aaa;

  /* Border & Schatten */
  --border-color: #ddd;
  --border-light: #ccc;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.08);

  /* Farbverläufe */
  --gradient-primary: linear-gradient(135deg, #68B92E 0%, #4F8C22 100%);
  --gradient-subtle: linear-gradient(180deg, #f9f9f9 0%, #f4f4f4 100%);
  --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);

  /* Abstände */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 40px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index */
  --z-dropdown: 999;
  --z-header: 1000;
  --z-lightbox: 9999;
  --z-lightbox-overlay: 10000;

  /* Breakpoints – nur als Referenz, nicht in Media Queries verwendbar */
  /* mobile: 768px | tablet: 1024px */
}

/* ==========================
   Keyframe Animationen
========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes activeGlow {
  0% {
    box-shadow: 0 0 0 rgba(79, 140, 34, 0);
    border-color: #e5e5e5;
    background-color: var(--bg-card);
    transform: scale(1);
  }
  60% {
    box-shadow: 0 12px 28px rgba(79, 140, 34, 0.25);
    background-color: #fdfefc;
    transform: scale(1.025);
  }
  100% {
    box-shadow: 0 12px 28px rgba(79, 140, 34, 0.15);
    border-color: var(--primary-green);
    background-color: #fdfefc;
    transform: scale(1.02);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================
   Reset & Grundstile
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--bg-light);
  color: var(--text-primary);
  animation: fadeInUp 0.6s ease-out;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================
   Accessibility
========================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--light-green);
  outline-offset: 2px;
}

*:focus-visible {
  outline: 3px solid var(--light-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip to main content */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--primary-green);
  color: var(--white);
  text-decoration: none;
}

.skip-to-main:focus {
  left: 0;
}

/* Reduced Motion – einmaliger Block für alles */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in,
  .fade-in-delay,
  .slide-in,
  .scale-in,
  .hover-lift:hover,
  img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================
   Buttons – konsolidiert
   Alle Button-Varianten erben von .btn
========================== */
.btn,
.btn-primary,
.news-download,
.team-button,
.widget-btn,
.download-btn,
.bericht-download,
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gradient-primary);
  color: var(--white);
  font-weight: bold;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.btn::before,
.btn-primary::before,
.news-download::before,
.team-button::before,
.widget-btn::before,
.download-btn::before,
.bericht-download::before,
.read-more::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-shine);
  transition: left var(--transition-base);
}

.btn:hover::before,
.btn-primary:hover::before,
.news-download:hover::before,
.team-button:hover::before,
.widget-btn:hover::before,
.download-btn:hover::before,
.bericht-download:hover::before,
.read-more:hover::before {
  left: 100%;
}

.btn:hover,
.btn-primary:hover,
.news-download:hover,
.team-button:hover,
.widget-btn:hover,
.download-btn:hover,
.bericht-download:hover,
.read-more:hover,
.widget-btn.active {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.btn:active,
.btn-primary:active,
.news-download:active,
.team-button:active,
.widget-btn:active,
.download-btn:active,
.bericht-download:active,
.read-more:active {
  transform: translateY(-1px) scale(0.98);
}

.btn i,
.btn-primary i,
.news-download i,
.download-btn i {
  transition: transform var(--transition-fast);
}

.btn:hover i,
.btn-primary:hover i,
.news-download:hover i,
.download-btn:hover i {
  transform: scale(1.1);
}

/* ==========================
   Cards – konsolidierte Basis
========================== */
.card-base,
.news-item,
.team-member,
.club-card,
.download-card,
.archive-card:not(.active) {
  background: var(--bg-card);
  border: 1px solid rgba(79, 140, 34, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Archiv-Card kein Padding (wird durch Header + Content geregelt) */
.archive-card:not(.active) {
  padding: 0;
}

/* Grüner Balken oben beim Hover */
.card-base::before,
.news-item::before,
.team-member::before,
.club-card::before,
.download-card::before,
.archive-card:not(.active)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.card-base:hover,
.news-item:hover,
.club-card:hover,
.download-card:hover,
.archive-card:not(.active):hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2xl);
  border-color: rgba(79, 140, 34, 0.3);
}

.card-base:hover::before,
.news-item:hover::before,
.team-member:hover::before,
.club-card:hover::before,
.download-card:hover::before,
.archive-card:not(.active):hover::before {
  transform: scaleX(1);
}

/* Section Header */
.section-title {
  margin-bottom: var(--spacing-xl);
  color: var(--primary-green);
  text-align: center;
}

/* ==========================
   Header & Navigation
========================== */
header {
  background: var(--gradient-primary);
  position: relative;
  z-index: var(--z-header);
  box-shadow: var(--shadow-lg);
  padding-top: var(--spacing-md);
  padding-bottom: 0;
  text-align: center;
  backdrop-filter: blur(10px);
}

header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-shine);
  opacity: 0.1;
  pointer-events: none;
}

/* Logo */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: var(--spacing-lg) 0;
}

.logo img {
  max-height: 150px;
  width: auto;
  margin-bottom: var(--spacing-md);
  transition: all var(--transition-bounce);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.logo img:hover {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

/* Menü Toggle */
#menu-toggle {
  display: none;
  background: var(--primary-green);
  color: var(--white);
  border: none;
  padding: 12px 16px;
  font-size: 22px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-base), transform var(--transition-fast);
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--z-header);
}

#menu-toggle:hover {
  background-color: var(--light-green);
  transform: scale(1.05);
}

/* Hauptmenü */
.menu {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--spacing-xs);
  background-color: var(--light-green);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: 0 auto;
}

.menu > li {
  position: relative;
  white-space: nowrap;
}

.menu > li > a,
.menu > li > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--white);
  font-weight: bold;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
}

.menu > li > a:hover,
.menu > li > span:hover {
  background-color: var(--primary-green);
}

/* Pfeil nur bei Eltern-Items mit Untermenü */
.menu li > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.8rem;
  color: var(--white);
}

.menu li:not(:has(ul)) > a::after {
  content: "";
}

/* Dropdown */
.menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--primary-green);
  display: flex;
  flex-direction: column;
  list-style: none;
  min-width: 180px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all var(--transition-base);
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
  z-index: var(--z-dropdown);
  text-align: left;
}

.menu li:hover > ul {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
}

.menu li ul li a {
  padding: 6px var(--spacing-sm);
  display: block;
  color: var(--white);
  font-weight: normal;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.2;
}

.menu li ul li a:hover {
  background-color: var(--light-green);
}

/* ==========================
   Main Content
========================== */
main {
  padding: var(--spacing-lg);
}

.content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: space-between;
}

.content article {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  flex: 1 1 calc(50% - var(--spacing-lg));
  box-shadow: var(--shadow-sm);
}

.content article h2 {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-green);
}

/* ==========================
   Footer
========================== */
.site-footer {
  background-color: var(--primary-green);
  color: var(--white);
  padding: var(--spacing-lg) var(--spacing-sm);
  text-align: center;
}

.site-footer .footer-links a {
  color: var(--white);
  margin: 0 var(--spacing-sm);
  font-weight: bold;
  transition: color var(--transition-base);
}

.site-footer .footer-links a:hover,
.site-footer a[href^="mailto:"]:hover {
  color: var(--light-green);
}

.site-footer a[href^="mailto:"] {
  color: var(--white);
  text-decoration: underline;
}

/* ==========================
   Terminbereich
========================== */
#termine {
  width: 100%;
  max-width: 100%;
  color: var(--white);
  padding: var(--spacing-lg) var(--spacing-2xl);
  margin: var(--spacing-lg) 0;
  border-radius: 0;
  background: none;
}

#termine h2 {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-green);
  text-align: center;
}

#termin-liste {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  max-width: 1200px;
  justify-content: center;
}

#termin-liste li {
  flex: 1 1 calc(16.66% - var(--spacing-sm));
  min-width: 140px;
  background-color: var(--light-green);
  padding: 8px var(--spacing-sm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--white);
}

#termin-liste li:hover {
  background-color: var(--primary-green);
  transform: translateY(-2px);
}

#termin-liste li::first-line {
  font-weight: bold;
}

#termine-mehr-btn {
  display: block;
  margin: var(--spacing-sm) auto 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  padding: 6px 20px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--primary-green);
  background-color: var(--white);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

#termine-mehr-btn:hover {
  background-color: var(--light-green);
  color: var(--white);
  border-color: var(--light-green);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ==========================
   Newsbereich
========================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.news-item {
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.news-item h3 {
  color: var(--primary-green);
  font-size: 1.4rem;
  margin-bottom: var(--spacing-md);
}

.news-img {
  width: 100%;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.news-img img {
  width: 100%;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.news-img img:hover {
  transform: scale(1.05);
}

.news-content {
  max-height: 250px;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.news-content.expanded {
  max-height: 2000px;
}

.news-item p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.news-stempel {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--spacing-md);
}

.read-more {
  margin-top: var(--spacing-sm);
  align-self: start;
}

.news-buttons {
  margin: var(--spacing-md) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.news-download {
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ==========================
   News Gallery
========================== */
.news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.news-gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-gallery a:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.news-gallery img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ==========================
   Lightbox
========================== */
.lightboxOverlay {
  background: rgba(0,0,0,0.8) !important;
  z-index: var(--z-lightbox) !important;
}

.lightbox {
  z-index: var(--z-lightbox-overlay) !important;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

/* ==========================
   Team Section
========================== */
.team-section {
  padding: var(--spacing-2xl);
  background-color: var(--bg-lighter);
  text-align: center;
}

.team-section h2 {
  margin-bottom: var(--spacing-xl);
}

.team-container-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.team-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  justify-items: center;
}

.team-member {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 350px;
}

.team-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-full);
  margin: 0 auto var(--spacing-lg) auto;
}

.team-member h3 {
  font-size: 1.2rem;
  margin: var(--spacing-sm) 0;
}

.position {
  font-weight: bold;
  color: var(--text-primary);
}

.tasks {
  font-style: italic;
  color: var(--text-muted);
  margin: var(--spacing-sm) 0;
}

.contact {
  color: var(--primary-green);
  font-size: 0.9rem;
  margin-top: var(--spacing-sm);
}

.team-button {
  margin-top: 25px;
}

/* ==========================
   Widget Section
========================== */
.widget-section {
  padding: var(--spacing-2xl) var(--spacing-sm);
  background-color: var(--bg-lighter);
}

.widget-section h2 {
  text-align: center;
  font-size: 1.8rem;
  color: var(--dark-bg);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xl);
  letter-spacing: 1px;
  position: relative;
}

.widget-section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--light-green);
  margin: 10px auto 0;
  border-radius: 2px;
}

.widget-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (min-width: 900px) {
  .widget-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .widget-nav {
    flex: 0 0 280px;
    text-align: left;
    border-right: 2px solid var(--border-color);
    padding-right: var(--spacing-lg);
    margin-right: var(--spacing-lg);
    max-height: 140vh;
    overflow-y: auto;
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }

  .widget-display {
    flex: 1;
    max-width: 900px;
  }
}

.widget-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.widget-nav h3 {
  width: 100%;
  font-size: 1.1rem;
  margin: 25px 0 var(--spacing-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 2px solid var(--light-green);
  padding-bottom: var(--spacing-xs);
}

.widget-nav h4 {
  width: 100%;
  font-size: 1rem;
  margin: var(--spacing-md) 0 8px;
  color: var(--text-muted);
  font-weight: normal;
  font-style: italic;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 3px;
}

/* Widget-Button – eigene Variante (text-left, volle Breite, linker Balken) */
.widget-btn {
  position: relative;
  width: 100%;
  padding: 10px 14px 10px 18px;
  text-align: left;
}

/* Linker Aktivitäts-Balken */
.widget-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: transparent;
  border-radius: 3px 0 0 3px;
  transition: background-color var(--transition-base);
}

.widget-btn.active::before {
  background-color: var(--primary-green);
}

/* Scrollbar im Nav */
.widget-nav::-webkit-scrollbar {
  width: 6px;
}

.widget-nav::-webkit-scrollbar-thumb {
  background-color: var(--border-light);
  border-radius: 3px;
}

.widget-nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-lighter);
}

/* Widget Display */
.widget-display {
  width: 100%;
  max-width: 1200px;
}

.fussballde_widget {
  width: 100%;
  min-height: 500px;
  display: none;
}

.fussballde_widget.active {
  display: block;
}

/* ==========================
   Vereine Section
========================== */
.clubs-section {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: var(--bg-lighter);
  text-align: center;
}

.clubs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.club-card {
  text-align: center;
  width: 100%;
}

.club-logo {
  width: 120px;
  height: auto;
  margin-bottom: var(--spacing-md);
}

.club-card h3 {
  font-size: 1.2rem;
  margin: var(--spacing-sm) 0;
}

.club-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0;
}

.club-info {
  text-align: left;
  margin-top: var(--spacing-sm);
}

.club-info p {
  margin: 4px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.club-info .contact {
  color: var(--primary-green);
  font-size: 0.9rem;
  word-break: break-word;
}

/* ==========================
   Download Section
========================== */
.downloads-section {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: var(--bg-lighter);
  text-align: center;
}

.downloads-section h2 {
  margin-bottom: var(--spacing-xl);
  font-size: 1.8rem;
  margin-top: var(--spacing-xl);
}

.downloads-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.download-card {
  text-align: center;
}

.download-icon {
  font-size: 48px;
  color: var(--light-green);
  margin-bottom: var(--spacing-md);
  display: inline-block;
  transition: color var(--transition-base);
  text-decoration: none;
}

.download-icon:hover {
  color: var(--primary-green);
}

.download-card h3 {
  font-size: 1.2rem;
  margin: var(--spacing-sm) 0;
}

.download-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 var(--spacing-md) 0;
}

.download-btn i {
  margin-right: 6px;
}

.download-btn:hover {
  color: var(--white);
}

/* ==========================
   Archiv Section
========================== */
.archive-section {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: var(--bg-lighter);
  text-align: center;
}

.archive-section h2 {
  margin-bottom: var(--spacing-lg);
  color: var(--primary-green);
  text-align: center;
}

.archive-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.archive-card {
  background-color: var(--bg-card);
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  cursor: pointer;
  touch-action: pan-y;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    background-color 0.4s ease;
}

.archive-card.active {
  cursor: default;
}

.archive-card:not(.active) img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  object-fit: cover;
}

.archive-card.active img {
  width: 100%;
  max-height: 400px;
  display: block;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-md);
  object-fit: cover;
}

.archive-card:not(.active):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--primary-green);
}

.archive-card h3 {
  font-size: 1.15rem;
  margin: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  line-height: 1.4;
  color: var(--primary-green);
  text-align: center;
}

.archive-content {
  display: none;
  margin: 0 var(--spacing-lg) var(--spacing-md);
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
}

.archive-card.active .archive-content {
  display: block;
  font-size: 1rem;
  max-width: 850px;
  margin: 0 auto var(--spacing-md);
  padding-top: var(--spacing-md);
  animation: fadeIn 0.6s ease forwards;
  opacity: 0;
}

.archive-card.active .archive-content p {
  margin-bottom: var(--spacing-md);
}

.archive-content img {
  width: 100%;
  max-height: 400px;
  display: block;
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* News-Stempel auch in Archiv */
.archive-card .news-stempel {
  margin: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
  text-align: right;
}

/* Aktive Archiv-Card */
.archive-card.active {
  grid-column: 1 / -1;
  max-width: 60%;
  margin: 0 auto;
  padding: var(--spacing-2xl);
  border: 2px solid var(--primary-green);
  background-color: #fdfefc;
  animation: activeGlow 0.6s ease forwards;
}

/* ==========================
   Nach oben Button
   FIX: display:none + display:flex Konflikt aufgelöst
========================== */
#backToTop {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--z-header);
  width: 45px;
  height: 45px;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  display: none; /* per JS auf flex gesetzt wenn nötig */
  align-items: center;
  justify-content: center;
  background: rgba(79, 140, 34, 0.5);
  backdrop-filter: blur(6px) saturate(180%);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

/* Sichtbar-Klasse per JS hinzufügen */
#backToTop.visible {
  display: flex;
}

#backToTop:hover {
  transform: scale(1.1);
  background: rgba(79, 140, 34, 0.7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.arrow-up {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  transform: rotate(-135deg);
}

/* ==========================
   Datenschutz + Impressum
========================== */
.legal-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.legal-box {
  background-color: var(--bg-lighter);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--text-primary);
  line-height: 1.6;
}

.legal-box h2 {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-lg);
  text-align: center;
  color: var(--primary-green);
}

.legal-box h3 {
  font-size: 1.2rem;
  margin-top: 25px;
  margin-bottom: var(--spacing-sm);
  color: var(--light-green);
}

.legal-box p {
  margin-bottom: var(--spacing-md);
  font-size: 0.95rem;
}

.legal-box a {
  color: #0077cc;
  text-decoration: none;
  transition: color var(--transition-base);
}

.legal-box a:hover {
  color: #005fa3;
  text-decoration: underline;
}

/* ==========================
   Bericht-Seiten
========================== */
.bericht-section {
  padding: var(--spacing-2xl) var(--spacing-lg);
  background-color: var(--bg-section);
}

.bericht-container {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.bericht-title {
  font-size: 2rem;
  color: var(--primary-green);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.bericht-subtitle {
  font-size: 1.4rem;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.bericht-subsubtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.bericht-content p {
  margin-bottom: var(--spacing-md);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: justify;
}

.bericht-buttons {
  margin: var(--spacing-lg) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.bericht-subsection {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--light-green);
  border-radius: var(--radius-md);
}

.bericht-subsection:nth-child(odd)  { background: #f0f9f0; }
.bericht-subsection:nth-child(even) { background: var(--bg-lighter); }

.bericht-subsection h4 {
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: var(--primary-green);
}

.bericht-subsection p {
  margin: var(--spacing-xs) 0;
}

.bericht-subsection a i {
  color: var(--light-green);
  margin-left: 6px;
  transition: color var(--transition-base), transform var(--transition-fast);
}

.bericht-subsection a:hover i {
  color: var(--primary-green);
  transform: translateY(-2px);
}

/* Tabellen – gemeinsame Basis */
.bericht-table,
.bericht-table--results {
  margin-top: var(--spacing-md);
  overflow-x: auto;
}

.bericht-table table,
.bericht-table--results table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.bericht-table th,
.bericht-table--results th {
  background-color: var(--light-green);
  color: var(--white);
  padding: 8px;
  text-align: left;
}

.bericht-table td,
.bericht-table--results td {
  border: 1px solid var(--border-color);
  padding: 6px var(--spacing-sm);
}

.bericht-table tr:nth-child(even),
.bericht-table--results tr:nth-child(even) {
  background-color: var(--bg-lighter);
}

.bericht-table tr:hover,
.bericht-table--results tr:hover {
  background-color: #eef7e9;
}

.bericht-table td i.fas,
.bericht-table--results td i.fas {
  margin-right: var(--spacing-xs);
  color: var(--primary-green);
}

/* Tooltip via data-Attribut */
.bericht-table td[title],
.bericht-table--results td[title] {
  position: relative;
  cursor: help;
}

.bericht-table td[title]:hover::after,
.bericht-table--results td[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -28px;
  left: 0;
  background: var(--light-green);
  color: var(--white);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

/* Listen */
.bericht-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.bericht-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-light);
}

.bericht-list li:last-child {
  border-bottom: none;
}

/* Bilder & Bildunterschriften */
.img-caption,
.image-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.4;
}

.bericht-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================
   HKM Section
========================== */
.hkm-section {
  display: flex;
  gap: var(--spacing-2xl);
  padding: var(--spacing-2xl) var(--spacing-lg);
  background: var(--bg-section);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin: var(--spacing-2xl) 0;
  animation: fadeInUp var(--transition-slow);
}

.hkm-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 240px;
  padding-right: var(--spacing-lg);
  border-right: 2px solid var(--border-color);
}

.hkm-nav .widget-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
}

.hkm-nav .widget-btn a {
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
}

.hkm-content {
  flex: 1;
}

.hkm-content h2 {
  color: var(--primary-green);
  margin-bottom: var(--spacing-xl);
  font-size: 1.8rem;
  font-weight: 800;
}

.hkm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-xl);
}

.hkm-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  border: 1px solid rgba(79,140,34,0.1);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.hkm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.hkm-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(79,140,34,0.3);
}

.hkm-card:hover::before {
  transform: scaleX(1);
}

.hkm-card h3 {
  color: var(--primary-green);
  font-size: 1.3rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.hkm-card .meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}

.hkm-card ul {
  padding-left: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.hkm-card ul li {
  margin-bottom: 6px;
}

/* ==========================
   Performance & Skeleton
========================== */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text  { height: 1em;    margin-bottom: 0.5em; }
.skeleton-title { height: 2em;    width: 60%; margin-bottom: 1em; }
.skeleton-card  { height: 300px;  border-radius: var(--radius-xl); }

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(79, 140, 34, 0.1);
  border-top-color: var(--primary-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ==========================
   Utility Classes
========================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: all var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.fade-in        { animation: fadeInUp 0.6s ease-out; }
.fade-in-delay  { animation: fadeInUp 0.6s ease-out 0.2s both; }
.slide-in       { animation: slideInRight 0.6s ease-out; }
.scale-in       { animation: scaleIn 0.4s ease-out; }

/* ==========================
   RESPONSIVE STYLES
========================== */

/* Tablets */
@media (max-width: 1024px) {
  .menu > li > a,
  .menu > li > span {
    padding: 8px var(--spacing-sm);
  }

  #termin-liste li {
    flex: 1 1 calc(33.33% - var(--spacing-sm));
    font-size: 0.9rem;
  }

  .news-grid,
  .team-container,
  .clubs-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .legal-box {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .legal-box h2 { font-size: 1.5rem; }
  .legal-box h3 { font-size: 1.1rem; }
}

/* HKM Tablet */
@media (max-width: 900px) {
  .hkm-section {
    flex-direction: column;
  }

  .hkm-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-lg);
    gap: var(--spacing-sm);
  }

  .hkm-nav .widget-btn {
    flex: 1 1 30%;
    min-width: 160px;
  }

  .hkm-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Mobile */
@media (max-width: 768px) {
  header {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .logo {
    justify-content: flex-start;
    text-align: left;
    padding-left: var(--spacing-md);
    margin: 0;
  }

  .logo img {
    max-height: 70px;
    margin: var(--spacing-sm) 0 0;
    /* float entfernt – funktioniert nicht mit display:flex */
  }

  #menu-toggle {
    display: block;
  }

  .menu {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), opacity var(--transition-slow);
    margin-top: var(--spacing-xs);
    border-radius: var(--radius-md);
    background-color: var(--light-green);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .menu.active {
    max-height: 2000px;
    opacity: 1;
  }

  .menu li ul {
    position: static;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    transform: translateY(0);
  }

  .menu li.open > ul {
    max-height: 1000px;
    opacity: 1;
  }

  .menu li.open > a::after {
    transform: rotate(180deg);
    transition: transform var(--transition-base);
  }

  .menu li > a,
  .menu li > span {
    transition: background var(--transition-base), color var(--transition-base);
  }

  .menu li:hover > a,
  .menu li:hover > span {
    background-color: var(--primary-green);
    color: var(--white);
  }

  .content article {
    flex: 1 1 100%;
  }

  .kfvh-footer-container {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .kfvh-footer-section {
    text-align: center;
  }

  #termin-liste li {
    flex: 1 1 calc(50% - var(--spacing-sm));
    font-size: 0.85rem;
  }

  .news-grid,
  .team-container,
  .clubs-container {
    grid-template-columns: 1fr;
  }

  .archive-section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .archive-card.active {
    max-width: 100%;
    padding: var(--spacing-xl);
  }

  .archive-card h3,
  .archive-content,
  .archive-card .news-stempel {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }

  .archive-content img {
    max-height: none;
    margin: var(--spacing-md) 0;
    border-radius: var(--radius-md);
  }

  .bericht-section,
  .bericht-container {
    padding: var(--spacing-xs);
  }

  .bericht-subsection {
    padding: var(--spacing-sm);
  }

  .bericht-subsection h4 { font-size: 1rem; }
  .bericht-title          { font-size: 1.5rem; }
  .bericht-subtitle       { font-size: 1.2rem; }

  /* Tabellen mobil als Cards (gemeinsame Basis) */
  .bericht-table table,
  .bericht-table thead,
  .bericht-table tbody,
  .bericht-table th,
  .bericht-table td,
  .bericht-table tr,
  .bericht-table--results table,
  .bericht-table--results thead,
  .bericht-table--results tbody,
  .bericht-table--results th,
  .bericht-table--results td,
  .bericht-table--results tr {
    display: block;
    width: 100%;
  }

  .bericht-table thead,
  .bericht-table--results thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  .bericht-table tr,
  .bericht-table--results tr {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  .bericht-table td,
  .bericht-table--results td {
    border: none;
    padding: 6px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
  }

  .bericht-table td::before,
  .bericht-table--results td::before {
    content: attr(data-label);
    min-width: 90px;
    font-weight: 700;
    color: var(--text-muted);
  }

  /* Platz hervorheben */
  .bericht-table td[data-label="Platz"] {
    font-size: 1.1rem;
    font-weight: 800;
  }

  /* Tore-Spalte (nur Ergebnis-Tabelle) */
  .bericht-table--results td[data-label="Tore"] {
    justify-content: flex-end;
  }

  .bericht-table th,
  .bericht-table td,
  .bericht-table--results th,
  .bericht-table--results td {
    padding: var(--spacing-xs) 8px;
  }

  .hkm-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .hkm-nav .widget-btn a {
    text-align: center;
  }

  .hkm-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .logo img {
    max-height: 150px;
    margin-bottom: var(--spacing-lg);
  }

  .news-grid,
  .team-container,
  .clubs-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sehr kleine Geräte */
@media (max-width: 580px) {
  #termin-liste li {
    flex: 1 1 100%;
    font-size: 0.8rem;
  }
}

/* ==========================
   Turnier-Cards (Feldrunde)
========================== */
.turnier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.turnier-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.turnier-header {
  background: var(--gradient-primary);
  color: var(--white);
  padding: var(--spacing-sm) var(--spacing-md);
}

.turnier-label {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 4px;
}

.turnier-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.4;
}

.turnier-teams {
  list-style: decimal;
  flex: 1;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.2rem;
}

.turnier-teams li {
  padding: 5px 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--border-color);
  color: var(--text-primary);
}

.turnier-teams li:last-child {
  border-bottom: none;
}

.turnier-pending {
  flex: 1;
  padding: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.turnier-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background: var(--bg-lighter);
}

.turnier-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 8px 14px;
  background: var(--gradient-primary);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.turnier-download:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.turnier-download:active {
  transform: translateY(0) scale(0.98);
}

.turnier-download svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.turnier-download:hover svg {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .turnier-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   Bericht – Hilfsklassen
========================== */

/* Ersetzt style="margin-top: 12px;" vor Listen */
.bericht-subsection-label {
  margin-top: var(--spacing-md);
  font-weight: bold;
}

/* Ersetzt style="color:#666;" für Metainfos inline */
.bericht-meta {
  color: var(--text-muted);
}

/* ==========================
   Paarungstabelle (Heim : Gast)
========================== */

/* Desktop: Trenner-Spalte zentriert und schmal */
.paarung-trenner {
  text-align: center;
  width: 20px;
  color: var(--text-muted);
  padding-left: 4px;
  padding-right: 4px;
}

/* Mobil: Tabelle wird per JS in Spiel-Cards umgewandelt.
   Die original Tabelle wird dabei versteckt. */
@media (max-width: 768px) {
  .bericht-table--paarung table {
    display: none;
  }

  .bericht-table--paarung .paarung-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* Paarung-Cards nur auf Desktop ausblenden */
@media (min-width: 769px) {
  .bericht-table--paarung .paarung-cards {
    display: none;
  }
}

/* ==========================
   Spiel-Cards (Kreispokal / Pokalrunden)
========================== */
.spiel-liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.spiel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.spiel-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 140, 34, 0.3);
}

.spiel-nr {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-bottom: var(--spacing-xs);
}

.spiel-paarung {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.spiel-team {
  flex: 1 1 120px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--text-primary);
}

.spiel-team:last-child {
  text-align: right;
}

.spiel-vs {
  font-size: 1rem;
  font-weight: bold;
  color: var(--primary-green);
  flex-shrink: 0;
}

.spiel-hinweis {
  margin-top: var(--spacing-xs);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================
   Spielbetrieb-Grid (zwei Subsections nebeneinander)
========================== */
.spielbetrieb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.spielbetrieb-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
  .spielbetrieb-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   Termin-Cards (Schulungen, Lehrabende)
========================== */
.termin-liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.termin-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.termin-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 140, 34, 0.3);
}

/* Abgesagt: gedämpft mit rotem Akzent */
.termin-card--abgesagt {
  opacity: 0.6;
  border-color: rgba(200, 50, 50, 0.25);
  background: #fff8f8;
}

/* Verschoben: oranger Akzent */
.termin-card--verschoben {
  border-color: rgba(180, 117, 23, 0.3);
  background: #fffbf4;
}

/* Datumsblock links */
.termin-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  background: var(--gradient-primary);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 6px var(--spacing-xs);
  flex-shrink: 0;
  text-align: center;
}

.termin-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.termin-datum-zahl {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.2;
}

/* Infoblock rechts */
.termin-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.termin-zeit {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-primary);
}

.termin-ort {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.termin-person {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.termin-hinweis {
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--primary-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status-Badges */
.termin-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.termin-status--abgesagt {
  background: #fde8e8;
  color: #a32d2d;
}

.termin-status--verschoben {
  background: #faeeda;
  color: #854F0B;
}

/* ==========================
   Ergebnis-Cards (Spielberichte)
========================== */
.ergebnis-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--spacing-md);
}

.ergebnis-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px var(--spacing-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.ergebnis-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 140, 34, 0.25);
}

.ergebnis-card--unentschieden {
  background: #f9f9f9;
  border-color: rgba(136, 135, 128, 0.3);
}

.ergebnis-nr {
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--text-lighter);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ergebnis-paarung {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  flex-wrap: wrap;
}

.ergebnis-team {
  flex: 1 1 120px;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.ergebnis-team--gast {
  text-align: right;
}

.ergebnis-score {
  font-size: 1rem;
  font-weight: bold;
  color: var(--primary-green);
  white-space: nowrap;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
  background: var(--bg-lighter);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.ergebnis-card--unentschieden .ergebnis-score {
  color: var(--text-muted);
}

/* Podestplätze in der Abschlusstabelle hervorheben */
.tabelle-platz-1 td { font-weight: bold; background: #fffbe6; }
.tabelle-platz-2 td { background: #f5f5f5; }
.tabelle-platz-3 td { background: #fff4ec; }

/* ==========================
   Ausschreibung – Inhaltsverzeichnis & Hilfsklassen
========================== */

/* Inhaltsverzeichnis */
.ausschreibung-nav {
  background: var(--bg-lighter);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.ausschreibung-nav-title {
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.ausschreibung-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--spacing-lg);
}

.ausschreibung-nav-list li {
  padding: 3px 0;
  break-inside: avoid;
}

.ausschreibung-nav-list a {
  font-size: 0.88rem;
  color: var(--primary-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ausschreibung-nav-list a:hover {
  color: var(--light-green);
  text-decoration: underline;
}

/* Zurück-Link */
.ausschreibung-back {
  margin-top: var(--spacing-md);
  font-size: 0.8rem;
}

.ausschreibung-back a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ausschreibung-back a:hover {
  color: var(--primary-green);
}

/* Kontonummer-Box */
.ausschreibung-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-green);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-sm) 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

.ausschreibung-info-box code {
  font-family: monospace;
  background: var(--bg-lighter);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.95em;
}

/* Tabellen in der Ausschreibung */
.ausschreibung-table-wrap {
  overflow-x: auto;
  margin-top: var(--spacing-sm);
}

.ausschreibung-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ausschreibung-table th {
  background: var(--light-green);
  color: var(--white);
  padding: 7px var(--spacing-sm);
  text-align: left;
  font-weight: bold;
}

.ausschreibung-table td {
  border: 1px solid var(--border-color);
  padding: 6px var(--spacing-sm);
}

.ausschreibung-table tr:nth-child(even) td {
  background: var(--bg-lighter);
}

/* Fairplay-Cards */
.ausschreibung-fairplay-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.ausschreibung-fairplay-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
}

.ausschreibung-fairplay-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  background: var(--gradient-primary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-weight: bold;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.ausschreibung-fairplay-card strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.ausschreibung-fairplay-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Responsive: Nav einspaltig auf Mobilgeräten */
@media (max-width: 768px) {
  .ausschreibung-nav-list {
    columns: 1;
  }
}

/* ==========================
   Rahmenterminplan Herren
========================== */

/* Legende */
.rtp-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}

.rtp-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.rtp-badge--meister    { background: #EAF3DE; color: #3B6D11; }
.rtp-badge--pokal      { background: #E6F1FB; color: #0C447C; }
.rtp-badge--halle      { background: #FAEEDA; color: #633806; }
.rtp-badge--nachholSonder { background: #F1EFE8; color: #444441; }
.rtp-badge--frei       { background: #FCEBEB; color: #791F1F; }

/* Filter-Buttons */
.rtp-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.rtp-filter-label {
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--text-muted);
  white-space: nowrap;
}

.rtp-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rtp-filter-btn {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rtp-filter-btn:hover {
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.rtp-filter-btn.active {
  background: var(--gradient-primary);
  color: var(--white);
  border-color: transparent;
}

/* Tabelle */
.rtp-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.rtp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.rtp-table thead th {
  background: var(--gradient-primary);
  color: var(--white);
  padding: 8px 10px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}

.rtp-table thead th.rtp-col-datum,
.rtp-table thead th.rtp-col-hinweis {
  text-align: left;
}

.rtp-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.rtp-table tbody tr:hover {
  background: rgba(79, 140, 34, 0.04);
}

/* Zeilen-Typen */
.rtp-row--pause   { background: #fff5f5; }
.rtp-row--halle   { background: #fffdf5; }
.rtp-row--pokal   { background: #f0f6ff; }
.rtp-row--sonder  { background: #f5f5f5; }

/* Datums- und Zeitspalte */
.rtp-col-datum {
  padding: 7px 10px;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 110px;
}

.rtp-col-zeit {
  padding: 7px 8px;
  text-align: center;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 52px;
}

/* Spielklassen-Zellen */
.rtp-col {
  padding: 6px 8px;
  text-align: center;
  min-width: 44px;
  font-weight: bold;
  transition: opacity var(--transition-fast);
}

.rtp-col--hidden {
  display: none;
}

/* Zell-Typen */
.rtp-cell--meister { color: #3B6D11; }
.rtp-cell--pokal   { color: #0C447C; }
.rtp-cell--halle   { color: #633806; }
.rtp-cell--nach    { color: var(--text-muted); }
.rtp-cell--leer    { color: transparent; }

/* Hinweis-Spalte */
.rtp-col-hinweis {
  padding: 7px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  min-width: 160px;
}

@media (max-width: 768px) {
  .rtp-col-zeit,
  .rtp-col-hinweis {
    display: none;
  }

  .rtp-table {
    font-size: 0.78rem;
  }
}

/* Datumsfilter-Ergänzungen */
.rtp-filter-btn--today {
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.rtp-filter-btn--today.active {
  background: var(--gradient-primary);
  color: var(--white);
  border-color: transparent;
}

.rtp-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  min-height: 1.2em;
}

.rtp-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* ==========================
   Spiel-Cards – Erweiterungen
   (Ergebnisse, Sieger, offene Runden, Finale)
========================== */

/* Gespielte Cards leicht gedimmt */
.spiel-card--gespielt {
  background: var(--bg-lighter);
}

/* Offene Runden (Sieger noch unbekannt) */
.spiel-card--offen {
  border-style: dashed;
  background: var(--bg-card);
}

/* Finale – grüner Akzent */
.spiel-card--finale {
  border: 2px solid var(--primary-green);
  background: #f5fbf0;
}

/* Ergebnis-Badge beim gespielten Spiel */
.spiel-card--gespielt .spiel-vs {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  white-space: nowrap;
}

/* Sieger hervorheben */
.spiel-team--sieger {
  font-weight: bold;
  color: var(--primary-green);
}

/* Gast rechtsbündig */
.spiel-team--gast {
  text-align: right;
}

/* Platzhalter (Sieger noch offen) */
.spiel-team--platzhalter {
  color: var(--text-muted);
  font-style: italic;
  font-weight: normal;
}

 /* Ergänzende Styles für die statischen Pokal-Tabellen.
     Nutzt bewusst neutrale Klassennamen (cup-*), damit es nicht mit
     bestehenden Styles kollidiert. Farben/Fonts ggf. an CI anpassen. */
  .cup-subnav {
    display: flex;
    gap: 8px;
    margin: 0 0 16px 0;
    flex-wrap: wrap;
  }
  .cup-subnav-btn {
    padding: 6px 16px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cup-subnav-btn:hover {
    background: #e0e0e0;
  }
  .cup-subnav-btn.active {
    background: #1a5c1a; /* ggf. an Vereinsfarbe anpassen */
    color: #fff;
    border-color: #1a5c1a;
  }
  .cup-round {
    display: none;
  }
  .cup-round.active {
    display: block;
  }
  .cup-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 12px;
  }
  @media (max-width: 640px) {
    .cup-meta {
      font-size: 0.82rem;
      line-height: 1.5;
    }
  }
  .cup-table-wrap {
    overflow-x: auto;
  }
  table.cup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    margin-bottom: 8px;
  }
  table.cup-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
  }
  table.cup-table th,
  table.cup-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
  }
  table.cup-table th {
    background: #f0f0f0;
    font-weight: 600;
    white-space: nowrap;
  }
  table.cup-table td.cup-nr {
    width: 32px;
    color: #888;
  }
  table.cup-table td.cup-datum,
  table.cup-table td.cup-uhr {
    white-space: nowrap;
    color: #666;
    width: 90px;
  }
  table.cup-table td.cup-sieger {
    font-style: italic;
    color: #777;
  }
  table.cup-table tr:hover td {
    background: #fafafa;
  }
 
  /* ===================== MOBILE: KARTEN-ANSICHT ===================== */
  /* Ab 640px Breite wird aus der Tabelle eine Liste von "Spielkarten" -
     kein horizontales Scrollen/Quetschen mehr, größere Schrift, klarer
     Heim-vs-Gast-Aufbau. */
  @media (max-width: 640px) {
 
    /* Sub-Navigation (1./2. Hauptrunde) als volle Buttons, größere Tapziele */
    .cup-subnav {
      gap: 6px;
    }
    .cup-subnav-btn {
      flex: 1 1 auto;
      text-align: center;
      padding: 10px 14px;
      font-size: 0.95rem;
    }
 
    .cup-table-wrap {
      overflow-x: visible;
    }
 
    table.cup-table caption {
      font-size: 1.05rem;
      margin-bottom: 10px;
    }
 
    table.cup-table thead {
      display: none; /* Spaltenüberschriften auf Karten nicht nötig */
    }
 
    table.cup-table,
    table.cup-table tbody,
    table.cup-table tr,
    table.cup-table td {
      display: block;
      width: 100%;
    }
 
    table.cup-table tr {
      position: relative;
      background: #fff;
      border: 1px solid #e2e2e2;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    table.cup-table tr:hover td {
      background: transparent; /* Hover-Effekt der Desktop-Tabelle deaktivieren */
    }
 
    table.cup-table td {
      border: none;
      padding: 0;
    }
 
    /* Spielnummer als kleines Badge oben rechts */
    table.cup-table td.cup-nr {
      position: absolute;
      top: 14px;
      right: 16px;
      width: auto;
      font-size: 0.75rem;
      color: #aaa;
      font-weight: 600;
    }
    table.cup-table td.cup-nr::before {
      content: "Spiel ";
      font-weight: 400;
    }
 
    /* Datum/Uhrzeit nebeneinander in einer schmalen Zeile, nur falls befüllt */
    table.cup-table td.cup-datum,
    table.cup-table td.cup-uhr {
      display: inline;
      width: auto;
      font-size: 0.8rem;
      color: #888;
    }
    table.cup-table td.cup-datum:empty,
    table.cup-table td.cup-uhr:empty {
      display: none;
    }
 
    /* Doppelpunkt-Spalte (Trenner) ausblenden - wird durch Trennlinie ersetzt */
    table.cup-table td:nth-child(5) {
      display: none;
    }
 
    /* Heim */
    table.cup-table td:nth-child(4) {
      font-weight: 600;
      font-size: 1.02rem;
      padding: 10px 0 10px 0;
      padding-right: 60px; /* Platz für Spielnummer-Badge */
    }
    table.cup-table td:nth-child(4)::after {
      content: "";
      display: block;
      height: 1px;
      background: #eee;
      margin-top: 10px;
    }
 
    /* Gast */
    table.cup-table td:nth-child(6) {
      font-weight: 600;
      font-size: 1.02rem;
      padding: 10px 0;
    }
 
    table.cup-table td.cup-sieger {
      font-weight: 400;
      font-size: 0.92rem;
    }
 
    /* Bemerkung, nur anzeigen wenn befüllt */
    table.cup-table td:nth-child(7) {
      font-size: 0.85rem;
      color: #666;
      padding-top: 6px;
    }
    table.cup-table td:nth-child(7):empty {
      display: none;
    }
  }

    /* Staffel-Listen: gleiche Formsprache wie die Pokal-Kartenansicht,
     damit es sich stimmig ins Layout einfügt. */
  .staffel-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 14px;
  }
  .staffel-list {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
  }
  .staffel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
  }
  .staffel-item:hover {
    background: #fafafa;
  }
  .staffel-nr {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #888;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .staffel-name {
    font-weight: 500;
    font-size: 0.96rem;
    line-height: 1.3;
  }
  .staffel-count {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 10px;
  }
  .staffel-note {
    font-size: 0.85rem;
    color: #8a6d00;
    background: #fff8e1;
    border: 1px solid #f0e0a0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }
 
  /* ===================== DESKTOP-VERFEINERUNG ===================== */
  /* Ab 641px: feste Spaltenzahl statt frei "auf-fit" (verhindert überbreite,
     leer wirkende Karten), etwas mehr Luft, dezenter Hover-Effekt. */
  @media (min-width: 641px) {
    .staffel-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .staffel-item {
      padding: 12px 16px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .staffel-item:hover {
      border-color: #cfcfcf;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      background: #fff;
    }
    .staffel-meta,
    .staffel-note {
      max-width: 780px;
    }
  }
 
  /* Ab 1000px: vierspaltig, da mehr Platz zur Verfügung steht */
  @media (min-width: 1000px) {
    .staffel-list {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Staffel-Bilder im News-Beitrag: ganzes Bild zeigen statt zuschneiden.
     Überschreibt die generelle .archive-content img Regel (max-height + cover),
     die sonst Wappen/Logos am oberen/unteren Rand abschneiden würde. */
  .archive-content img.staffel-bild {
    max-height: 400px;
    object-fit: contain;
    background: #f5f5f5;
  }