/*DAS IST ANFAHRT */ /* ===== LAYOUT DESKTOP ===== */ .contact-map-wrapper { display: flex; gap: 40px; align-items: flex-start; margin: 20px 0 40px; } .contact-left { width: 25%; } .contact-right { width: 75%; } .contact-right iframe { width: 100%; height: 350px; border: 0; } /* ===== ADRESSE LINKS — TEXTSTYLING ===== */ .contact-left p { font-size: 24px; line-height: 1.4; font-weight: 500; color: #111; margin: 0 0 12px 0; } .contact-left p strong { font-size: 28px; font-weight: 700; display: block; margin-bottom: 10px; } /* ===== MOBILE ===== */ @media (max-width: 768px) { /* Map & Text untereinander */ .contact-map-wrapper { flex-direction: column; } /* Volle Breite auf Mobile */ .contact-left, .contact-right { width: 100%; max-width: 100%; } /* Map größer machen */ .contact-right iframe { height: 400px; margin-top: 10px; } /* Adresse gleich groß wie Desktop (kein Schrumpfen) */ .contact-left p { font-size: 22px; line-height: 1.4; font-weight: 500; } .contact-left p strong { font-size: 26px; } } /* ===== GLOBAL TYPOGRAPHIE ===== */ body { font-family: 'Poppins', sans-serif; } /* Überschriften */ h1, h2, h3 { font-weight: 600; letter-spacing: 0.3px; } /* Allgemeiner Text */ p { font-size: 16px; line-height: 1.6; } 

/*###############personal ################# */


/*########### CROSSFIT SECTION ###########*/

.crossfit-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Haupttitel */
.crossfit-section .page-header h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    color: #000 !important;
}

.crossfit-section .page-header h2::after {
    display: none !important;
}

/* Überschriften neutral */
.crossfit-section h1,
.crossfit-section h2,
.crossfit-section h3,
.crossfit-section h4,
.crossfit-section h5,
.crossfit-section h6 {
    color: #000 !important;
    text-decoration: none !important;
}

/* Links neutral */
.crossfit-section a {
    color: inherit !important;
    text-decoration: underline;
}

/*############ FLEX-BLOCKS: BILD + TEXT ###########*/

.cf-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: 40px 0;
}

.cf-row.reverse {
    flex-direction: row-reverse;
}

/* Textspalte */
.cf-col-text {
    flex: 1;
    line-height: 1.7;
}

/* Bildspalte */
.cf-col-img img {
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.25s ease;
}

.cf-col-img img: {
    transform: scale(1.03);
}

/*############ MOBILE RESPONSIVE ###########*/

@media (max-width: 768px) {
    .cf-row,
    .cf-row.reverse {
        flex-direction: column;
    }

    .cf-col-img img {
        max-width: 100%;
    }
}





