/* Custom Styles für spezifische Anpassungen */

/* Plan-Button mit rotem Hintergrund und weißer Schrift */
.plan-button {
    background-color: #ff0000 !important; /* Kräftiges Rot */
    color: #ffffff !important; /* Weiße Schrift */
    border: 1px solid #ff0000 !important;
}

/* Hover-Effekte beibehalten */
.plan-button:hover {
    background-color: #cc0000 !important; /* Dunkleres Rot beim Hover */
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-3px) !important;
}

/* Active-Zustand */
.plan-button:active {
    transform: translateY(0) !important;
}

/* Focus-Zustand */
.plan-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.4) !important;
}

/* Navigation Styles - Farben für Navigation-Links */

/* Standard-Farbe für alle Navigationselemente ist weiß */
.nav-links a, .nav-primary .nav-item {
    color: var(--color-white) !important;
    transition: color 0.3s ease;
}

/* Hover-Effekt für Navigationselemente */
.nav-links a:hover, .nav-primary .nav-item:hover {
    color: var(--color-primary-light) !important;
}

/* Aktives Navigationselement - rot */
.nav-links a.active, .nav-primary .nav-item.active {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold);
}

/* Bei gescrolltem Header kann die Farbe der Navigation angepasst werden */
.header.scrolled .nav-links a, .header.scrolled .nav-primary .nav-item {
    color: var(--color-gray-800) !important;
}

.header.scrolled .nav-links a.active, .header.scrolled .nav-primary .nav-item.active {
    color: var(--color-primary) !important;
}

/* Logo-Container im Header */
.header .logo-nav-container {
    align-items: center !important; /* Vertikal mittig */
    justify-content: space-between !important; /* Logo links, Navigation rechts */
    padding: 0 var(--spacing-lg); /* Etwas Abstand nach außen */
}

/* Logo-Anpassungen im Header - Übereinstimmung mit Footer-Logo */
.header .logo,
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 1.2;
}

/* Gemeinsame Styles für die Logo-Textteile */
.header .logo .luciano,
.header .logo .fitness,
.header .logo .coaching,
.footer-logo .luciano,
.footer-logo .fitness,
.footer-logo .coaching {
    font-family: var(--font-family-heading);
    text-transform: uppercase;
}

/* Luciano - größter Teil des Logos */
.header .logo .luciano,
.footer-logo .luciano {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-white);
}

/* Fitness - in Rot hervorgehoben */
.header .logo .fitness,
.footer-logo .fitness {
    font-size: var(--font-size-xl);
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
    margin: 0.1rem 0;
}

/* Coaching - am kleinsten */
.header .logo .coaching,
.footer-logo .coaching {
    font-size: var(--font-size-lg);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

/* Footer-Logo auf Desktop anzeigen, auf Mobile ausblenden */
@media (max-width: 768px) {
    .footer-logo {
        display: none !important;
    }
    
    .header .logo .luciano,
    .footer-logo .luciano {
        font-size: var(--font-size-xl);
    }
    
    .header .logo .fitness,
    .footer-logo .fitness,
    .header .logo .coaching,
    .footer-logo .coaching {
        font-size: var(--font-size-lg);
    }
}

/* Navigation rechts mit vertikaler Zentrierung */
.header nav {
    display: flex;
    justify-content: flex-end; /* Ausrichtung rechts */
    align-items: center; /* Vertikal zentriert */
}

.header .nav-links {
    display: flex;
    justify-content: flex-end; /* Rechts ausgerichtet */
    align-items: center; /* Vertikal zentriert */
    gap: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Media Queries für responsive Anpassungen */

/* Desktop-Navigation auf mobilen Geräten ausblenden */
@media screen and (max-width: 992px) {
    .header nav {
        display: none; /* Desktop-Navigation ausblenden */
    }
}

/* Mobile-Navigation nur auf kleinen Bildschirmen anzeigen */
@media screen and (min-width: 993px) {
    .mobile-nav {
        display: none !important; /* Mobile-Navigation auf Desktop ausblenden */
    }
}

/* Hero Swiper Styles */
.hero {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9); /* Helligkeit leicht reduzieren */
}

.content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
}

