/* 1. GRUNDLAGEN (Für alle Geräte) */
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%; /* Verhindert, dass Bilder jemals aus dem Bildschirm ragen */
    height: auto !important; /* Verhindert Verzerrungen */
}

/* 2. TEXTE & ÜBERSCHRIFTEN */
.Text {
    font-size: 18px;
    line-height: 1.6;
    color: #363636;
    margin-bottom: 15px;
}

.TextHedding2 { font-size: 35px; text-decoration: none; }
.firstsign3 { font-size: 35px; color: #ff4040; }

.header-zentriert {
    text-align: center;
    padding: 20px;
}
/* Deine Markenfarben */
.firstsign {
    color: #ff4040 !important;
    font-size: 1.1em; /* Macht den ersten Buchstaben minimal größer */
    font-weight: bold;
}

.TextHedding2 {
    color: #363636; /* Dein DJ-Schwarz/Anthrazit */
}

/* Der Menü-Look */
.menü {
    color: #363636;
    font-size: 18px;
}

/* 3. LAYOUT (MacBook / Desktop) */
#navcontainer3 {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    display: flow-root;
min-height: 400px; /* Gibt dem Inhalt eine Mindesthöhe */
    padding-bottom: 80px; /* Schiebt den Footer weg */
    clear: both; /* Beendet das "Fließen" des Bildes */
}

.profile-pic {
    float: right;
    width: 180px;
    margin-left: 30px;
    margin-bottom: 20px;
    border-radius: 10px;
}

/* 4. NAVIGATION */
/* Hauptnavigation oben */
#navcontainer {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}

#navlist {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center; /* Zentriert das Menü auf dem MacBook */
    flex-wrap: wrap;        /* Schiebt Menüpunkte auf dem Handy in die nächste Zeile */
    gap: 15px;              /* Abstand zwischen den Menüpunkten */
}

#navlist li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    transition: transform 0.2s ease-in-out;
}

/* Der Wachs-Effekt für oben */
#navlist li a:hover {
    transform: scale(1.15); /* Vergrößert den Punkt um 15% */
}

#navlist li a .menü {
    color: #363636; /* Schwarz für die Schrift oben */
    font-size: 18px;
}

/* Handy-Spezial: Menüpunkte untereinander, wenn es zu eng wird */
@media screen and (max-width: 768px) {
    #navlist {
        flex-direction: column; /* Stapelt die Menüpunkte */
        align-items: center;    /* Zentriert sie */
    }
    
    #navlist li a {
        padding: 5px;
    }
}

/* 5. HANDY-OPTIMIERUNG (Wenn Bildschirm schmaler als 768px) */
@media screen and (max-width: 768px) {
    #navcontainer3 {
        padding: 15px;
    }

    .profile-pic {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        width: 200px;
    }

    .TextHedding2, .firstsign3 {
        font-size: 22px;
    }
}
.top-logo {
    width: 100%;
    height: auto !important; /* Verhindert das Eier-Logo auf dem Handy */
    display: block;
    max-width: 1200px; /* Damit es auf dem MacBook nicht unendlich groß wird */
    margin: 0 auto;
}
/* FOOTER STYLING */
.site-footer {
    background-color: #2e2e2e;
    padding: 40px 0 20px;
    font-family: Arial, sans-serif;
    color: #fff;
    margin-top: 50px;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ff4040; /* Dein DJ-Rot beim Drüberfahren */
}

/* Social Icons */
.social-icons {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons li {
    display: inline-block;
}

.social-icons a {
    background-color: #eceeef;
    color: #818a91 !important;
    font-size: 20px;
    display: inline-block;
    line-height: 44px;
    width: 44px;
    height: 44px;
    text-align: center;
    border-radius: 100%;
    transition: all 0.2s linear;
}

/* Deine Markenfarben für die Icons */
.social-icons a.Instagram:hover { background-color: #e1306c; color: #fff !important; }
.social-icons a.WhatsApp:hover { background-color: #25d366; color: #fff !important; }
.social-icons a.Phone:hover { background-color: #ff4040; color: #fff !important; }

/* Handy-Anpassung für den Footer */
@media screen and (max-width: 768px) {
    .site-footer {
        text-align: center;
    }
    .social-icons {
        margin-top: 20px;
    }
}
/* Navigation im Footer (Impressum, Kontakt etc.) */
#navcontainer2 {
    width: 100%;
    padding: 10px 0;
}

#navlist2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;       /* Das schiebt die Links nebeneinander */
    justify-content: center; /* Zentriert die Links */
    flex-wrap: wrap;     /* Erlaubt Umbruch auf dem Handy */
    gap: 20px;           /* Abstand zwischen den Links */
}

#navlist2 li {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

#navlist2 a {
    text-decoration: none;
    display: inline-block;
}

/* Die Farben der Buchstaben */
.menü {
    color: #fff; /* Restliche Buchstaben in Weiß für dunklen Hintergrund */
    font-weight: normal;
}

.firstsign {
    color: #ff4040 !important; /* Dein DJ-Rot */
    font-weight: bold;
}
/* Den gesamten Link-Inhalt als Einheit ansprechen */
#navlist2 li a {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease-in-out; /* Die Bewegung wird weich */
}

/* Wenn man über den Link fährt, wird ALLES darin vergrößert */
#navlist2 li a:hover {
    transform: scale(1.1); /* Das ganze Wort wächst um 10% */
}

/* Die Farben bleiben dabei erhalten */
#navlist2 li a:hover .firstsign {
    color: #ff0000 !important; /* Das Rot wird beim Hover noch einen Tick heller */
}

#navlist2 li a:hover .menü {
    color: #fff; /* Die weißen Buchstaben bleiben weiß */
}