:root {
    --bs-primary: #f0f0f0;       /* Hauptfarbe */
    --bs-secondary: #262626;     /* Sekundärfarbe */
    --bs-success: #d9c5a0;       /* Grün für Erfolgsmeldungen */
    --bs-danger: #76ab87;        /* Rot für Fehlermeldungen */
    --bs-warning:#f8c741;       /* Gelb für Warnungen */
    --bs-info: #a8b5c3;          /* Türkis für Info-Elemente */
    --bs-light: #f0f0f0;;         /* Helles Grau für Hintergrund */
    --bs-dark: #262626;          /* Dunkles Grau für Texte/Hintergründe */

    --bs-btn-color: #f0f0f0;;        /* Standard-Button-Schriftfarbe */
    --bs-btn-bg: #f8c741;
}

@font-face {
    font-family: 'logofamily';
    src: url('./assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: var(--bs-light) !important;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--bs-primary) !important;
}

.navbar, .banner, .u_mich, .angebote, .card{
    background-color: var(--bs-dark) !important;
}

h2, h3, h4, p, li{
    color: var(--bs-primary) !important;
}

.u-texte{
    color: var(--bs-warning) !important;
}

.link{
    text-decoration: underline;
}

h6{
    color: var(--bs-warning) !important;
    font-weight: bolder;
}

.logo-text{
    font-size: 40px;
}

.logo-text-2{
    font-size: 48px;
}

.brand-subtext{
    font-size: 20px;
}

.logo{
    width: 7rem;
}

.logo-footer{
    width: 26rem;
}

.banner-bild{
    width: 20rem;
}

.p-kontaktdaten{
    color: var(--bs-primary) !important;
}

@media (max-width: 992px) {
    .logo-text{
        font-size: 28px;
    }
    
    .logo-text-2{
        font-size: 30px;
    }
    
    .brand-subtext{
        font-size: 10px;
    }

    .logo{
        width: 5rem;
    }
    
    .logo-footer{
        width: 24rem;
    }

    .banner-bild{
        width: 14rem;
    }
    .p-kontaktdaten{
        color: var(--bs-primary) !important;
        font-size: 16px !important
    }
}

a{
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.hair-packete{
    color: var(--bs-primary) !important;
    font-weight: bolder;
}

.btn-preis{
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
    font-weight: bolder;
}

.footer{
    background-color: var(--bs-secondary) !important;
}

.navbar {
    white-space: nowrap;
}

.nav-link{
    color: var(--bs-primary) !important;
}

.nav-link:hover{
    color: var(--bs-info) !important;
}

.logo-text{
    font-family: 'logofamily', sans-serif;
    color: var(--bs-warning) !important;
}

.brand-subtext{
    font-family: 'logofamily', sans-serif;
    color: var(--bs-warning) !important;
}

.text-block {
    line-height: 0.9;
    font-size: medium;
}

.top-banner{
    background-color: var(--bs-dark) !important;
    min-height: 42vh;
}

.banner-zitat{
    margin-top: 4rem;
    font-size: large;
}

.banner-slogan{
    margin-bottom: 2rem;
}

.banner-bild-haarschnitt{
    width: 20rem;
}

.banner-bild-beauty{
    width: 20rem;
}

.strich{
    color: var(--bs-primary) !important;
    width: 60%;
}

.pb{
    max-width: 20rem;
}

.text-mich{
    color: var(--bs-primary) !important;
}

.cont-mich{
    background-color: var(--bs-dark) !important;
}

.karte{
    width: 100%;
    height: 20rem;
}

.karte-u{
    color: var(--bs-warning) !important;
}

.kontaktdaten{
    background-color: var(--bs-dark) !important;
}

.kontaktdaten-img{
    width: 2rem;
}

.bewertung{
    background-color: var(--bs-dark);
}

.stern{
    width: 2rem;
}

.produkte{
    background-color: var(--bs-dark) !important;
    border-radius: 0.8rem;
}

.tapete{
    background-image: url("../assets/img/tapete.svg");
     background-size: cover;
}

.form_label{
    color: var(--bs-primary) !important;
}

.form{
    background-color: var(--bs-secondary) !important;
}














.hamburger {
    width: 40px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: none;
    background: transparent;
}

.hamburger span {
    height: 3px;
    background-color: var(--bs-primary); /* Farbe der Striche */
    width: 100%;
    transition: all 0.3s ease-in-out;
}

/* Animation bei Hover */
.hamburger:hover span {
    background-color: var(--bs-info); /* Hover-Farbe */
}

.gelb{
    color: var(--bs-btn-bg) !important;
}