/* =========================
   Globale Schriftdefinition & Grundlayout
========================= */
body {
  font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;      /* Standardgröße ~16px */
  line-height: 1.6;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Handy (bis 480px Breite) */
@media (max-width: 480px) {
  body {
    font-size: 0.875rem;   /* ~14px */
  }
}

/* Tablet (481px bis 1024px Breite) */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    font-size: 1rem;       /* ~16px */
  }
}

/* PC Quer-Schirm (ab 1025px Breite) */
@media (min-width: 1025px) {
  body {
    font-size: 1.3rem;   /* 1.125rem ~18px */
  }
}

/* =========================
   Farbdefinition oranges e bei eArchiv
========================= */

.orange {
  color: orange;
  font-weight: bold; /* optional */
}


/* =========================
   Pflichtfeld-Kennzeichnung in zB. Kontaktformular
========================= */

.required {
  color: red;
  font-weight: bold;
}

/* =========================
   Farbendefinitionen  Beispiel --> background-color: var(--color-headertext);
========================= */
:root {
/* Standard: Grau */
/* Grundbildsschirm */
  --color-basis-background1: #dddddd;    /* Schirmhintergrund von dunklerem Grau bis .... */
  --color-basis-background2: white;    /* Schirmhintergrund ..... bis helleres Grau #f2f2f2 */
/* Home-Seite */
  --slider-background: #dddddd;          /* Hintergrund der inneren Box grau=#dddddd / grün=#d9ffd9 */
  --slider-borderline: #666666;          /* Umrandungs-Linie der inneren Box grau=#666666 / grün=#66b366 */
  --home-overlay: rgba(221,221,221,0.8); /* grau mit 80% Deckung */
  --home-overlay-borderline: #666666;
  --home-overlay-text: black;
/* erste äussere Box */
  --color-background1: #f2f2f2;          /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --color-borderline1: #999999;          /* helle Umrandungs-Linie der äußeren Box grau=#999999 / grün=#99cc99 */
/* zweite innere Box */
  --color-background2: #dddddd;          /* 6 x Hintergrund der inneren Box grau=#dddddd / grün=#d9ffd9 */
  --color-borderline2: #666666;          /* 4 Umrandungs-Linie der inneren Box grau=#666666 / grün=#66b366 */
  --color-blockline1: #f2f2f2;           /* 4 feine Linien zwischen Feld-Blöcken grau=#fsfsfs / grün=#f2fff2 */
/* Standart-Buttons */
  --button-background: #777777;          /* Button-Farben Dunkel */
  --button-text: white;                  /* Button-Text weiss=#ffffff / black=#000000 */
  --button-over: #aaaaaa;                /* Button Maus-over */
  --button-line: black;                  /* Button Umrandung */
/* Header Farb-Verlauf */
  --color-header-left: #444444;          /* Headerhintergrund von fast schwarz bis .... */
  --color-header-right: #bbbbbb;         /* Headerhintergrund ..... bis helleres Grau */
  --color-header-burgerleft-rgb: 68, 68, 68;    /* #444444 dunkelgrau */
  --color-header-burgerright-rgb: 187, 187, 187; /* #bbbbbb hellgrau */
  --burger-alpha: 0.8;                          /* 80% Deckkraft */
  --color-headertext: white;             /* Text weiss=#ffffff / black=#000000 */
/* Footer-Verlauf */
  --color-footer-left: #444444;          /* Headerhintergrund von fast Schwarz bis .... */
  --color-footer-right: #bbbbbb;         /* Headerhintergrund ..... bis helleres Grau */
  --color-footertext: white;             /* Text weiss=#ffffff / black=#000000 */
/* Foto-Farben */
  --fotos-nrbackground: white;           /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --fotos-nrtext: red;                   /* Text weiss=#ffffff / black=#000000 */
  --fotos-boxshadow1: 2px 2px 5px rgba(0,0,0,0.2);   /* schwarz mit 20% Deckung */
  --fotos-boxshadow2: 4px 4px 10px rgba(0,0,0,0.3);  /* schwarz mit 30% Deckung */
/* Overlay schliessen [X] */
  --color-cross-close: black;            /* Das Kreuzchen um Overlays zu schliessen */
  --color-cross-shadow: rgba(255,255,255,1.0);       /* Schimmer mit 100% Deckung, damit Kreuz auf dunklem Grund sichtbar ist */
/* Web-Links standart */
  --color-link: #0066cc;                 /* kräftiges Blau */
  --color-link-hover: #004499;           /* dunkleres Blau beim Hover */
  --color-link-active: #222222;          /* sehr dunkles Grau (fast Schwarz) beim Klick */
  --color-link-visited: #663399;         /* Violett für besuchte Links */
/* Suche/Finden-Text markieren */
  --color-found: yellow;                 /* kräftiges Blau */
/* Tabellen-Linien */
  --tableline-header: white;
  --tableline-middle: white; 
  --color-standart-text: black		/* Der text ist immer in schwarz */ 
}

