/* =====================================================
   1. FARBVARIABLEN – ASC WEIMAR
   Zentrale Stelle für alle Farben
   ===================================================== */

:root {
  /* Grundfarben */
  --asc-red: #FF5C66;          /* Akzentfarbe (Buttons, Hover, aktiv) */
  --asc-white: #FFFFFF;       /* Weiß / Hintergrund */
  --asc-black: #1A1A1A;       /* Haupttextfarbe */
  --asc-gray-light: #E5E5E5;  /* Linien / Rahmen */
}


/* =====================================================
   2. BASIS
   Globale Grundeinstellungen
   ===================================================== */

body {
  font-family: 'Roboto', sans-serif;
  color: var(--asc-black);
  background: var(--asc-white);
}

a {
  color: var(--asc-black);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--asc-red);
  opacity: 0.85;
}


/* =====================================================
   3. KACHELN / TILES
   Einheitliches Erscheinungsbild für Personen & Listen
   ===================================================== */

/* ---------------------------------------------
   Allgemeine Überschriften im Content
   --------------------------------------------- */

.cd-content h1,
.cd-content h2,
.cd-content h3,
.cd-content h4,
.cd-content h5,
.cd-content h6,
.cd-page-title {
  color: var(--asc-red);
  text-align: left;
  line-height: 1.2;
}

/* >>> Korrektur: H3 nicht unterstreichen (ClubDesk-Override) */
.cd-content h3 {
  text-decoration: none;
}

/* ---------------------------------------------
   Zentrale Box (kommt aus content.css)
   -> Grau entfernen, Weiß erzwingen
   --------------------------------------------- */

.cd-light .cd-tile-v-box,
.cd-light .cd-contactlist-tile-v .cd-tile-v-box {
  background-color: var(--asc-white) !important;
}

/* ---------------------------------------------
   Leichter Schatten für visuelle Tiefe
   --------------------------------------------- */

.cd-light .cd-tile-v-box {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  transition: box-shadow 0.25s ease;
}

.cd-light .cd-tile-v-box:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------
   Bildbereich – kein grauer Hintergrund
   --------------------------------------------- */

.cd-light .cd-tile-v-box .cd-image-wrapper-1 {
  background-color: var(--asc-white);
}

/* ---------------------------------------------
   Hauptinhalt – Name & Funktion
   --------------------------------------------- */

.cd-tile-v-main-area {
  padding: 18px 22px 8px 26px; /* etwas mehr links */
  background-color: var(--asc-white);
}

/* ------------------------------------------------
   >>> HEADLINE: UMBRECHEN ERLAUBEN (NEWS / BOXEN)
   ------------------------------------------------ */

.cd-tile-v-main-heading {
  margin: 0 0 6px 0;
  padding-left: 0;
  text-align: left;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  line-height: 1.3;
  word-break: break-word;
  hyphens: auto;
}

/* Funktion (z. B. 1. Vorsitzende(r)) */
.cd-tile-v-main-subheading {
  font-size: 14px;
  margin: 0;
  padding-left: 0;
  text-align: left;
  line-height: 1.4;
}

/* ---------------------------------------------
   Detailbereich – Mailadresse
   --------------------------------------------- */

.cd-tile-v-detail-area {
  padding: 14px 22px 18px 26px;
  background-color: var(--asc-white);
}

/* Mail-Link: ROT normal */
.cd-tile-v-detail-area .cd-tile-v-detail-value a,
.cd-tile-v-detail-area .cd-tile-v-detail-value a:visited {
  color: var(--asc-red) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Hover / Fokus: SCHWARZ */
.cd-tile-v-detail-area .cd-tile-v-detail-value a:hover,
.cd-tile-v-detail-area .cd-tile-v-detail-value a:focus {
  color: var(--asc-black) !important;
  text-decoration: underline;
}

/* =====================================================
   4. NAVIGATION – DESKTOP & STICKY
   Logo links · Menü mittig · Login rechts
   ===================================================== */

/* Grundcontainer */
.cd-navigation-bar-container {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30010;

  background: var(--asc-white);
  border-bottom: 1px solid var(--asc-gray-light);
}

/* Inhalt */
.cd-navigation-bar-content,
.cd-scroll .cd-navigation-bar-content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
}

