/* ============================
   Layout / Columns
   ============================ */

/* Breitere Breakpoints + flexibles Layout */
.columns {
  /* Original: flex-basis: 1100px; */
  flex-basis: 100%; /* besser für kleinere Screens, Container bleibt flexibel */
}

/* Container-Breite über Media Queries steuern */
.cd-row {
  /* Original: max-width: 1100px; margin: 0 auto; */
  max-width: 1200px; /* etwas breiter für große Desktops */
  margin: 0 auto;
}

/* Neue Media Queries für Tablet / Desktop
   - sorgen für saubere Stufen: Mobil / Tablet / Desktop */
@media (max-width: 992px) {
  .columns {
    /* Original: flex-direction: row; */
    flex-direction: column; /* Inhalt und Sidebar untereinander auf Tablets */
  }

  .sidebar-wrapper {
    /* Original: flex-basis: 240px; flex-shrink: 0; */
    flex-basis: auto; /* Sidebar höhenbasiert an Inhalt anpassen */
    flex-shrink: 1;   /* Schrumpfen zulassen, damit nichts überläuft */
  }
}

@media (min-width: 993px) {
  .columns {
    /* Original: flex-direction: row; */
    flex-direction: row; /* ab Desktop wieder klassisch nebeneinander */
  }
}

/* Bessere mobile Basis-Einstellungen (kleine Smartphones) */
@media (max-width: 576px) {
  .columns {
    /* Original in @media: display: block; flex-basis: initial; */
    display: flex;       /* konsistenter Einsatz von Flexbox */
    flex-direction: column; /* Spalten untereinander */
    flex-basis: auto;
  }

  .columns-margins {
    /* Original: flex-grow: 1; */
    padding: 0 10px; /* neuer Wert: kleine seitliche Ränder auf Mobiltelefonen */
  }
}


/* ============================
   Navigation / Header
   ============================ */

/* Navigation Innenabstand auf Mobil verkleinern */
@media (max-width: 576px) {
  .cd-navigation-bar-content {
    /* Original: margin: 0px 30px; */
    margin: 0 10px; /* mehr Platz auf schmalen Bildschirmen */
  }
}

/* Megamenu: bessere Darstellung auf kleineren Screens */
@media (max-width: 992px) {
  .cd-megamenu .cd-menu-level-1 > ul {
    /* Original: display: flex; flex-flow: row; flex-wrap: wrap; */
    flex-flow: column;  /* Menü-Einträge untereinander statt in Reihe */
    flex-wrap: nowrap;
  }
}


/* ============================
   Logo / Clubname
   ============================ */

/* Logo auf Mobil: valide Werte + Platz sparen */
@media (max-width: 576px) {
  .cd-club-logo {
    /* Original: height: 3 rem; margin: 1 rem; */
    height: 3rem;   /* korrigiert: ohne Leerzeichen */
    margin: 0.5rem; /* etwas weniger Außenabstand für mehr Platz */
  }
}

/* Club-Name: flüssigere Schriftgrößen je Breakpoint */
a.cd-club-name,
a.cd-club-name:visited,
a.cd-club-name:hover {
  /* Original: font-size: 45px; */
  font-size: clamp(28px, 3vw, 40px); /* neue fluid Größe zwischen Mobil und Desktop */
}

/* kleine Smartphones */
@media (max-width: 576px) {
  a.cd-club-name,
  a.cd-club-name:visited,
  a.cd-club-name:hover {
    /* Original in @media: font-size: 5.5vmin; */
    font-size: clamp(22px, 5.5vmin, 30px); /* lesbar, aber nicht zu groß */
  }
}

/* mittlere Geräte (Tablets) */
@media (min-width: 577px) and (max-width: 992px) {
  a.cd-club-name,
  a.cd-club-name:visited,
  a.cd-club-name:hover {
    /* Neuer Wert: abgestufte Größe für Tablets */
    font-size: clamp(26px, 3.5vmin, 36px); /* neue Tablet-Schriftgröße für Clubnamen */
  }
}


/* ============================
   Buttons / To-Top Button
   ============================ */

/* To-Top-Button auf sehr kleinen Screens etwas kleiner und höher */
@media (max-width: 576px) {
  .cd-totop-button {
    /* Original: right: -100px; bottom: 50px; width: 50px; height: 50px; */
    width: 40px;    /* neue kompaktere Größe für Mobiltelefone */
    height: 40px;
    bottom: 70px;   /* höher, damit er nicht über Footer / Cookie-Banner liegt */
  }

  .cd-scroll .cd-totop-button {
    /* Original: right: 10px; */
    right: 15px; /* etwas mehr Innenabstand vom Rand */
  }
}


/* ============================
   Typografie / allgemeine Größen
   ============================ */

/* Login-Link: abgestufte Schriftgrößen */
@media (min-width: 577px) and (max-width: 992px) {
  .cd-login-link-desktop a.cd-link-login {
    /* Original: font-size: 22px; (Desktop)
       Original mobil: font-size: 5vmin; */
    font-size: 18px; /* neue Zwischenstufe für Tablets */
  }
}

/* Megamenu-Button: abgestufte Schriftgrößen */
@media (min-width: 577px) and (max-width: 992px) {
  .cd-megamenu-button {
    /* Original: font-size: 22px; (Desktop)
       Original mobil: font-size: 5vmin; */
    font-size: 18px; /* neue Tablet-Größe für Megamenu-Button */
  }
}

/* Menü-Level 1 auf kleineren Screens etwas kleiner */
@media (max-width: 576px) {
  .cd-megamenu .cd-menu-level-1 a {
    /* Original: font-size: 22px; font-weight: 700; */
    font-size: 18px; /* neue mobile Schriftgröße für Hauptnavigation */
  }
}

@media (min-width: 577px) and (max-width: 992px) {
  .cd-megamenu .cd-menu-level-1 a {
    /* Original: font-size: 22px; */
    font-size: 20px; /* neue Tablet-Schriftgröße für Hauptnavigation */
  }
}