:root.blue-theme {
/* Blau-Theme */
/* Grundbildschirm */
  --color-basis-background1: #cce0ff;    /* Schirmhintergrund von dunklerem Blau bis .... */
  --color-basis-background2: white;     /* Schirmhintergrund ..... bis helleres Blau */
/* Home-Seite */
  --slider-background: #cce0ff;          /* Hintergrund der inneren Box blau=#cce0ff */
  --slider-borderline: #336699;          /* Umrandungs-Linie der inneren Box blau=#336699 */
  --home-overlay: rgba(204,229,255,0.8); /* blau mit 80% Deckung */
  --home-overlay-borderline: #336699;
  --home-overlay-text: black;
/* erste äussere Box */
  --color-background1: #e6f2ff;          /* heller Hintergrund der äußeren Box */
  --color-borderline1: #99bbdd;          /* helle Umrandungs-Linie */
/* zweite innere Box */
  --color-background2: #cce0ff;          /* mittlerer Hintergrund der inneren Box */
  --color-borderline2: #336699;          /* dunklere Umrandungs-Linie */
  --color-blockline1: #e6f2ff;           /* feine Linien zwischen Feld-Blöcken */
/* Standard-Buttons */
  --button-background: #336699;          /* Button-Farben Dunkelblau */
  --button-text: white;                  /* Button-Text bleibt weiß */
  --button-over: #6699cc;                /* Button Maus-over helleres Blau */
  --button-line: black;                  /* Button-Umrandung bleibt schwarz */
/* Header Farb-Verlauf */
  --color-header-left: #003366;          /* Headerhintergrund von sehr dunklem Blau bis .... */
  --color-header-right: #99bbdd;         /* Headerhintergrund ..... bis helleres Blau */
  --color-header-burgerleft-rgb: 0, 51, 102;     /* #003366 sehr dunkles Blau */
  --color-header-burgerright-rgb: 153, 187, 221; /* #99bbdd helleres Blau */
  --burger-alpha: 0.8;                           /* 80% Deckkraft */
  --color-headertext: white;             /* Text bleibt weiß */
/* Footer-Verlauf */
  --color-footer-left: #003366;          /* Footerhintergrund von sehr dunklem Blau bis .... */
  --color-footer-right: #99bbdd;         /* Footerhintergrund ..... bis helleres Blau */
  --color-footertext: white;             /* Text bleibt weiß */
/* Foto-Farben */
  --fotos-nrbackground: white;           /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --fotos-nrtext: red;                   /* Text weiss=#ffffff / black=#000000 */
  --fotos-boxshadow1: 2px 2px 5px rgba(0,0,0,0.2);   /* schwarz mit 20% Deckung */
  --fotos-boxshadow2: 4px 4px 10px rgba(0,0,0,0.3);  /* schwarz mit 30% Deckung */
/* Overlay schliessen [X] */
  --color-cross-close: black;            /* Das Kreuzchen um Overlays zu schliessen */
  --color-cross-shadow: rgba(255,255,255,1.0);       /* Schimmer mit 100% Deckung, damit Kreuz auf dunklem Grund sichtbar ist */
/* Web-Links standart */
  --color-link: #0066cc;                 /* kräftiges Blau */
  --color-link-hover: #004499;           /* dunkleres Blau beim Hover */
  --color-link-active: #222222;          /* sehr dunkles Grau (fast Schwarz) beim Klick */
  --color-link-visited: #663399;         /* Violett für besuchte Links */
/* Suche/Finden-Text markieren */
  --color-found: yellow;                 /* kräftiges Blau */
/* Tabellen-Linien */
  --tableline-header: white;
  --tableline-middle: white;  
  --color-standart-text: black		/* Der text ist immer in schwarz */ 
}