/* ClubDesk-Filler entfernen */
.cd-navigation-bar-content .cd-filler {
  display: none !important;
}

/* -----------------------------------------------------
   LOGO – IMMER LINKS
   ----------------------------------------------------- */

.cd-logo-and-name-desktop {
  order: 1;                 /* explizit erstes Element */
  display: flex;
  align-items: center;
  flex-shrink: 0;

  margin-right: 40px;
}

.cd-logo-and-name-desktop .cd-club-logo {
  height: 200px;
  width: auto;
}

.cd-scroll .cd-logo-and-name-desktop .cd-club-logo {
  height: 120px;
}

/* -----------------------------------------------------
   MENÜ – NACH DEM LOGO
   ----------------------------------------------------- */

.cd-singledropdownmenu {
  order: 2;
  margin-left: 0;
}

/* Menü-Links */
.cd-singledropdownmenu .cd-menu-level-1 a {
  font-size: 20px !important;
  font-weight: 500;
  color: var(--asc-black) !important;
}

.cd-singledropdownmenu .cd-menu-level-1 a:hover,
.cd-singledropdownmenu .cd-menu-level-1 a.cd-menu-active {
  color: var(--asc-red) !important;
}

/* -----------------------------------------------------
   LOGIN – IMMER GANZ RECHTS
   ----------------------------------------------------- */

.cd-login-link-desktop {
  order: 3;
  margin-left: auto;
}

.cd-login-link-desktop,
.cd-login-link-desktop > a {
  font-size: 20px !important;
  font-weight: 500;
  color: var(--asc-black) !important;
  white-space: nowrap;
}

.cd-login-link-desktop:hover,
.cd-login-link-desktop > a:hover {
  color: var(--asc-red) !important;
}


/* =====================================================
   5. NAVIGATION – MOBILE
   Weißer Hintergrund, Sticky, korrekt ausgerichtet
   ===================================================== */

@media (max-width: 992px) {

  /* ---------------------------------------------
     Mobile Navbar – Grundzustand
     --------------------------------------------- */

  .cd-mobile-menu-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30010;
    background-color: var(--asc-white);
  }

  .cd-mobile-menu-bar-content {
    display: flex;
    align-items: center;              /* Referenz für alle Icons */
    justify-content: space-between;

    height: 120px;
    padding: 16px 20px;

    background-color: var(--asc-white);
  }

  /* ---------------------------------------------
     Sticky Zustand
     --------------------------------------------- */

  .cd-scroll .cd-mobile-menu-bar-content {
    height: 80px;
    padding: 8px 20px;
    background-color: var(--asc-white);
  }

  /* ---------------------------------------------
     Burger Button – Container
     --------------------------------------------- */

  .cd-mobile-menu-button {
    display: flex;
    align-items: center;              /* vertikale Mitte */
    justify-content: center;

    height: 100%;
    width: 40px;                      /* fester Referenzrahmen */
  }

  /* ---------------------------------------------
     Burger Icon – STRICHE korrekt zentriert
     --------------------------------------------- */

  .cd-mobile-menu-button .nav-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;          /* <<< DAS WAR DER FEHLER */
    gap: 5px;                          /* gleichmäßiger Abstand */

    height: 20px;                     /* visuelle Gesamthöhe */
  }

  .cd-mobile-menu-button .nav-icon span {
    display: block;
    width: 22px;
    height: 2px;

    background-color: var(--asc-red);
    margin: 0;                        /* alte Margins neutralisieren */
  }

  /* ---------------------------------------------
     Login – gleiche Höhe wie Burger
     --------------------------------------------- */

  .cd-login-link-mobile {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* ---------------------------------------------
     Mobile Menü – Position unter Navbar
     --------------------------------------------- */

  .cd-mobile-menu .cd-mobile-menu-level-1 {
    top: 120px;
  }

  .cd-mobile-menu .cd-mobile-menu-level-1.open {
    position: fixed;
    top: 120px;
    left: 0;
    right: 0;

    background-color: var(--asc-white);
    z-index: 30000;
  }

  .cd-scroll .cd-mobile-menu .cd-mobile-menu-level-1.open {
    top: 80px;
  }

  /* ---------------------------------------------
     Logo – Mobile (mittig)
     --------------------------------------------- */

  .cd-logo-and-name-mobile {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .cd-logo-and-name-mobile .cd-club-logo {
    height: 120px;
    width: auto;
  }

  .cd-scroll .cd-logo-and-name-mobile .cd-club-logo {
    height: 70px;
  }
}

  /* ---------------------------------------------
     Sticky Navbar – Hintergrund erzwingen
     --------------------------------------------- */

  .cd-scroll .cd-mobile-menu-bar,
  .cd-scroll .cd-mobile-menu-bar-content {
    background-color: var(--asc-white) !important;
  }


/* =====================================================
   6. CONTENT-OFFSET
   Abstand unter fixer Navbar
   ===================================================== */

#cd-page-content {
  padding-top: 120px;
}

