/* ==========================================================================
   RAINER FASNACHTSOMZOG – custom.css fuer ClubDesk
   Stand: neues ClubDesk-Design (separate Logo-Zeile + Menue-Zeile(n))
   ========================================================================== */

:root {
  --color-yellow: #fde900;
  --color-dark: #1d1d1b;
  --color-red: #d4021d;
  --color-red-alt: #e54026;
  --color-gray: #666666;
  --color-white: #ffffff;
}

/* --------------------------------------------------------------------
   1. Seiten-Hintergrund
   -------------------------------------------------------------------- */
body {
  background-color: var(--color-yellow) !important;
}

/* --------------------------------------------------------------------
   2. Navigation - NEUES Template hat 3 separate Zeilen/Elemente:
      a) .navigation-bar        -> Logo + Login (nicht fixiert)
      b) .menu-bar               -> Menuepunkte (nicht fixiert)
      c) .menu-bar-fixed         -> Menuepunkte, per position:fixed beim
                                     Scrollen eingeblendet
      Statt Volltonfarbe bekommen diese Zeilen dasselbe Muster-Hintergrund-
      bild wie Header/Inhalt (mit background-attachment: fixed) - dadurch
      wirkt das Muster durchgehend, ohne dass die Navigation es blockiert.
   -------------------------------------------------------------------- */
.navigation-bar,
.menu-bar,
.menu-bar-fixed {
  background-image: url("rco_hg_d931cb83.png") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  background-color: var(--color-yellow) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Logo-Zeile: normale Zentrierung per Flexbox statt position:absolute -
   dadurch "weiss" die Zeile automatisch, wie hoch sie sein muss, und das
   Logo kann nicht mehr in Nachbar-Elemente hinein ueberlaufen. */
.cd-navigation-bar-content {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 10px;
}

/* WICHTIG: .cd-filler waechst sonst per flex-grow auf die komplette
   Restbreite und drueckt dadurch das Logo an den linken Rand - hier
   deaktivieren, da wir den Login-Link separat per position:absolute
   platzieren (siehe unten) und den Filler nicht mehr brauchen. */
.cd-navigation-bar-content .cd-filler {
  display: none !important;
}

.cd-club-logo-and-name {
  position: static !important; /* alte absolute Zentrierung deaktiviert */
  transform: none !important;
  background: transparent !important;
}

.cd-club-logo-link { display: inline-block !important; }
.cd-club-logo { height: 130px; max-width: 90%; }

/* Login-Link rechts daneben platzieren, ohne die Zentrierung des Logos
   zu stoeren */
.cd-login-link-desktop {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Vereinsname als Text (falls kein Logo aktiv) */
a.cd-club-name,
a.cd-club-name:visited,
a.cd-club-name:hover {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Oswald, sans-serif !important;
  font-weight: 700 !important;
}

/* Menuepunkte (neues Template: .cd-menubar statt .cd-megamenu) */
.cd-menubar .cd-menu-item {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Roboto, sans-serif !important;
  font-weight: 700 !important;
}
.cd-menubar .cd-menu-item.cd-menu-active,
.cd-menubar .cd-menu-item:hover {
  color: var(--color-red) !important;
}

/* Mobiles Hamburger-Menu */
.cd-mobile-menu-button,
.cd-mobile-menu-button .menu-label {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Roboto, sans-serif !important;
  font-weight: 700 !important;
}
.cd-mobile-menu-button .nav-icon span {
  background-color: var(--color-dark) !important;
}
.mobile-menu-bar,
.mobile-menu-bar-fixed {
  background-image: url("rco_hg_d931cb83.png") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  background-color: var(--color-yellow) !important;
}
.cd-mobile-menu-background {
  background-color: var(--color-white) !important;
}
.cd-mobile-menu .cd-menu-item {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Roboto, sans-serif !important;
}
.cd-mobile-menu .cd-menu-item.cd-menu-active {
  color: var(--color-red) !important;
}

/* Alte Mega-Menu-Klassen aus dem vorherigen Design (falls hier noch
   irgendwo vorhanden/verlinkt) - schadet nicht, greift aber im neuen
   Template i.d.R. nicht mehr: */
.cd-megamenu-button {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Roboto, sans-serif !important;
  font-weight: 700 !important;
}
.cd-megamenu-container {
  background-color: var(--color-white) !important;
}
.cd-megamenu .cd-menu-level-1 a,
.cd-megamenu .cd-menu-level-2 a,
.cd-megamenu .cd-menu-level-3 a {
  color: var(--color-dark) !important;
  font-family: "Fredoka One", Roboto, sans-serif !important;
}
.cd-megamenu a.cd-menu-item.cd-menu-active,
.cd-megamenu a.cd-menu-item:hover {
  color: var(--color-red) !important;
}

/* Login-Button */
a.cd-button-login,
a.cd-link-login {
  color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
}
a.cd-button-login:hover,
a.cd-link-login:hover {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
  border-color: var(--color-red) !important;
}

/* "Nach oben"-Button */
.cd-totop-button {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
}

/* --------------------------------------------------------------------
   3. Inhalts-Ueberschriften
   -------------------------------------------------------------------- */
h1.content-headline {
  font-family: "Fredoka One", Oswald, sans-serif;
  color: var(--color-dark);
  font-weight: 800;
}

h2.text--h3 {
  font-family: "Fredoka One", Oswald, sans-serif;
  color: var(--color-red);
  font-weight: 700;
}

.cd-block-content a {
  color: var(--color-red);
}
.cd-block-content a:hover {
  color: var(--color-red-alt);
}

/* --------------------------------------------------------------------
   4. Weisse Box mit gepunkteter Umrandung
   -------------------------------------------------------------------- */
.content-wrapper .cd-section > .cd-section-content {
  background-color: var(--color-white);
  border: 3px dotted var(--color-dark);
  border-radius: 4px;
  padding: 2rem;
  position: relative;
  max-width: 1160px;
  margin: 2rem auto;
}

.content-wrapper .cd-section.cd-dark > .cd-section-content {
  background-color: transparent;
  border: none;
}

/* --------------------------------------------------------------------
   5. Bilder (Image-Block)
   -------------------------------------------------------------------- */
.cd-image-block img {
  border: none;
  border-radius: 4px;
}

/* --------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------- */
.cd-footer {
  background-color: var(--color-dark) !important;
}
.cd-social-media-icon {
  color: var(--color-white);
}
.cd-social-media-icon:hover {
  color: var(--color-yellow);
}

/* --------------------------------------------------------------------
   7. Cookie-Consent-Banner
   -------------------------------------------------------------------- */
.cc-window, .cc-revoke { background-color: var(--color-dark) !important; }
.cc-btn { background-color: var(--color-red) !important; color: var(--color-white) !important; }

/* ==========================================================================
   SCHRIFT (optional)
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

/* --------------------------------------------------------------------
   8. Durchgehendes Icon-Muster von Header ueber Inhalt bis Footer
   -------------------------------------------------------------------- */
.cd-header .cd-backgroundPane,
.cd-content > .cd-backgroundPane {
  background-image: url("rco_hg_d931cb83.png") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  background-color: var(--color-yellow) !important;
}

.content-wrapper .cd-section > .cd-backgroundPane {
  background-image: none !important;
}

@media (max-width: 576px) {
  .cd-header .cd-backgroundPane,
  .cd-content > .cd-backgroundPane {
    background-attachment: scroll !important;
  }
}