/* Rot-Theme */
:root.red-theme {
  /* Grundbildschirm */
  --color-basis-background1: #ffcccc;    /* sehr dunkles Rot */
  --color-basis-background2: white;    /* sehr helles Rot/Rosa */
  /* Home-Seite */
  --slider-background: #ffcccc;          /* mittleres Rot/Pastell */
  --slider-borderline: #990000;          /* Umrandung dunkleres Rot */
  --home-overlay: rgba(255, 204, 204, 0.8); /* Rot mit 80% Deckung */
  --home-overlay-borderline: #990000;
  --home-overlay-text: black;
  /* erste äussere Box */
  --color-background1: #ffe6e6;          /* heller Hintergrund */
  --color-borderline1: #ff9999;          /* helle Umrandung */
  /* zweite innere Box */
  --color-background2: #ffcccc;          /* mittlerer Hintergrund */
  --color-borderline2: #990000;          /* dunklere Umrandung */
  --color-blockline1: #ffe6e6;           /* feine Linien */
  /* Standard-Buttons */
  --button-background: #990000;          /* Button-Farbe Dunkelrot */
  --button-text: white;                  /* Text weiß für Kontrast */
  --button-over: #cc3333;                /* Hover-Farbe helleres Rot */
  --button-line: black;                  /* Umrandung bleibt schwarz */
  /* Header Farb-Verlauf */
  --color-header-left: #660000;          /* sehr dunkles Rot links */
  --color-header-right: #ff9999;         /* helleres Rot rechts */
  --color-header-burgerleft-rgb: 102, 0, 0;      /* #660000 sehr dunkles Rot */
  --color-header-burgerright-rgb: 255, 153, 153; /* #ff9999 helleres Rot */
  --burger-alpha: 0.8;                           /* 80% Deckkraft */
  --color-headertext: white;             /* Text weiß */
  /* Footer-Verlauf */
  --color-footer-left: #660000;          /* sehr dunkles Rot links */
  --color-footer-right: #ff9999;         /* helleres Rot rechts */
  --color-footertext: white;             /* Text weiß */
/* Foto-Farben */
  --fotos-nrbackground: white;           /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --fotos-nrtext: red;                   /* Text weiss=#ffffff / black=#000000 */
  --fotos-boxshadow1: 2px 2px 5px rgba(0,0,0,0.2);   /* schwarz mit 20% Deckung */
  --fotos-boxshadow2: 4px 4px 10px rgba(0,0,0,0.3);  /* schwarz mit 30% Deckung */
/* Overlay schliessen [X] */
  --color-cross-close: black;            /* Das Kreuzchen um Overlays zu schliessen */
  --color-cross-shadow: rgba(255,255,255,1.0);       /* Schimmer mit 100% Deckung, damit Kreuz auf dunklem Grund sichtbar ist */
/* Web-Links standart */
  --color-link: #0066cc;                 /* kräftiges Blau */
  --color-link-hover: #004499;           /* dunkleres Blau beim Hover */
  --color-link-active: #222222;          /* sehr dunkles Grau (fast Schwarz) beim Klick */
  --color-link-visited: #663399;         /* Violett für besuchte Links */
/* Suche/Finden-Text markieren */
  --color-found: yellow;                 /* kräftiges Blau */
/* Tabellen-Linien */
  --tableline-header: white;
  --tableline-middle: white;  
  --color-standart-text: black		/* Der text ist immer in schwarz */ 
}

