/* ==========================================================================
   GLOBALES DESIGN-SHEET: JC HAN HO SAN (Relaunch 2026 - Finale Fassung)
   ========================================================================== */

/* ==========================================
   1. HINTERGRUND & BASICS (Dezent aufgehelltes Anthrazit)
   ========================================== */
body {
    background-color: #26292b; /* Modernes Anthrazit */
    color: #f5f5f5; /* Klares Weiß für optimale Lesbarkeit */
}
a {
    color: #cccccc;
}
a:hover {
    color: #ffffff;
}
/* Kopfzeile zieht nahtlos mit dem neuen Hintergrund mit */
.header {
    background: #26292b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 0 !important;
}
/* Logo-Container zentrieren und Größe auf genau 300x300px festlegen */
.navbar-brand, 
.navbar-brand img, 
.header .container-brand img {
    max-width: 300px !important;
    max-height: 300px !important;
    width: 300px !important;
    height: 300px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
/* Die einzelnen Menüpunkte im Desktop-Modus zentrieren */
.header .navbar-nav {
    flex-direction: row !important;
    justify-content: center !important;
    width: auto !important;
    gap: 15px; /* Abstand zwischen den Menüpunkten */
}
/* Löst nur den ungenutzten inneren Menü-Link auf, lässt das Logo oben aber unberührt */
.navbar-expand-md .navbar-brand,
.header .container-nav .navbar-brand {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}
/* Garantiert, dass die Menüleiste die volle Breite nutzt und sich exakt mittig ausrichtet */
.header .container-nav,
.header .navbar-collapse {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* ==========================================
   2. NEWS / BLOG-LAYOUT (Struktur auf der Startseite)
   ========================================== */
.blog-item {
    display: flex !important;
    flex-direction: column !important;
}
.blog-item .page-header {
    order: 1 !important;
    margin-bottom: 15px !important;
}
.blog-item .item-image {
    order: 2 !important;
    margin-bottom: 20px !important;
}
.blog-item [itemprop="articleBody"], 
.blog-item .com-content-category-blog__body,
.blog-item .article-body {
    order: 3 !important;
}
/* Link-Effekt der Überschrift komplett entfernen */
.blog-item .page-header h1 a,
.blog-item .page-header h2 a {
    color: #ffffff !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default !important;
}
/* Beitrags-Details unsichtbar machen */
.blog-item .article-info,
.blog-item .aside,
.blog-item .meta {
    display: none !important;
}
/* Gilt für JEDE Hauptüberschrift auf der gesamten Webseite */
.com-content-category-blog__title,
.com-content-article__title,
.page-header h1,
.page-header h2 {
    text-align: center !important;
    margin-top: 25px !important;
    margin-bottom: 50px !important;
    font-weight: bold !important;
    width: 100% !important;
}
/* Zentrierter Inhaltsbereich mit fester Breite für die News */
.blog .blog-items {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}
/* Garantiert linksbündigen Text in den News */
.blog-item .page-header,
.blog-item [itemprop="articleBody"],
.blog-item .com-content-category-blog__body,
.blog-item .article-body {
    text-align: left !important;
}
/* Zentriert das Bild im Newsbereich */
.blog-item img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* ==========================================
 3. STATISCHE SEITEN / INHALT (Überschriften & Textblöcke)
 ========================================== */
.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3,
.foerderverein-page h1,
.foerderverein-page h2,
.foerderverein-page h3,
.registration-page h1,
.registration-page h2,
.registration-page h3 {
 color: #ffffff !important;
 text-align: center !important; 
 font-weight: bold !important;
 margin-top: 45px !important;
 margin-bottom: 25px !important;
 width: 100% !important;
 display: block !important;
}
.com-content-article__body h2, .foerderverein-page h2, .registration-page h2 {
 font-size: 2rem !important;
}
.com-content-article__body h3, .foerderverein-page h3, .registration-page h3 {
 font-size: 1.4rem !important;
}

/* Zwingt den Fließtext auf den Infoseiten kompakt auf 800px Breite und LINKSBÜNDIG */
/* AUSNAHME HINZUGEFÜGT: Gilt NICHT für Absätze innerhalb von Trainer-Kacheln! */
.foerderverein-page .foerderverein-textblock,
.foerderverein-page p:not([style*="text-align: center"]):not([class*="trainer"]),
.registration-page p:not([style*="text-align: center"]):not([class*="trainer"]) {
 max-width: 800px !important;
 width: 100% !important;
 margin-left: auto !important;
 margin-right: auto !important;
 text-align: left !important;
 padding: 0 15px !important;
 box-sizing: border-box !important;
}


/* ==========================================
   4. TABELLE (Blasseres Rot & Hellere Grautöne)
   ========================================== */
.com-content-article__body table {
    max-width: 800px !important;
    width: 100% !important;
    margin: 30px auto !important;
    border-collapse: collapse !important;
    background-color: #eef1f3 !important; /* Helles Basis-Grau */
    color: #1a1a1a !important; /* Dunkle Schrift */
    border: 2px solid #ffffff !important;
}
/* Tabellenkopf in einem eleganteren, blasseres Matt-Rot */
.com-content-article__body table th,
.com-content-article__body table thead td {
    background-color: #b83232 !important; /* Blasseres Rot */
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 12px 15px !important;
    text-align: left !important;
    border: 2px solid #ffffff !important;
}
/* Tabellenzellen mit stabilem weißen Gitternetz */
.com-content-article__body table td {
    padding: 10px 15px !important;
    text-align: left !important;
    border: 2px solid #ffffff !important;
}
/* Abwechselnde Zeilen in einem sanften, hellen Silber-Grau */
.com-content-article__body table tr:nth-child(even) {
    background-color: #dde2e6 !important;
}
/* Ermöglicht das seitliche Wischen bei großen Tabellen auf Smartphones */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 30px !important;
}

/* ==========================================
   5. TRAINERKACHELN (Jetzt mit weißen Rändern)
   ========================================== */
.trainer-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    max-width: 800px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Trainer-Box mit weißem Rand und dunklerer Abhebung */
.trainer-card {
    display: flex !important;
    align-items: center !important;
    background: #323638 !important; /* Hebt sich vom neuen Hintergrund ab */
    border: 2px solid #ffffff !important; /* Weißer Rand analog zur Tabelle */
    padding: 15px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Trainer-Bild mit weißem Rahmen */
.trainer-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important; /* Weißer Bildrand */
    margin-right: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* Der Textblock: Hebelt jegliches template-bedingtes Padding oder Schieben aus */
.trainer-info {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important; /* Stapelt Name und Infos sauber untereinander */
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Formatiert den neuen Trainernamen exakt so groß und fett wie das H3, aber OHNE den unruhigen Abstand nach oben */
.trainer-name,
p.trainer-name {
    font-size: 1.35rem !important;
    color: #ffffff !important;
    font-weight: bold !important;
    margin: 0 0 6px 0 !important; /* Nur Abstand nach unten zum Rank */
    padding: 0 !important;
    line-height: 1 !important;    /* Killt den Puffer nach oben vollständig */
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}


.trainer-rank {
    font-size: 0.95rem !important;
    color: #cbd0d6 !important; /* Hellgrau */
    margin: 0 0 5px 0 !important;
}

/* Trainingstage in einem sanften, hellen Graublau */
.trainer-day {
    font-size: 0.85rem !important;
    color: #a4bccc !important; 
    margin: 0 !important;
    font-weight: normal !important;
}

/* Platzhalter für das Geschäftsstellen-Icon im Anmelde-Bereich */
.office-icon-placeholder {
    width: 90px !important;
    height: 90px !important;
    background-color: #323638 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
}

/* Nullt den Standard-Template-Abstand über dem Namen im Kachel-System */
.trainer-info h3,
.trainer-card h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}

/* EXTRA MOBIL-ANPASSUNG (Für Displays unter 576px) */
@media (max-width: 575.98px) {
    .trainer-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .trainer-img {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .trainer-info,
    .trainer-info h3 {
        text-align: center !important;
    }
}



/* ==========================================
 6. IMPRESSUM & DATENSCHUTZ (Layout & Footer)
 ========================================== */
.com-content-article .com-content-article__body {
 max-width: 800px !important;
 width: 100% !important;
 margin: 0 auto !important;
 padding: 0 15px !important;
 text-align: left !important;
}
.com-content-article .com-content-article__body h2,
.com-content-article .com-content-article__body h3 {
 text-align: left !important;
 color: #ffffff !important;
 margin-top: 35px !important;
 margin-bottom: 15px !important;
}
/* Der rote Footer-Balken */
footer, 
.footer,
.container-footer {
 background-color: #b83232 !important; /* Das matte Ziegelrot */
 background-image: none !important; 
 margin-top: 60px !important;
 padding: 8px 0 !important; /* Sehr schmaler Balken */
 text-align: center !important; 
 width: 100% !important;
 min-height: auto !important;
}
/* Den Text "Impressum & Datenschutz" im Footer zentrieren und weiß färben */
footer a, 
.footer a,
footer .mod-menu a,
.footer .mod-menu a {
 color: #ffffff !important; 
 text-decoration: none !important; 
 font-weight: bold !important;
 font-size: 0.9rem !important; 
 display: inline-block !important;
 margin: 0 auto !important;
 text-align: center !important;
 line-height: 1 !important; 
 padding: 0 !important; 
}
footer a:hover, 
.footer a:hover {
 color: #f5f5f5 !important;
 text-decoration: underline !important;
}
footer ul, .footer ul, footer .mod-menu, .footer .mod-menu {
 margin: 0 !important;
 padding: 0 !important;
 list-style: none !important;
}

/* ==========================================
 8. EILMELDUNG / ALERT-BOX (Zentriertes Rot)
 ========================================== */
.alert-box-container,
[class*="alert-box-container"] {
 max-width: 800px !important;
 width: 100% !important;
 margin: 30px auto 40px auto !important;
 background-color: #b83232 !important; 
 border: 2px solid #ffffff !important; 
 border-radius: 8px !important;
 padding: 20px !important;
 box-sizing: border-box !important;
 text-align: center !important;
 display: block !important;
}
.alert-box-container:before,
[class*="alert-box-container"]:before {
 content: " Wichtiger Hinweis" !important;
 display: block !important;
 color: #ffffff !important;
 font-size: 1.3rem !important;
 font-weight: bold !important;
 margin-bottom: 12px !important;
 text-align: center !important;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.alert-box-container p,
[class*="alert-box-container"] p {
 color: #ffffff !important;
 font-size: 1.1rem !important;
 margin: 0 !important;
 text-align: center !important;
 line-height: 1.5 !important;
}

/* ==========================================
 9. ANSPRECHPARTNER & TRAINER MOBIL-FIX
 ========================================== */
@media (max-width: 767.98px) {
 /* Zwingt ALLE Kacheln auf Handys in ein sauberes Untereinander-Layout */
 .trainer-card {
  flex-direction: column !important;
  text-align: center !important;
  align-items: center !important;
  padding: 20px 15px !important;
 }
 
 /* Zentriert die runden Bilder und Icons mobil über dem Text */
 .trainer-img, 
 .office-icon-placeholder {
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 15px !important;
  display: block !important;
 }
 
 /* Garantiert, dass JEDE Textzeile in den Kacheln mobil exakt zentriert steht */
 .trainer-info,
 .trainer-info h3,
 .trainer-info p,
 .trainer-info a,
 .trainer-card h3,
 .trainer-card p,
 .trainer-card a,
 .trainer-rank,
 .trainer-day {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 5px !important;
 }
}

/* ==========================================
 10. KONTAKTFORMULAR (Der endgültige Core-Fix)
 ========================================== */
/* Zwingt das Formular und JEDE umschließende Box bedingungslos in das 800px-Schema */
.com-config,
.grid-child,
div[id*="cf-form-"],
.cf-form-id-1,
.cf-form-wrapper {
 max-width: 800px !important;
 width: 100% !important;
 margin: 30px auto 50px auto !important;
 padding: 0 15px !important;
 box-sizing: border-box !important;
}
/* ENTZIEHT DER WEISSEN INTERNEN BOX UND ALLEN HINTERGRÜNDEN DIE FARBE UND DEN RAHMEN */
.cf-form-id-1,
div[id*="cf-form-"].cf-form-id-1,
.cf-form-wrapper form,
.cf-form-id-1 .cf-form-fields,
.cf-form-wrapper,
.card,
.card-body,
.grid-child {
 background-color: transparent !important;
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
}
/* LÖSCHT DAS GROSSE WORT "KONTAKT" GANZ UNTEN RADIKAL VOM BILDSCHIRM */
main h1,
.page-header h1,
.com-contact h1,
h1.page-title,
main + h1,
.cf-form-wrapper + h1,
h1:has(span) {
 display: none !important;
 visibility: hidden !important;
 height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
}
/* Gestaltet die Beschriftungen (Labels) über den Feldern in weiß und linksbündig */
.cf-form-wrapper .cf-field-label,
.cf-form-wrapper label,
.cf-form-id-1 label,
.cf-label {
 display: block !important;
 text-align: left !important;
 color: #ffffff !important;
 font-size: 1.1rem !important;
 margin-bottom: 8px !important;
 font-weight: bold !important;
 margin-top: 15px !important;
}
/* Macht die Eingabefelder dunkelgrau mit weißer Schrift (analog zu Jotform) */
.cf-form-id-1 input[type="text"],
.cf-form-id-1 input[type="email"],
.cf-form-id-1 textarea,
.cf-form-wrapper .cf-field-control input,
.cf-form-wrapper .cf-field-control textarea,
.cf-form-control,
.form-control {
 background-color: #323638 !important;
 color: #ffffff !important;
 border: 1px solid #ffffff !important;
 border-radius: 4px !important;
 padding: 12px !important;
 width: 100% !important;
 box-sizing: border-box !important;
 font-size: 1.1rem !important;
}
/* Platzhalter-Texte (z. B. "Gib deinen Namen an") heller und lesbar machen */
.cf-form-id-1 input::placeholder,
.cf-form-id-1 textarea::placeholder,
.form-control::placeholder {
 color: #a4bccc !important;
 opacity: 1 !important;
}
/* Fokus-Effekt beim Anklicken der Felder */
.cf-form-id-1 input:focus,
.cf-form-id-1 textarea:focus,
.form-control:focus {
 border-color: #ffffff !important;
 box-shadow: none !important;
 background-color: #323638 !important;
 color: #ffffff !important;
 outline: none !important;
}
/* Gestaltet den Absende-Button im matten Ziegelrot der Tabelle */
.cf-form-id-1 button[type="submit"],
.cf-form-id-1 .cf-submit-btn,
.btn-primary,
.cf-form-wrapper .btn {
 background-color: #b83232 !important;
 color: #ffffff !important;
 border: 2px solid #ffffff !important;
 font-weight: bold !important;
 font-size: 1.15rem !important;
 padding: 12px 35px !important;
 border-radius: 6px !important;
 cursor: pointer !important;
 display: inline-block !important;
 width: auto !important;
 margin-top: 15px !important;
 transition: background 0.2s !important;
}
.cf-form-id-1 button[type="submit"]:hover {
 background-color: #9e1b1b !important;
}
/* Gestaltet die grüne Erfolgsmeldung nach dem Absenden passend um */
.cf-form-wrapper .cf-alert-success {
 background-color: rgba(255, 255, 255, 0.05) !important;
 border: 2px solid #ffffff !important;
 color: #ffffff !important;
 border-radius: 6px !important;
 padding: 15px !important;
 text-align: center !important;
 font-size: 1.1rem !important;
}

/* Nullt den störenden Innenabstand von Convert Forms, damit die Eingabefelder voll auf 800px Breite aufspringen */
.cf-form-id-1, 
.cf-form-wrapper form, 
.cf-form-id-1 .cf-form-fields,
#cf-form-1,
div[id*="cf-form-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================
   11. KONTAKT SEITENFINALE (Reiner Abstands-Fix)
   ========================================== */
/* Reguliert ausschließlich die harmonischen Abstände der Modul-Sektionen untereinander */
.container-top-a {
    margin-top: 25px !important;
    margin-bottom: 0 !important;
}

.container-top-b {
    margin-top: -15px !important; /* Zieht das Kontaktformular bündig an den Einleitungstext heran */
}




/* ==========================================
 12. FOOTER FINALE (Perfekte Zentrierung & Schrift)
 ========================================== */
/* Bricht das starre Cassiopeia-Spaltenraster auf und erzwingt das Untereinander-Layout */
footer, 
.footer, 
.container-footer,
.footer .container,
.footer .w-100 {
 display: flex !important;
 flex-direction: column !important; /* Stapelt Socials über dem Impressum */
 align-items: center !important;
 justify-content: center !important;
 text-align: center !important;
 width: 100% !important;
 max-width: 100% !important;
}
/* Container für die Social-Media-Links */
.footer-social-links {
 display: flex !important;
 flex-direction: row !important; /* Icons nebeneinander aufreihen */
 justify-content: center !important;
 align-items: center !important;
 gap: 30px !important; /* Abstand zwischen Instagram und WhatsApp */
 margin: 12px auto 8px auto !important; /* Abstand nach oben und zum Impressum unten */
 width: 100% !important;
}
/* Einheitlicher Schriftstil für ALLE Links im Footer (Socials + Impressum) */
.footer-social-links a,
footer a, 
.footer a,
footer .mod-menu a,
.footer .mod-menu a {
 color: #ffffff !important;
 text-decoration: none !important;
 font-weight: bold !important;
 font-size: 0.95rem !important; /* Absolut identische Schriftgröße */
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 8px !important;
}
/* Hover-Effekt für alle Links im Fußbereich */
.footer-social-links a:hover,
footer a:hover,
.footer a:hover {
 color: #cbd0d6 !important;
 text-decoration: underline !important;
}
/* Formatierung der lokalen Bild-Icons */
.social-footer-icon {
 width: 18px !important;