.cd-scroll #cd-page-content {
  padding-top: 110px;
}

@media (max-width: 992px) {
  #cd-page-content {
    padding-top: 0;
  }

  .cd-scroll #cd-page-content {
    padding-top: 30px;
  }
}


/* =====================================================
   7. BUTTONS
   Einheitlicher Vereinsstil
   ===================================================== */

/* -----------------------------------------------------
   BUTTON-GRUNDLAGE
   ----------------------------------------------------- */

/*
   ClubDesk überschreibt <a>-Elemente global in content.css.
   Deshalb müssen Button-Links explizit härter gefasst werden.
*/

.cd-content a.cd-button,
.cd-content a.cd-button-primary,
.cd-content a.cd-button-tertiary,
.cd-content input.cd-button-primary,
.cd-content button.cd-button-primary {
  display: inline-block;

  background-color: var(--asc-red);
  color: var(--asc-white);

  border: none;
  border-radius: 6px;

  font-weight: 600;
  padding: 12px 22px;

  text-decoration: none;
  cursor: pointer;

  opacity: 1;
}

/* -----------------------------------------------------
   HÄRTUNG GEGEN content.css (alle Zustände)
   ----------------------------------------------------- */

.cd-content a.cd-button,
.cd-content a.cd-button:visited,
.cd-content a.cd-button-primary,
.cd-content a.cd-button-primary:visited,
.cd-content a.cd-button-tertiary,
.cd-content a.cd-button-tertiary:visited {
  background-color: var(--asc-red);
  color: var(--asc-white);
}

/* -----------------------------------------------------
   HOVER
   ----------------------------------------------------- */

.cd-content a.cd-button:hover,
.cd-content a.cd-button-primary:hover,
.cd-content a.cd-button-tertiary:hover,
.cd-content input.cd-button-primary:hover,
.cd-content button.cd-button-primary:hover {
  background-color: var(--asc-red);
  color: var(--asc-white);
  opacity: 0.85;
}

/* -----------------------------------------------------
   RESET
   ----------------------------------------------------- */

.cd-content a.cd-button *,
.cd-content a.cd-button-primary *,
.cd-content a.cd-button-tertiary * {
  color: inherit;
}

/* =====================================================
   8. CONTENT – TEXT / BILD / ABSTÄNDE
   Zentrale Layout-Logik
   ===================================================== */

/* Standard-Abstand zwischen Content-Blöcken */
.cd-row {
  margin-bottom: 56px;
}