/* Gelb-Theme */
:root.yellow-theme {
  /* Grundbildschirm */
  --color-basis-background1: #fff2b3;    /* dunkleres Gelb/Braun-Gelb */
  --color-basis-background2: white;    /* sehr helles Gelb */
  /* Home-Seite */
  --slider-background: #fff2b3;          /* mittleres Gelb */
  --slider-borderline: #cc9900;          /* Umrandung dunkleres Gelb */
  --home-overlay: rgba(255, 242, 179, 0.8); /* Gelb mit 80% Deckung */
  --home-overlay-borderline: #cc9900;
  --home-overlay-text: black;
  /* erste äussere Box */
  --color-background1: #fff9cc;          /* heller Hintergrund */
  --color-borderline1: #e6c966;          /* helle Umrandung */
  /* zweite innere Box */
  --color-background2: #fff2b3;          /* mittlerer Hintergrund */
  --color-borderline2: #cc9900;          /* dunklere Umrandung */
  --color-blockline1: #fff9cc;           /* feine Linien */
  /* Standard-Buttons */
  --button-background: #cc9900;          /* Button-Farbe Dunkelgelb */
  --button-text: black;                  /* Text schwarz für Kontrast */
  --button-over: #e6c966;                /* Hover-Farbe helleres Gelb */
  --button-line: black;                  /* Umrandung bleibt schwarz */
  /* Header Farb-Verlauf */
  --color-header-left: #cc9900;          /* sehr dunkles Gelb links */
  --color-header-right: #e6c966;         /* helleres Gelb rechts */
  --color-header-burgerleft-rgb: 204, 153, 0;     /* #cc9900 sehr dunkles Gelb */
  --color-header-burgerright-rgb: 230, 201, 102;  /* #e6c966 helleres Gelb */
  --burger-alpha: 0.8;                            /* 80% Deckkraft */
  --color-headertext: black;             /* Text schwarz */
  /* Footer-Verlauf */
  --color-footer-left: #cc9900;          /* sehr dunkles Gelb links */
  --color-footer-right: #e6c966;         /* helleres Gelb rechts */
  --color-footertext: black;             /* Text schwarz */
/* Foto-Farben */
  --fotos-nrbackground: white;           /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --fotos-nrtext: red;                   /* Text weiss=#ffffff / black=#000000 */
  --fotos-boxshadow1: 2px 2px 5px rgba(0,0,0,0.2);   /* schwarz mit 20% Deckung */
  --fotos-boxshadow2: 4px 4px 10px rgba(0,0,0,0.3);  /* schwarz mit 30% Deckung */
/* Overlay schliessen [X] */
  --color-cross-close: black;            /* Das Kreuzchen um Overlays zu schliessen */
  --color-cross-shadow: rgba(255,255,255,1.0);       /* Schimmer mit 100% Deckung, damit Kreuz auf dunklem Grund sichtbar ist */
/* Web-Links standart */
  --color-link: #0066cc;                 /* kräftiges Blau */
  --color-link-hover: #004499;           /* dunkleres Blau beim Hover */
  --color-link-active: #222222;          /* sehr dunkles Grau (fast Schwarz) beim Klick */
  --color-link-visited: #663399;         /* Violett für besuchte Links */
/* Suche/Finden-Text markieren */
  --color-found: yellow;                 /* kräftiges Blau */
/* Tabellen-Linien */
  --tableline-header: white;
  --tableline-middle: white;  
  --color-standart-text: black		/* Der text ist immer in schwarz */ 
}