/*########### TRAININGSPLAN ############*/ .gg-title { text-align: center; font-size: 2rem; color: #d4af37; margin-bottom: 20px; } /* Wrapper */ .gg-table-wrapper { width: 100%; overflow-x: auto; padding: 12px; background: #f4f4f4; border-radius: 20px; box-shadow: 0 4px 25px rgba(0,0,0,0.12); } /* Tabelle */ .gg-table { width: 100%; border-collapse: separate; /* für runde AUSSEN */ border-spacing: 0; max-width: 1100px; margin: 0 auto; font-size: 0.95rem; border-radius: 20px; /* außen rund */ overflow: hidden; /* innen flach */ } /* Tabellenkopf */ .gg-table th { background: linear-gradient(135deg, #222, #000); color: #d4af37; padding: 14px 10px; text-align: center; font-size: 1.1rem; border-right: 1px solid #333; border-bottom: 2px solid #d4af37; } /* Rundung NUR außen oben */ .gg-table th:first-child { border-top-left-radius: 20px; } .gg-table th:last-child { border-top-right-radius: 20px; } /* Zellen */ .gg-table td { vertical-align: top; padding: 14px 10px; background: #1e1e1e; color: #fff; border-right: 1px solid #333; border-bottom: 1px solid #333; } /* Abwechselnde Zeilen – leichte Grauvariation */ .gg-table tr:nth-child(odd) td { background: #262626; } /* Keine Rundungen innen! */ .gg-table td { border-radius: 0; } /* Rundung NUR außen unten */ .gg-table tr:last-child td:first-child { border-bottom-left-radius: 20px; } .gg-table tr:last-child td:last-child { border-bottom-right-radius: 20px; } /* Leere Felder */ .gg-table td:empty { background: #ccc; border: none; } /* Kein Hover! */ .gg-table td:hover { background: inherit; transform: none; } /* Mobile */ @media (max-width: 900px) { .gg-table th, .gg-table td { font-size: 0.8rem; padding: 8px 6px; } } @media (max-width: 600px) { .gg-table { font-size: 0.75rem; } } /* Hover-Effekte komplett abschalten – absolut */ .gg-table td:hover, .gg-table th:hover, .gg-table-wrapper:hover, .gg-table tr:hover, .gg-table *:hover { background: inherit !important; color: inherit !important; transform: none !important; box-shadow: none !important; filter: none !important; cursor: default !important; } 



/*############## MITGLIEDSCHAFT ################# */ .gg-title { text-align: center; font-size: 2rem; color: #d4af37; margin-bottom: 10px; } .gg-subtext { text-align: center; margin-bottom: 20px; font-size: 1rem; color: #444; } /* Wrapper (mit Rundung + Schatten) */ .gg-membership-wrapper { width: 100%; overflow-x: auto; margin-top: 10px; padding: 10px; border-radius: 18px; background: #fafafa; box-shadow: 0 4px 22px rgba(0,0,0,0.12); } /* Tabelle */ .gg-membership { width: 100%; border-collapse: separate; /* erlaubt Rundungen */ border-spacing: 0; min-width: 900px; border-radius: 18px; overflow: hidden; } /* Tabellenkopf */ .gg-membership th { background: #111; color: #d4af37; padding: 14px; font-size: 1.1rem; text-align: center; border-right: 1px solid #333; } /* Zellen */ .gg-membership td { padding: 14px; text-align: center; background: #f7f7f7; font-size: 0.95rem; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; } /* Abwechselnde Zeilen */ .gg-membership tr:nth-child(odd) td { background: #f0f0f0; } /* Abgerundete Ecken */ .gg-membership th:first-child { border-top-left-radius: 18px; } .gg-membership th:last-child { border-top-right-radius: 18px; } .gg-membership tr:last-child td:first-child { border-bottom-left-radius: 18px; } .gg-membership tr:last-child td:last-child { border-bottom-right-radius: 18px; } /* Mobile */ @media (max-width: 600px) { .gg-membership td, .gg-membership th { font-size: 0.85rem; padding: 10px; } } 
/*############# UEBER UNS ################## */ /* Intro Container */ .gg-intro { max-width: 60%; margin: 0 auto; text-align: left; font-size: 1.15rem; line-height: 1.75; padding: 20px 0; } /* Optional: Logo */ .gg-intro-logo { display: block; margin: 0 auto 20px auto; max-width: 160px; opacity: 0.95; } /* Überschriften */ .gg-intro h2 { text-align: center; margin-bottom: 15px; font-size: 2rem; color: #d4af37; font-weight: 700; } .gg-intro h3 { margin-top: 25px; margin-bottom: 8px; font-size: 1.4rem; color: #222; border-bottom: 2px solid #222; display: inline-block; padding-bottom: 3px; } /* Paragraphen */ .gg-intro p { margin-bottom: 15px; color: #222; } /* Mobile */ @media (max-width: 800px) { .gg-intro { max-width: 90%; font-size: 1rem; } } /*#

/* ######## BACKGROUND ########### */

/* ============================
   GLOBAL BACKGROUND
   ============================ */
body {
    background-color: #000 !important; /* kompletter Hintergrund schwarz */
}

/* Hintergrundbild rechts & links */
body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/backgroundeyecatch.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 2500px;
    z-index: -1; /* hinter allem */
    opacity: 1;
}


/* ============================
   WEISSER CONTENT-BLOCK
   ============================ */
#sp-main-body {
    max-width: 1200px;
    margin: 40px auto;
    background: #fff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 0 40px rgba(0,0,0,0.35);
   
    z-index: 2;
}

/* Helix Container im Body NICHT kleiner machen */
#sp-main-body .container {
    width: 100% !important;
    max-width: 100% !important;
}