/* Leere Rows eliminieren */
.cd-row:empty,
.cd-row:not(:has(*)) {
  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 993px) {

  .cd-row {
    display: flex;
    align-items: center;
  }

  .cd-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .cd-col-6:first-child {
    padding-right: 48px;
  }

  .cd-col-6:last-child {
    padding-left: 48px;
  }

  /* Bild-Container */
  .cd-image-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* >>> WICHTIG: Bild passt vollständig in den Rahmen */
  .cd-image-center img {
    max-width: 100%;
    max-height: 380px;

    width: auto;
    height: auto;

    object-fit: contain;
  }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 992px) {

  .cd-row {
    display: block;
    margin-bottom: 40px;
  }

  .cd-col-6,
  .cd-col-12 {
    padding: 0;
  }

  .cd-image-center {
    display: flex;
    justify-content: center;
  }

  .cd-image-center img {
    max-width: 100%;
    max-height: 260px;

    width: auto;
    height: auto;

    object-fit: contain;
  }
}

/* =====================================================
   9. FOOTER
   Desktop: Originalzustand · Mobile: untereinander zentriert
   ===================================================== */

/* ---------------------------------------------
   Grundfarben & Typografie
   --------------------------------------------- */

.cd-footer {
  color: var(--asc-white);
}

.cd-footer p,
.cd-footer span,
.cd-footer li {
  color: var(--asc-white) !important;
}

.cd-footer a,
.cd-footer a:visited {
  color: var(--asc-white) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cd-footer a:hover,
.cd-footer a:focus {
  color: var(--asc-red) !important;
  text-decoration: underline;
}

/* ---------------------------------------------
   Social Icons – IMMER im Block zentriert
   (entscheidend für die drei Piktogramme)
   --------------------------------------------- */

.cd-footer .cd-block[data-block-type="23"],
.cd-footer .cd-block[data-block-type="23"] .cd-block-content {
  text-align: center;
}

/* ---------------------------------------------
   Mobile – untereinander & zentriert
   --------------------------------------------- */

@media (max-width: 992px) {

  .cd-footer {
    text-align: center;
  }

  .cd-footer .cd-row {
    flex-direction: column;
    align-items: center;
  }

  .cd-footer .cd-row > [class*="cd-col"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* Listen neutralisieren */
  .cd-footer ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
}

/* =====================================================
   10. UTILITIES
   Kleine gezielte Helfer
   ===================================================== */

/* ---------------------------------------------
   "Weitere Einträge" Button ausblenden
   --------------------------------------------- */

/*
   Dieser Button wird von ClubDesk automatisch
   in der News-Navigation erzeugt.

   Wichtig:
   - NUR der automatische "Weitere Einträge"-Button
   - KEINE anderen Link-Buttons
   - KEINE Abhängigkeit vom Archiv
*/

/* exakt: Link innerhalb der Detail-Navigation */
 .cd-newslist-tile-v > .cd-detailPageNavigation > a.cd-button-tertiary {
  display: none;
}


/* ---------------------------------------------
   Nach-oben-Button Pfeil einfärben
   --------------------------------------------- */

.cd-totop-button .fa-chevron-up::before {
  color: var(--asc-red);
}



/* =====================================================
   11. FAQ / ACCORDION
   Details / Summary
   ===================================================== */

.cd-content details {
  border: 1px solid var(--asc-gray-light);
  border-radius: 6px;
  margin-bottom: 16px;
}

.cd-content summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  position: relative;
}

.cd-content summary::-webkit-details-marker {
  display: none;
}

.cd-content summary::after {
  content: "›";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--asc-red);
}

.cd-content details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.cd-content details p {
  padding: 0 20px 16px;
  line-height: 1.6;
}

/* =====================================================
   12. FAQ – FULLWIDTH LAYOUT
   Hebt die von ClubDesk gesetzte Breitenbegrenzung
   (z. B. durch m12 / Content-Block-Logik) gezielt auf.

   Gilt ausschließlich für:
   - Rows mit der Klasse .faq-fullwidth
   - innerhalb von .cd-content

   Keine Auswirkungen auf:
   - andere cd-row
   - andere Seiten
   - globale Grid-Logik
   ===================================================== */

/* FAQ-Row darf die volle Content-Breite nutzen */
.cd-content .faq-fullwidth {
  max-width: 100%;
}

/* Spalte innerhalb der FAQ ebenfalls voll breit */
.cd-content .faq-fullwidth > .cd-col-12 {
  max-width: 100%;
  flex: 0 0 100%;
}