/* Grün-Theme */
:root.green-theme {
  /* Grundbildschirm */
  --color-basis-background1: #ccffcc;    /* sehr dunkles Grün */
  --color-basis-background2: white;    /* sehr helles Grün */
  /* Home-Seite */
  --slider-background: #ccffcc;          /* mittleres Grün/Pastell */
  --slider-borderline: #339933;          /* Umrandung dunkleres Grün */
  --home-overlay: rgba(204, 255, 204, 0.8); /* Grün mit 80% Deckung */
  --home-overlay-borderline: #339933;
  --home-overlay-text: black;
  /* erste äussere Box */
  --color-background1: #e6ffe6;          /* heller Hintergrund */
  --color-borderline1: #99cc99;          /* helle Umrandung */
  /* zweite innere Box */
  --color-background2: #ccffcc;          /* mittlerer Hintergrund */
  --color-borderline2: #339933;          /* dunklere Umrandung */
  --color-blockline1: #e6ffe6;           /* feine Linien */
  /* Standard-Buttons */
  --button-background: #339933;          /* Button-Farbe Dunkelgrün */
  --button-text: white;                  /* Text weiß für Kontrast */
  --button-over: #66cc66;                /* Hover-Farbe helleres Grün */
  --button-line: black;                  /* Umrandung bleibt schwarz */
  /* Header Farb-Verlauf */
  --color-header-left: #004d00;          /* sehr dunkles Grün links */
  --color-header-right: #99cc99;         /* helleres Grün rechts */
  --color-header-burgerleft-rgb: 0, 77, 0;       /* #004d00 */
  --color-header-burgerright-rgb: 153, 204, 153; /* #99cc99 */
  --burger-alpha: 0.8;                   /* 80% Deckkraft */
  --color-headertext: white;             /* Text weiß */
  /* Footer-Verlauf */
  --color-footer-left: #004d00;          /* sehr dunkles Grün links */
  --color-footer-right: #99cc99;         /* helleres Grün rechts */
  --color-footertext: white;             /* Text weiß */
/* Foto-Farben */
  --fotos-nrbackground: white;           /* 3 x heller Hintergrund der äußeren Box grau=#fsfsfs / grün=#f2fff2 */
  --fotos-nrtext: red;                   /* Text weiss=#ffffff / black=#000000 */
  --fotos-boxshadow1: 2px 2px 5px rgba(0,0,0,0.2);   /* schwarz mit 20% Deckung */
  --fotos-boxshadow2: 4px 4px 10px rgba(0,0,0,0.3);  /* schwarz mit 30% Deckung */
/* Overlay schliessen [X] */
  --color-cross-close: black;            /* Das Kreuzchen um Overlays zu schliessen */
  --color-cross-shadow: rgba(255,255,255,1.0);       /* Schimmer mit 100% Deckung, damit Kreuz auf dunklem Grund sichtbar ist */
/* Web-Links standart */
  --color-link: #0066cc;                 /* kräftiges Blau */
  --color-link-hover: #004499;           /* dunkleres Blau beim Hover */
  --color-link-active: #222222;          /* sehr dunkles Grau (fast Schwarz) beim Klick */
  --color-link-visited: #663399;         /* Violett für besuchte Links */
/* Suche/Finden-Text markieren */
  --color-found: yellow;                 /* kräftiges Blau */
/* Tabellen-Linien */
  --tableline-header: white;
  --tableline-middle: white;  
  --color-standart-text: black		/* Der text ist immer in schwarz */ 
}


/* ===========================
   Links (Standart überall)
   =========================== */
a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:active {
  color: var(--color-link-active);
}

a:visited {
  color: var(--color-link-visited);
}


/* ===========================
   Buttons (Standart überall)
   =========================== */
.central_button {
  margin: 1rem 0;
  display: flex;
  gap: 10px;
}

.central_button button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--button-line);
  border-radius: 6px;
  background-color: var(--button-background);
  color: var(--button-text);
  cursor: pointer;
  transition: background-color 0.3s;
}

.central_button button:hover {
  background-color: var(--button-over);   /* Hover-Farbe */
}

/* =========================
   1. Seitenhintergrund (von links stärker nach rechts heller)
   ========================= */
body {
  /* von links nach rechts: starke Farbe zu heller Farbe */
  background: linear-gradient(
    to right,
    var(--color-basis-background1),
    var(--color-basis-background2)
  );

/* Schriftfarbe und Browser-Reset */
color: var(--color-standart-text);  /* Standard-Schriftfarbe schwarz */
margin: 0;                          /* Browser-Default-Ränder entfernen */
padding: 0;                         /* Browser-Default-Abstände entfernen */}


/* =========================
   2. Erste, äussere leere Box 
   ========================= */