/* ============================
   FOOTER & BOTTOM VOLL BREITE
   ============================ */


/* Inhalt IM Bottom/Footer zentriert */
#sp-bottom .sp-module,
#sp-footer .sp-module {
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
}

/*############ ButtonCards ############## */

/* ============================
   Bottom Cards (schmaler + kompakter)
   ============================ */


.gg-card {
    flex: 1;
    background: #1a1a1a;
    padding: 14px 10px; /* weniger Innenabstand */
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border: 1px solid #333;
    min-height: 95px;  /* SCHMALER / NICHT HOCH */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gg-card-icon {
    font-size: 22px; /* kleiner */
    margin-bottom: 5px;
    opacity: 0.9;
}

.gg-card p {
    margin: 0;
    font-size: 0.95rem;  /* kleinerer Text */
    font-weight: 500;
}



/* Mobile */
@media (max-width: 768px) {
    .gg-bottom-cards {
        flex-direction: column;
        max-width: 100%; /* auf Mobil komplett nutzen */
    }
}


/*#######          privatetraining ######### */



.pt-block {
    max-width: 70%;
    margin-left: 0; 
    margin-right: auto;
    padding: 20px;
    line-height: 1.6;
}
.pt-block h2, 
.pt-block h3 {
    margin-top: 10px;
    margin-bottom: 15px;
}

/*############## DAS GYM ###################### */ /* Horizontale Scroll-Galerie */

.gg-slider {
    position: relative;
    width: 100%;
    /*max-width: 900px; */
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
    background: #000;
}

.gg-slide-track {
    display: flex;
    transition: transform 0.6s ease;
    width: 100%;
    height: 100%;
}

.gg-slide-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    flex-shrink: 0;
}

.gg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    color: white;
    text-shadow: 0 0 10px black;
    cursor: pointer;
    user-select: none;
    padding: 5px 15px;
    z-index: 10;
}

.gg-arrow.left { left: 10px; }
.gg-arrow.right { right: 10px; }


/*############### HEADER #############*/

#sp-header { padding-left: 0 !important; padding-right: 0 !important; } #sp-header .container, #sp-header .row { margin-left: auto !important; margin-right: auto !important; } #sp-menu { margin-left: -39px; /* Feintuning möglich */ } #sp-logo { margin-left: -10px; /* anpassen bis es perfekt sitzt */ } #sp-header { background-color: #7A0000 !important; } 

/* Schriftart & Grundformatierung */
#sp-menu a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; /* etwas größer */
    color: #F3F3F3 !important; /* helles weißlich-grau – kein Blau, kein Schwarz */
    letter-spacing: 0.5px;
}

/* Hover-Farbe */
#sp-menu a:hover {
    color: #D4AF37 !important; /* edles Gold */
}

#sp-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
#sp-menu {
    margin-top: -10px !important; /* bis es passt anpassen */
}

/* Dropdown-Text im Menü schwarz */
#sp-header .sp-dropdown .sp-dropdown-inner ul li > a,
#sp-header .sp-dropdown li > a {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Hover-Farbe im Dropdown – Gold wie oben */
#sp-header .sp-dropdown .sp-dropdown-inner ul li > a:hover,
#sp-header .sp-dropdown li > a:hover {
    color: #D4AF37 !important;
}

/* Normal: schwarz */
#offcanvas-menu li a,
#mobile-menu li a,
.offcanvas-inner li a {
    color: #000000 !important;
}

