/* Grundlegende Zurücksetzung für konsistentes Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #000000; /* Leicht grauer Hintergrund wie im Bild */
}

/* ------------------------------------------- */
/* 1. HEADER STYLING (Navigation & Logo)       */
/* ------------------------------------------- */

header {
    background-color: black; /* Weiße Leiste oben */
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-area {
    display: flex;
    align-items: center;
}

.avatar-placeholder {
    /* Simuliert den runden Avatar/Logo */
    width: 50px;
    height: 50px;
    
    /* *** NEU: Füge die URL deines Bildes hier ein *** */
    background-image: url('https://nobokon.de/MoLOGO_001.png'); 
    
    /* Stellt sicher, dass das Bild den Container ausfüllt und zentriert ist */
    background-size: cover; 
    background-position: center;
    
    border-radius: 50%;
    border: 1px solid #333; 
    margin-right: 10px;
}

.logo-area h1 {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 1px;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    gap: 10px; /* Abstand zwischen den Menüpunkten */
}

/* Normale Links (Home, Services) */
.nav-link {
    text-decoration: none;
    color: #FFFFFF;
    padding: 8px 15px;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #8A2BE2;
}

/* Spezielle Navigation-Buttons (About Us, Contact) */
.nav-button {
    text-decoration: none;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

.nav-button:hover {
    opacity: 0.8;
}

.about-us {
    /* Farbe aus dem Bild (ein dunkler Pink/Magenta) */
    background-color: #D82F8F; 
}

.contact {
    /* Farbe aus dem Bild (ein dunklerer Blauton) */
    background-color: #1A75BB; 
}


/* ------------------------------------------- */
/* 2. HERO-BEREICH STYLING                     */
/* ------------------------------------------- */

.hero-section {
    /* Farbverlauf als Hintergrund, wie im Bild */
    background: linear-gradient(90deg, #00C6FF 0%, #FF00E8 100%);
    color: white;
    text-align: center;
    padding: 100px 20px 150px 20px; /* Viel Platz oben/unten */
}

.hero-text-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-section h2 {
    font-size: 148px;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-section p {
    font-size: 18px;
    margin-bottom: 40px;
    /* Macht den Text etwas heller/subtiler */
    color: rgba(255, 255, 255, 0.9);
}

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

/* Allgemeine Button-Klasse für den Hero-Bereich */
.button {
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 50px; /* Runde Ecken für die Buttons */
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Button-Styling (Blau) */
.button-blue {
    background-color: #008CBA;
    color: white;
    border: 2px solid white;
}

/* Button-Styling (Pink) */
.button-pink {
    background-color: #FF1493;
    color: white;
    border: 2px solid #FF1493;
}