.content-box {
  margin: 20px auto;          /* auto = horizontal zentriert */
  padding: 1.5rem;            /* etwas mehr Innenabstand */
  background-color: var(--color-background1);
  border: 2px solid var(--color-borderline1);
  border-radius: 12px;        /* runde Ecken */
  width: 100%;                /* füllt den verfügbaren Platz */
  max-width: clamp(200px, 80%, 2400px); /* dynamisch zwischen Handy und 4K */
}

/* =========================
   Innere Content-Box (kräftigeres Grün) für modul & function & news & tech & team & contact & fotos & film
   =========================  */
.module-box {
  margin: 15px;
  padding: 1rem;
  background-color: var(--color-background2);
  border: 2px solid var(--color-borderline2);
  border-radius: 10px;
}

/* Links im Modul-Bereich */
.modules-wrapper a {
  color: var(--color-link);
  text-decoration: none;
}

.modules-wrapper a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.modules-wrapper a:active {
  color: var(--color-link-active);
}

.modules-wrapper a:visited {
  color: var(--color-link-visited);
}


/* =========================
   Innere Box (FAQ / Inhalte)
   ========================= */
.inner-box {
  width: 100%;                /* füllt den verfügbaren Platz */
  max-width: 100%;            /* nicht größer als Bildschirm */
  margin: 0 auto;             /* mittig */
  padding: 1rem;              /* Innenabstand */
  border-radius: 8px;         /* optional für Konsistenz */
}

.inner-box {
  width: 100%;                /* füllt den Platz */
  max-width: clamp(200px, 80%, 2400px); /* dynamisch zwischen Handy und 4K */
  margin: 20px auto;
  padding: 1rem;
  border-radius: 8px;
}


/* =========================
   4. Layout für Clubs- & Dokumente & Sponsoren- & Clubs & Over- Listing
========================= */

.clubs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: var(--color-borderline2);   /* Linie um die innere Box */
  border: 2px solid var(--color-borderline2);
  border-radius: 10px;         /* abgerundete Ecken */
  overflow: hidden;            /* damit die Rundung auch für die Zellen gilt */
}

.clubs-table td,
.clubs-table th {
  background-color: var(--color-background2);
  border-top: 1px solid var(--tableline-header);
  border-bottom: 1px solid var(--tableline-middle);
  padding: 10px;
  vertical-align: middle;
  text-align: left;
}

/* Kopfzeile: keine Linie oben */
.clubs-table thead td {
  border-top: none;
}

/* letzte Zeile: keine Linie unten */
.clubs-table tr:last-child td {
  border-bottom: none;
}

/* Logo-Spalte global */
.clubs-table td.logo {
  width: 100px;
  text-align: center;   /* Zelle mittig */
}

.clubs-table td.logo img {
  display: block;       /* Bild als Blockelement */
  margin: 0 auto;       /* automatisch horizontal mittig */
  max-width: 80px;      /* oder 100px, je nach gewünschter Größe */
  height: auto;
}

/* =========================
   Mobile / Breite <= 710px
   ========================= */
@media (max-width: 710px) {
  /* Kopfzeilen komplett ausblenden */
  .clubs-table thead {
    display: none;
  }

  /* Tabelle seriell darstellen */
  .clubs-table,
  .clubs-table tbody {
    display: block;
    width: 100%;
  }

  .clubs-table tr {
    display: block;
    margin: 0;              /* kompakter Abstand */
    padding: 0;
    border: none;
    background: none;
    border-bottom: 2px solid var(--color-blockline1);
  }

  .clubs-table tr:last-child {
    border-bottom: none;    /* letzte Linie entfernen */
  }

  .clubs-table td {
    display: block;         /* Zellen untereinander */
    width: 100%;
    padding: 6px 0;
    border: none;
    background-color: var(--color-background2);
    text-align: center;
  }

  /* eigene Hintergrundfarbe für Tabelle 2 */
  .clubs-table.table2 td {
    background-color: var(--color-background1);
  }

  .clubs-table td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    text-align: center;     /* Label mittig */
  }

  /* Logo mittig */
  .clubs-table td.logo {
    width: auto;            /* feste Breite aufheben */
    text-align: center;
  }
  .clubs-table td.logo img {
    display: block;
    margin: 0 auto;
    max-width: 100px;
    height: auto;
  }

  /* Link mittig */
  .clubs-table td.link {
    text-align: center;
  }

  /* Listen mittig */
  .clubs-table td ul {
    list-style-position: inside; /* Bullet nach innen holen */
    padding-left: 0;             /* Einzug entfernen */
    text-align: center;          /* Text + Bullet mittig */
    margin: 0 auto;
  }
  .clubs-table td li {
    text-align: center;
  }
}