.content-wrapper h1 {
    font-size: 3.5rem;
    margin: 0 0 20px;
    text-transform: uppercase;
    line-height: 1.2;
}

.content-wrapper h2 {
    font-size: 1.8rem;
    margin: 0 0 30px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Swiper Navigations-Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 0, 0, 0.8);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem !important;
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background-color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .content-wrapper h1 {
        font-size: 2.5rem;
    }

    .content-wrapper h2 {
        font-size: 1.4rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 1.2rem !important;
    }
    
    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Verstecke Navigation auf Touch-Geräten */
@media (hover: none) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* Parallax-Effekt für Bilder und Inhalte - deaktiviert für GSAP */
.about-image {
    overflow: hidden;
    position: relative;
    /* GSAP übernimmt jetzt den Parallax-Effekt */
}

.about-image img {
    /* CSS-Transformationen deaktiviert, damit GSAP übernehmen kann */
    /* transform: translateY(0); */
    /* transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); */
    will-change: transform;
    backface-visibility: hidden;
}

.about-content {
    /* CSS-Transformationen deaktiviert, damit GSAP übernehmen kann */
    /* transform: translateY(0); */
    /* transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); */
    will-change: transform;
    backface-visibility: hidden;
}

/* Diese Regeln werden nicht mehr benötigt, da GSAP jetzt den Scrolling-Effekt steuert */
/* Während des Scrollens den Parallax-Effekt aktivieren - sofortiger Übergang */
.scrolling .about-image img,
.scrolling .about-content {
    /* transition: none !important; */
    /* animation-play-state: paused !important; */
}

/* Komplettes Stoppen bei Scroll-Ende - stärkere Spezifität */
body:not(.scrolling) .about-image img,
body:not(.scrolling) .about-content {
    /* transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important; */
}

/* Alle Parallax-Effekte stoppen, wenn nicht gescrollt wird */
body:not(.scrolling) * {
    /* animation-play-state: paused !important; */
}

/* Hero Parallax-Animation entfernen, da dies nun von Swiper übernommen wird */
.hero-swiper .slide-image {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.scrolling .hero-swiper .slide-image {
    transition: none !important;
}

/* Diese Pagination- und Navigationsstile werden nicht mehr benötigt */
.hero-pagination, .hero-dot, .hero-dot.active, 
.hero-prev, .hero-next, .hero-prev:hover, .hero-next:hover {
    /* Diese Stile werden entfernt, da Swiper seine eigenen mitbringt */
}

@media (max-width: 768px) {
    .hero-prev, .hero-next, .hero-dot {
        /* Diese mobilen Stile werden entfernt */
    }
}

/* Kontaktinformationen Styling */
.contact-info {
    margin-top: 2rem;
}

.contact-info .left-aligned-title {
    margin-bottom: 1.5rem;
}

.contact-info .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
}

.contact-info .info-item i {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-right: 1rem;
    width: 1.5rem;
    text-align: center;
}

.contact-info .info-content h4 {
    margin: 0;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--color-white);
    position: relative;
    padding-bottom: 10px;
}

.contact-info .info-content p {
    margin: 0;
    color: var(--color-white);
}

/* Rote Linien unter den Überschriften */
.info-item h3::after, .info-item h4::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-primary);
    transition: width .3s ease;
}

/* Mobile Grid für Kontaktinformationen */
@media (max-width: 768px) {
    .contact-info {
        margin-top: 1.5rem;
    }
    
    .contact-info .left-aligned-title {
        text-align: center;
        margin-bottom: 1rem;
        display: none;
    }
    
    .contact-info-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .contact-info .info-item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: transparent;
        text-align: left;
        width: 100%;
    }
    
    .contact-info .info-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .contact-info .info-item i {
        color: var(--color-primary);
        font-size: 1.5rem;
        margin-right: 15px;
        margin-bottom: 0;
        min-width: 24px;
        text-align: center;
        background-color: transparent;
    }
    
    .contact-info .info-item i:after {
        display: none;
    }
    
    .contact-info .info-content {
        width: 100%;
        text-align: left;
    }
    
    .contact-info .info-content h4 {
        font-size: 1rem;
        margin: 0 0 5px 0;
        color: var(--color-white);
        text-transform: none;
        font-weight: 500;
        padding-bottom: 0;
    }
    
    .contact-info .info-item h3::after, 
    .contact-info .info-item h4::after {
        display: none;
    }
    
    .contact-info .info-content p,
    .contact-info .info-content a {
        font-size: 0.95rem;
        color: var(--color-white);
        line-height: 1.4;
        margin: 0;
    }
} 

