@font-face {
    font-family: 'Cord Bold';
    src: url('fonts/Cord-Bold.eot');
    src: url('fonts/Cord-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cord-Bold.woff2') format('woff2'),
        url('fonts/Cord-Bold.woff') format('woff'),
        url('fonts/Cord-Bold.svg#Cord-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Bold';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff'),
        url('fonts/OpenSans-Bold.ttf') format('truetype'),
        url('fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff'),
        url('fonts/OpenSans-Regular.ttf') format('truetype'),
        url('fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





/* VARIABLEN ####################################################### */

:root {

    --headlines: 'Open Sans Bold';
    --mengentext: 'Open Sans';
    --fetttext: 'Open Sans Bold';

    --FS-Navigtion: clamp(1.375rem, 1.004rem + 0.5984vw, 2.5rem);
    --FS-BigLine: clamp(1.875rem, 1.2566rem + 0.9973vw, 3.75rem);

    --weiss: #fff;
    --darkBlue: #122A47;
    --lightBlue: #266ea9;
    --fb: #3b5998;
    --x: #1da1f2;
    --insta: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram Farbverlauf */

}

/* END VARIABLEN ####################################################### */

/* ALLGEMEIN ####################################################### */

body {
    font-family: var(--mengentext);
}

strong, b {
    font-family: var(--fetttext);
}

h1, h2 {
    font-family: var(--headlines);
}

h3 {
    font-family: var(--fetttext);
}

/* END ALLGEMEIN ####################################################### */

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

#sp-menu > div > nav > ul > li > a {
    font-family: var(--headlines);
    text-transform: uppercase;
    font-size: var(--FS-Navigtion);
}

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

/* HEROSLIDER ####################################################### */

/* --- Slider-Container --- */
        .hero-slider {
            position: relative;
            width: 100%;
            max-width: 1920px;
            height: 670px;
            margin: 0 auto;
            overflow: hidden;
        }

        /* --- Responsivität für Mobile --- */
        @media (max-width: 768px) {
            .hero-slider {
                height: 400px;
            }
        }

        /* --- Slides --- */
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }

        .slide.active {
            opacity: 1;
        }

        /* --- Text in der Mitte --- */
        .slider-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
        }

        .slider-text h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .slider-text h2 {
            font-size: 1.8rem;
            font-weight: 300;
        }

        /* --- Pfeil-Navigation --- */
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: black;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s, background 0.3s;
        }

        .hero-slider:hover .slider-arrow {
            opacity: 1;
        }

        .slider-arrow:hover {
            background: rgba(255, 255, 255, 0.9);
        }

        .arrow-left {
            left: 20px;
        }

        .arrow-right {
            right: 20px;
        }


/* END HEROSLIDER ####################################################### */

/* PARALLAXSECTION ####################################################### */

.bigLine {
    font-size: var(--FS-BigLine);
    font-family: var(--fetttext);
    color: var(--weiss);
}

.smallLine {
    font-family: var(--fetttext);
    color: var(--weiss);
}

/* END PARALLAXSECTION ####################################################### */

/* STICKY SIDEBAR ############################################ */

/* Grundlegendes Styling für die Sidebar */
.sidebar {
    position: fixed; /* Sticky-Effekt */
    top: 50%; /* Zentriert vertikal */
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px 0 0;
    z-index: 1000;
}

/* Styling der Buttons */
.sidebar .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 10px 0 0 0;
    background-color: var(--darkBlue);
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Facebook-Button */
.sidebar .facebook,
.sidebar .facebook:hover {
    background-color: var(--fb);
    color: var(--weiss);
}

/* Instagram-Button */
.sidebar .instagram,
.sidebar .instagram:hover {
    background: var(--insta);
    color: var(--weiss);
}


/* Hover-Effekte */
.sidebar .button:hover {
    transform: scale(1.1);
}

/* Icons Styling */
.sidebar .button i {
    font-size: 20px;
    color: var(--weiss);
}

@media (max-width: 768px) {
    .sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%; /* Sidebar nimmt die gesamte Breite des Bildschirms ein */
        flex-direction: row; /* Buttons nebeneinander anordnen */
        justify-content: space-between; /* Buttons gleichmäßig verteilen */
        padding: 0;
        background-color: transparent; /* Hintergrund der Sidebar entfernen */
        box-shadow: none;
        border-radius: 0;
    }

    .sidebar a {
        width: 100%;
    }

    .sidebar .button {
        width: 100%!important; /* Jeder Button nimmt 20% der Breite ein */
        height: 50px; /* Höhe beibehalten */
        margin: 0; /* Abstände zwischen den Buttons entfernen */
        border-radius: 0; /* Abgerundete Ecken entfernen */
        box-shadow: none; /* Schatten entfernen */
        border-left: 1px solid #fff;
    }

    .sidebar .button:first-child {
        border-left: 0;
    }

    .sidebar .button i {
        font-size: 18px;
    }

}

/* END STICKY SIDEBAR ######################################## */

/* HOVERBOXEN VORSTAND ####################################################### */

.sb__hoverBoxes {
    transition: .7s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.sb__hoverBoxes:hover {
    scale: 1.03;
    transition: .3s;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/* END HOVERBOXEN VORSTAND ####################################################### */

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

#sp-footer {
    color: var(--weiss);
}

#sp-footer a {
    color: var(--weiss);
    text-decoration: underline;
}

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

/* ORTSCLUB LOGO ####################################################### */

 li .sp-menu-separator img {
     max-width: 120px;
 }

/* END CUSTOM ####################################################### */

/* OSDOWNLOADS ####################################################### */

.btn_download > a {
    background-color: var(--darkBlue);
    color: var(--weiss);
    font-size: var(--mengentext);
    font-family: var(--fetttext);
    width: 100%;
    display: block;
    border-radius: 0;
}

.btn_download > a:hover {
    background-color: var(--lightBlue);
    color: var(--weiss);
}

.mod_osdownloadsfiles ul {
    display: flex;
    flex-wrap: wrap; /* Damit sie umgebrochen werden, falls nicht genug Platz ist */
    gap: 20px; /* Abstand zwischen den Elementen */
    padding: 0;
    list-style: none;
}

.mod_osdownloadsfiles li {
    flex: 1 1 calc(50% - 10px); /* 50% Breite minus Abstand */
    max-width: 40%;
    box-sizing: border-box;
    text-align: left;
    padding: 30px!important;
    background-color: var(--weiss);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 0!important;
    transition: .7s;
}

.mod_osdownloadsfiles li:hover {
    scale: 1.03;
    transition: .3s;
     box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }

/* Auf Mobilgeräten untereinander */
@media (max-width: 768px) {
    .mod_osdownloadsfiles li {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


/* END OSDOWNLOADS ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */

/* CUSTOM ####################################################### */

/* END CUSTOM ####################################################### */