/* =========================
   5. Layout für Over Zeilen-Listing
========================= */
.over-box {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: var(--color-background2);
  border: 2px solid var(--color-borderline2);
  border-radius: 10px;         /* abgerundete Ecken */
  overflow: hidden;            /* damit die Rundung auch für die Zellen gilt */
}

.over-box .row {
  display: grid;
  border-bottom: 2px solid var(--color-blockline1);
  padding: 15px;
  background-color: var(--color-background2);
}

.over-box .row:last-child {
  border-bottom: none;
}

/* Grid-Varianten */
.over-box .grid-67-33 {
  grid-template-columns: 67% 33%;
}

.over-box .grid-33-67 {
  grid-template-columns: 33% 67%;
}

/* Text */
.over-box .text {
  padding: 0 15px;
  vertical-align: top;
}

/* Logo */
.over-box .photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.over-box .photo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   6. FAQ Layout – Abstände & Struktur
   =========================== */

.faq-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

/* Kopfzeile mit Titel + Suche nebeneinander */
.faq-header {
  display: flex;
  justify-content: space-between; /* Titel links, Suche rechts */
  align-items: center;            /* gleiche Höhe */
  margin-bottom: 0.6rem;
}

/* Hauptüberschrift */
.faq-header h1 {
  margin: 0; /* kein zusätzlicher Abstand */
}

/* im Untertitel in der ersten Box sind die Texte näher beieinander */
.extra-intro {
  margin: 0;
  line-height: 1.3;
}

/* Untertitel */
.faq-page .subtitle {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}

/* Suchbox */
.faq-page .faq-search {
  margin: 0;              /* kein zusätzlicher Abstand */
  text-align: right;      /* Inhalt nach rechts */
}

.faq-page .faq-search input {
  display: inline-block;
}

/* FAQ-Zeilen */
.faq-page .row {
  display: flex;
  align-items: flex-start;
  margin-top: 0rem;        /* kleiner Abstand vor dem Block */
  margin-bottom: 0rem;     /* kleiner Abstand nach dem Block */
  padding: .5rem 0;       /* weniger Innenabstand */
  border-bottom: 1px solid var(--tableline-middle);
}

/* Logo-Spalte */
.faq-page .row .photo {
  flex: 0 0 8%;
  padding-right: 0.75rem;  /* engerer Abstand zum Text */
  text-align: center;      /* Logo mittig */
}

.faq-page .row .photo img {
  max-width: 50%;   /* halbe Breite */
  height: auto;
}

/* Text-Spalte */
.faq-page .row .text {
  flex: 1;
}

/* Textabsätze im FAQ – alle typischen Markdown-Elemente */
.faq-page .row .text p,
.faq-page .row .text ul,
.faq-page .row .text li,
.faq-page .row .text h2,
.faq-page .row .text h3 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem;   /* engerer Abstand unten */
  line-height: 1.4;        /* kompaktere Zeilenhöhe */
}

/* FAQ-Überschriften aus Markdown (##Titel = h2) */
.faq-page h2 {
  margin-top: 0 !important;         
  margin-bottom: 0.4rem !important; 
  line-height: 1.3;                 
}

/* Falls auch h3/h4 genutzt werden */
.faq-page h3,
.faq-page h4 {
  margin-top: 0 !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.3;
}

/* Unterschiedliche Hintergründe für gerade/ungerade Zeilen */
.faq-page .row.odd {
  background-color: var(--color-background1);
}

.faq-page .row.even {
  background-color: var(--color-background2);
}

/* Hervorhebung bei Suche */
.faq-page .highlight {
  background-color: var(--color-found);
  font-weight: bold;
}