/* Mobile Footer-Legal-Links nebeneinander */
@media (max-width: 768px) {
    /* Footer auf mobilen Geräten optimieren */
    .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten statt 2 */
        gap: 1rem;
    }
    
    .footer {
        text-align: center;
        padding-bottom: 80px; /* Platz für mobile Navigation */
        border-top: 2px solid var(--color-primary); /* Rote Linie am oberen Rand */
    }
    
    .footer-logo {
        grid-column: 1 / -1; /* Logo über alle Spalten */
        margin-bottom: 0; /* Kein Abstand mehr nötig */
        display: none; /* Logo komplett ausblenden */
    }
    
    /* Social-Icons neu positionieren */
    .footer-social {
        grid-column: 1 / 2; /* Erste Spalte */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Kontakt und rechtliche Infos - Höhen angleichen */
    .footer-contact,
    .footer-legal,
    .footer-social {
        display: flex;
        flex-direction: column;
        min-height: 180px; /* Feste Mindesthöhe für alle Spalten */
    }
    
    .footer-contact {
        grid-column: 2 / 3; /* Mittlere Spalte */
        text-align: center;
        align-items: center;
    }
    
    .footer-legal {
        grid-column: 3 / 4; /* Rechte Spalte */
        text-align: center;
        justify-content: flex-start; /* Vom oberen Rand starten */
    }
    
    /* Footer-Überschriften auf gleicher Höhe ausrichten */
    .footer-contact h3,
    .footer-legal h3 {
        margin-top: 0;
        margin-bottom: 15px;
        padding-bottom: 10px;
        height: 30px; /* Feste Höhe für alle Überschriften */
        line-height: 30px; /* Gleiche Zeilenhöhe */
        position: relative;
        display: flex;
        align-items: center;
    }
    
    /* Inhaltscontainer mit gleichem Abstand von oben */
    .footer-contact-content,
    .footer-legal ul {
        margin-top: 25px; /* Gleicher Abstand nach den Überschriften */
    }
    
    /* Überschriften für alle Spalten identisch */
    .footer-contact h3,
    .footer-legal h3,
    .footer-social h3 {
        text-align: center;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 15px;
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: normal;
        color: var(--color-white);
        height: 30px; /* Feste Höhe für alle Überschriften */
    }
    
    /* Rote Linie unter den Überschriften */
    .footer-contact h3:after,
    .footer-legal h3:after,
    .footer-social h3:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background-color: var(--color-primary);
    }
    
    /* Inhaltscontainer für gleichmäßige Höhen */
    .footer-contact-content,
    .footer-legal ul,
    .footer-social-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Vom oberen Rand starten */
        margin-top: 0;
    }
    
    /* Social-Icons im Kreis anzeigen */
    .social-icons {
        margin: 6px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px; /* Gleiche Höhe wie Kontakt-Icons und rechtliche Links */
    }
    
    .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #222;
        border-radius: 50%;
        margin: 0;
        position: relative;
        overflow: hidden;
    }
    
    /* Grundstyling für Icons - Animation wird durch GSAP gesteuert */
    .social-icons i {
        font-size: 1.2rem;
        color: var(--color-white);
        transition: color 0.3s ease;
    }
    
    /* Hover-Effekt bleibt unabhängig von der Animation */
    .social-icons:hover i {
        color: var(--color-primary);
    }
    
    /* Heart-shaped background effect */
    .social-icons a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        background-color: var(--color-primary);
        opacity: 0;
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
        z-index: -1;
        transition: all 0.3s ease;
    }
    
    .social-icons a:hover::before {
        opacity: 0.2;
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }
    
    /* Icons formatieren */
    .footer-contact p i {
        font-size: 1.4rem;
        color: var(--color-white);
        display: inline-block;
        padding: 8px;
        /* Animation entfernt - wird jetzt via GSAP gesteuert */
    }
    
    /* Verschiedene Verzögerungen für unterschiedliche Icons - entfernt, da GSAP übernimmt */
    .footer-contact p:nth-child(2) i {
        /* Verzögerung entfernt */
    }
    
    .footer-contact p:nth-child(3) i {
        /* Verzögerung entfernt */
    }
    
    /* Kontaktlink-Anpassungen */
    .footer-contact p a {
        color: var(--color-white);
        text-decoration: none;
        display: inline-block;
    }
    
    /* Link-Formatierung */
    .footer-legal ul li a {
        color: var(--color-white);
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    /* Copyright-Hinweis */
    .footer-bottom-layout {
        grid-column: 1 / -1;
        margin-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 15px;
        text-align: center;
    }
    
    .footer-bottom-layout p {
        font-size: 0.8rem;
        color: var(--color-gray-400);
    }
    
    /* Gleiche Abstände für Links und Icons */
    .footer-contact p,
    .footer-legal ul li {
        margin: 6px 0;
        height: 40px; /* Feste Höhe für Elemente */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Rechtliche Links anpassen */
    .footer-legal ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    /* Kontakt-Links mit Icon anzeigen */
    .footer-contact p span {
        display: none; /* Text ausblenden */
    }
} 

/* Doppelte Icons in Kontaktdaten ausblenden */
/* Aber Footer-Icons beibehalten */
.info-content p i,
p i.fa:not(.footer-contact p i.fa),
p i.fas:not(.footer-contact p i.fas),
p i.far:not(.footer-contact p i.far),
p i.fab:not(.footer-contact p i.fab),
.contact-text i,
.phone-text i,
.email-text i,
.address-text i,
.opening-hours-text i {
    display: none !important;
}

/* Footer-Icons explizit anzeigen */
.footer-contact p i,
.footer-social i,
.social-icons i {
    display: inline-block !important;
}

/* Falls spezifische Container für Telefon, E-Mail usw. existieren */
.phone-container i + i,
.email-container i + i,
.address-container i + i,
.opening-hours-container i + i {
    display: none !important;
}

/* Bei mehreren i-Tags in einem Container nur das erste behalten */
.contact-item i:not(:first-child),
.info-item i:not(:first-child) {
    display: none !important;
}

/* Rote Trennlinie für mobile Ansicht entfernen */
@media (max-width: 768px) {
    .left-aligned-title::after {
        display: none !important;
    }
} 

/* Kleines Logo im Social-Bereich des Footers */
.footer-logo-small {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 15px;
}

.footer-logo-small .luciano,
.footer-logo-small .fitness,
.footer-logo-small .coaching {
    font-family: var(--font-family-heading);
    text-transform: uppercase;
}

.footer-logo-small .luciano {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-white);
}