/* Hover + Active: Weinrot */
#offcanvas-menu li a:hover,
#mobile-menu li a:hover,
.offcanvas-inner li a:hover,
#offcanvas-menu li.active > a,
#mobile-menu li.active > a,
.offcanvas-inner li.active > a {
    color: #7A0000 !important;
}

/* Entfernt das Helix-Blau aus <span> oder <strong>-Elementen */
#offcanvas-menu li a span,
#mobile-menu li a span,
.offcanvas-inner li a span {
    color: inherit !important;
}


/* Versteckt Social Icons nur im Inhaltsbereich */
#sp-main-body .article-ratings-social-share,
#sp-main-body .article-social-share,
#sp-main-body .social-share-icon {
    display: none !important;
}



/*############### kampfsoport ##########*/
.top-image {
    float: right;
    margin: 0 0 20px 20px;
    width: 220px; /* oder deine Wunschgröße */
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}


.top-image-1,
.top-image-2,
.top-image-3 {
    float: right;
    width: 260px;
    height: auto;
    margin: 0 0 20px 25px;
    border-radius: 6px;
    object-fit: cover;
}

.clearfix {
    clear: both;
}

/* Rechtes Bild oben */
.top-image-anfaenger {
    float: right;
    width: 280px;
    height: auto;
    margin: 0 0 20px 25px;
    border-radius: 6px;
    object-fit: cover;
}

/* Linkes Bild unten */
.left-image-ausrustung {
    float: left;
    width: 260px;
    height: auto;
    margin: 0 25px 20px 0;
    border-radius: 6px;
    object-fit: cover;
}

.clearfix {
    clear: both;
}

.top-image-fort-1 {
    float: right;
    width: 360px;
    height: auto;
    margin: 0 0 20px 25px;
    border-radius: 6px;
    object-fit: cover;
}

.left-image-fort-2 {
    float: left !important;
    width: 300px !important;
    margin: 0 25px 20px 0 !important;
    display: block !important;
}

.first-paragraph-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.first-paragraph-wrapper img {
    max-width: 300px;
    height: auto;
}
.first-paragraph-wrapper p {
    flex: 1;
}
.frauen-firstblock {
    display: flex !important;
    gap: 25px !important;
    align-items: flex-start !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}
.frauen-firstblock .textblock {
    flex: 1 !important;
}
.frauen-firstblock img {
    max-width: 330px !important;
    height: auto !important;
    display: block !important;
    float: none !important;
}

@media (max-width: 768px) {
    .pt-block {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
         padding: 20px; /* oder center – wie du willst */
    }
}

/*#########  FOOTER  #############*/

.gg-bottom-cards {
    display: flex !important;
    justify-content: right;
    gap: 25px;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto; }
    
    .gg-card-icon {
    width: 28px;       /* Logo kleiner */
    height: auto;
    display: block;
    margin: 0 auto 6px auto;   /* zentriert + kleiner Abstand zum Text */
    opacity: 0.9;
}


.gg-footer-contact {
    text-align: right;
}

.gg-footer-logo {
    width: 120px;   /* hier Größe anpassen */
    height: auto;
    margin-bottom: 10px;
    
}

.gg-footer-contact img.gg-footer-logo {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

#sp-footer .container-inner .row > div#sp-footer1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* schiebt Inhalt ganz nach unten */
}



    
    /*################### mai gallere ###################### */
    
.gg-home-slider {
    width: 98%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.gg-home-slide-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%;
}

.gg-home-slider .slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}

.gg-home-slider .slide img {
    width: 100%;   /* Bild wird z. B. 80% breit */
    height: auto;
}

.gg-home-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.gg-home-slider-inner {
    position: relative;
    width: 100%;
}

.gg-home-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    cursor: pointer;
    z-index: 9999;
    color: white;
    user-select: none;
    padding: 10px;
}

.gg-home-arrow.left {
    left: 20px;
}

.gg-home-arrow.right {
    right: 20px;
}
/* ############### MAIN REST ################## */
.gg-introbar {
    background: #2c2c2c;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    font-size: 18px;
}
.gg-introbar h2 {
    margin-bottom: 20px;
    font-weight: 400;
}

