@font-face {
    font-family: 'Josefin Sans'; /* Beliebiger Name für die Schrift */
    src: url('../fonts/Josefin_Sans/static/JosefinSans-Regular.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat'; /* Beliebiger Name für die Schrift */
    src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Hauptfarben und Akzentfarben */
:root {
    --primary-color: #0395ba;
    --secondary-color: #81cadd;
    --tertiary-color: #3a3b53;
    --accent-color: #b0d25b;
    --accent-color-2: #d26386;
}

/* Schriftarten */
body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', sans-serif;
}

/* Navbar-Hintergrundfarbe */
.bg-primary-custom {
    background-color: var(--primary-color) !important;
}

/* Sekundäre Hintergrundfarbe (für den Footer) */
.bg-secondary-custom {
    background-color: var(--secondary-color) !important;
}

/* Navbar-Hintergrundfarbe */
.bg-primary-custom {
    background-color: var(--primary-color) !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}


.header-image {
    margin-top: 44px; /* Platzhalter für die Höhe der Navbar */
    background: url('../images/header-bg-2.jpg') no-repeat center center;
    background-size: cover;
    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: var(--primary-color);
    padding: 20px;
}

/* Handy-Bild */
.header-image-container img {
    max-width: 70%; 
    height: auto;
    padding-top: 0; 
    display: block;
    margin: 0 auto; 
}

/* Anpassung für größere Bildschirme */
@media (min-width: 768px) {

    .header-image {
        margin-top: 44px; /* Platzhalter für die Höhe der Navbar */
        background: url('../images/header-bg-2.jpg') no-repeat center center;
        background-size: cover;
        background-position: 50% 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: var(--primary-color);
        padding: 20px;
    }

    /* Handy-Bild */
    .header-image-container img {
        max-width: 245px;
        padding-top: 195px;
        height: auto;
    }

}



/* Header-Text */
.header-content {
    max-width: 600px;
    margin-bottom: 20px;
}

.header-image h1 {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.header-text {
    font-size: 1.2rem;
    margin: 0.2rem 0;
}


/* Textfarben */
.text-primary-custom {
    color: var(--primary-color);
}

.text-tertiary-custom {
    color: var(--tertiary-color);
}

/* Akzentfarbe für Buttons */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.btn-accent:hover {
    background-color: var(--accent-color-2);
    border-color: var(--accent-color-2);
    color: white;
}


/* Footer Links Hover-Effekt */
footer a:hover {
    color: var(--accent-color-2); /* Links ändern die Farbe beim Hover */
    transition: color 0.3s ease;
}

/* Footer Text */
footer p {
    color: var(--tertiary-color);
    margin-bottom: 0;
}