.footer-logo-small .fitness {
    font-size: var(--font-size-lg);
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
    margin: 0.1rem 0;
}

.footer-logo-small .coaching {
    font-size: var(--font-size-md);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

/* Footer-Logo auf Desktop anzeigen, auf Mobile ausblenden */
@media (max-width: 768px) {
    .footer-logo {
        display: none !important;
    }
    
    /* Kleinere Schriftgrößen auf mobilen Geräten */
    .footer-logo-small .luciano {
        font-size: var(--font-size-lg);
    }
    
    .footer-logo-small .fitness {
        font-size: var(--font-size-md);
    }
    
    .footer-logo-small .coaching {
        font-size: var(--font-size-sm);
    }
} 

/* Pagination */
.hero-pagination {
    display: none !important;
}

.hero-dot {
    display: none !important;
}

.hero-dot.active {
    display: none !important;
}

/* Navigation-Pfeile */
.hero-prev,
.hero-next {
    display: none !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .hero-prev,
    .hero-next {
        display: none !important;
    }
    
    .hero-dot {
        display: none !important;
    }
} 

/* Swiper Slide Overlay dunkler machen */
.swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dunklerer Overlay mit 50% Abdunklung */
    z-index: 1;
}

/* Hero Image Helligkeit reduzieren */
.swiper-slide .slide-image {
    filter: brightness(0.9); /* Helligkeit leicht reduzieren */
}