.gg-section-white {
    background: #e5e5e5;
    padding: 40px 20px;
    color: #333;
}
.gg-section-white h2 {
    margin-bottom: 20px;
}

.gg-home-features {
    display: flex;
    justify-content: space-around;
    background: #fff ;
    padding: 40px 20px;
    text-align: center;
}
.gg-home-features .feature {
    width: 30%;
}
.gg-home-features .icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.gg-home-quote {
    text-align: center;
    padding: 40px 20px;
    font-size: 30px;        /* größere Schrift */
    font-style: italic;
    color: #555;
    background: #f4f4f4;
    letter-spacing: 0.5px;  /* leichte Eleganz */
}


.gg-home-bottom-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
    background: #fff;
}
.gg-home-bottom-gallery img {
    width: 200px;
    height: auto;
    border-radius: 3px;
}
.gg-home-endingtext {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
}

.gg-home-endingtext h3 {
    margin-bottom: 20px;
}


.gg-home-features .feature {
    width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gg-home-features .feature img {
    width: 60px;      /* gewünschte Größe */
    height: auto;
    margin-bottom: 15px; /* Abstand zum Titel */
}



/*############  of canvas mob ile menu navigation ############## */

/* Abstand + sichtbare Trennlinien im Offcanvas-Menü */
.offcanvas-menu .mod-menu li > a {
    display: block;
    padding: 14px 0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
}

/* Letzter Eintrag ohne Linie */
.offcanvas-menu .mod-menu li:last-child > a {
    border-bottom: none !important;
}

/* Mehr Abstand zum Rand */
.offcanvas-menu .offcanvas-inner {
    padding-left: 22px;
    padding-right: 22px;
}


/* ===== Mobile Fix für Fitness – Fightevents – Kampfsport ===== */
@media (max-width: 768px) {

    .gg-home-features {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 30px 10px;
    }

    .gg-home-features .feature {
        width: 100%;
        max-width: 350px;   /* schön zentriert, nicht zu breit */
        text-align: center;
    }

    .gg-home-features .feature img {
        width: 65px;
        margin-bottom: 10px;
    }

    .gg-home-features .feature h3 {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .gg-home-features .feature p {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 10px;
    }
}

/*################### navigation fix 1417px######################## */

@media (max-width: 1617px) {
    /* Desktop-Menü verstecken */
    #sp-menu .sp-megamenu-parent {
        display: none !important;
    }

    /* Hamburger-Button aktivieren */
    #offcanvas-toggler {
        display: block !important;
    }
}

/*################# MOBILE MODUS ANPASSEN ###################### */

@media (max-width: 768px) {
    #sp-main-body {
        padding: 10px !important;   /* statt 40px → viel mehr Platz */
    }
}
@media (max-width: 768px) {
    .container,
    .sppb-container,
    .sppb-row-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    .gg-home-slider {
        width: 100% !important;         /* statt 98% */
        max-width: 100% !important;
    }
    .gg-home-slide-track img {
        width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 768px) {

    .gg-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gg-slide-track img {
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

@media (max-width: 768px) {
    .gg-home-bottom-gallery {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 10px;
    }

    .gg-home-bottom-gallery img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
}

/* ===========================
   MOBILE – untereinander
   =========================== */
@media (max-width: 767px) {

    #sp-footer .row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 10px 15px;
    }

    #sp-footer1 { order: 2; }
    #sp-footer2 { order: 1; }

    #sp-footer1,
    #sp-footer2 {
        width: 100%;
        text-align: left;
    }
}

/* ===========================
   TABLET – nebeneinander
   =========================== */
@media (min-width: 768px) and (max-width: 1199px) {

    #sp-footer .row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: 15px 20px; /* <<< hier funktioniert dein rechtes Padding */
    }

    #sp-footer1,
    #sp-footer2 {
        width: 48%;
        text-align: left;
    }
}

/* Tablet: Impressum nach unten schieben */
@media (min-width: 768px) and (max-width: 1199px) {
    #sp-footer1 {
        margin-top: auto !important;
    }
}