/* ================= BASIS EINSTELLUNGEN (RESET) ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* <-- Das ist neu! */
}
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}
/* ================= NAVIGATION ================= */
.navbar {
    position: absolute; /* Legt das Menü ÜBER das Hero-Bild */
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 0;
    z-index: 100; /* Damit es immer ganz oben liegt */
}

.navbar-content {
    display: flex;
    justify-content: space-between; /* Logo links, Menü rechts */
    align-items: center;
}

/* Dein Text-Logo */
/* ================= LOGO DESIGN ================= */
.logo {
    font-size: 1.8rem; /* Etwas größer als vorher */
    font-weight: 900; /* Extra Fett (Ultra Bold) für starken Auftritt */
    color: #ffffff; /* Der Hauptteil "MO" ist weiß */
    text-decoration: none;
    text-transform: uppercase; /* Alles Großbuchstaben */
    letter-spacing: -1px; /* Buchstaben enger zusammen für modernen Look */
    display: flex; /* Hilft beim Ausrichten */
    align-items: center;
}

/* Der zweite Teil des Logos ("SIGN") */
.logo-highlight {
    color: #27ae60; /* Dein Smaragd-Grün */
    margin-left: 2px; /* Ein winziger Abstand für bessere Lesbarkeit */
}

/* Optional: Ein kleiner Effekt beim Drüberfahren mit der Maus */
.logo:hover .logo-highlight {
    color: #fff; /* SIGN wird weiß */
    transition: color 0.3s ease;
}
.logo:hover {
    color: #27ae60; /* MO wird grün */
    transition: color 0.3s ease;
}

/* Die Links rechts daneben */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px; /* Abstand zwischen den Menüpunkten */
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #27ae60; /* Dein Grün beim Drüberfahren */
}

/* Handy-Anpassung: Menü aufräumen */
@media (max-width: 768px) {
    .navbar-content {
        flex-direction: column; /* Untereinander statt nebeneinander */
        gap: 15px;
    }
    .nav-links {
        gap: 15px;
        font-size: 0.9rem;
    }
}
/* Container hält den Inhalt mittig und begrenzt die Breite */
.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

/* Abstände für Sektionen */
.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: #f8f9fa; /* Helles Grau für Kontrast */
}

/* Typografie Basics */
h1, h2, h3 {
    color: #2c3e50; /* Dunkles Blau-Grau */
    margin-bottom: 15px;
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; text-align: center; }
p { margin-bottom: 15px; }

.text-center { text-align: center; }
.intro-text { font-size: 1.1rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.mb-50 { margin-bottom: 50px; }
.small-print { font-size: 0.8rem; color: #777; margin-top: 20px; }


/* ================= BUTTONS ================= */
.btn {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.btn-primary {
    background-color: #27ae60; /* Helles, freundliches Blau */
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #2980b9; /* Dunkleres Blau beim Drüberfahren */
}

.btn-outline {
    background-color: transparent;
    color: #27ae60;
    border: 2px solid #27ae60;
}

.btn-outline:hover {
    background-color: #27ae60;
    color: white;
}


/* ================= HERO / HEADER ================= */
.hero {
    height: 85vh; /* 85% der Bildschirmhöhe */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('katze1.png') no-repeat center center/cover;
    color: white;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero h1 { color: white; font-size: 3rem; }
.hero-subline { font-size: 1.3rem; max-width: 600px; margin: auto; }


/* ================= PREIS-BOXEN ================= */
.price-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap; /* Damit es auf Handys umbricht */
}

.price-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 40px;
    flex: 1;
    min-width: 300px; /* Mindestbreite einer Box */
    max-width: 450px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
}

/* Das hervorgehobene Paket */
.price-card.highlight {
    border: 2px solid #27ae60;
    transform: scale(1.05); /* Ein bisschen größer */
    z-index: 1;
}

.badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #27ae60; /* Rotes Badge */
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}


    /* Neue Preise für Hybrid-Modell */
.price-setup {
    font-size: 1.1rem;
    color: #777; /* Grau, damit es nicht so "teuer" wirkt */
    margin-top: 20px;
    font-weight: bold;
}

.price-monthly {
    font-size: 2.5rem; /* Groß und mächtig */
    color: #27ae60; /* Dein neues Grün */
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}


.tax-info { font-size: 0.9rem; color: #999; font-weight: normal;}

.price-card ul {
    text-align: left;
    list-style: none;
    margin: 25px 0;
    display: inline-block; /* Trick, um linksbündige Liste zu zentrieren */
}

.price-card li { margin-bottom: 10px; }


/* ================= ÜBER MICH GRID ================= */
.about-grid {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text { flex: 1; }
.about-image-placeholder {
    flex: 1;
    height: 300px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    border-radius: 10px;
}


/* ================= FOOTER / KONTAKT ================= */
.footer-section {
    background: #2c3e50; /* Dunkler Footer */
    color: white;
    padding: 80px 0 20px;
}

.footer-section h2, .footer-section h3 { color: white; }
.contact-details { margin-top: 40px; display: flex; justify-content: center; gap: 50px; }
.footer-section a { color: #ffffff; text-decoration: none; }
.footer-section a:hover {
    color: #27ae60; /* Dein Grün */
    text-decoration: underline; /* Unterstreichen beim Drüberfahren */
}
.footer-bottom {
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 0.8rem;
}

/* ================= REAGIEREN AUF HANDYS (MEDIA QUERIES) ================= */
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    
    /* Macht aus dem Nebeneinander ein Untereinander */
    .price-card.highlight { transform: scale(1); } /* Highlight-Zoom entfernen auf Handy */
    
    .about-grid {
        flex-direction: column; /* Text über Bild */
    }
    .about-image-placeholder { width: 100%; }
    
    .contact-details { flex-direction: column; gap: 30px; }
}
/* ================= FORMULAR DESIGN (PROFI-LOOK) ================= */

/* Der Hintergrund der ganzen Seite (damit sich das weiße Formular abhebt) */
body {
    background-color: #f8f9fa;
}

/* Der Container, der alles mittig hält */
.form-page-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Die Überschrift auf der Extra-Seite */
.header-simple h1 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* Das weiße "Papier", auf dem das Formular liegt */
.contact-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px; /* Runde Ecken */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sanfter Schatten für 3D-Effekt */
    border: 1px solid #eaeaea;
}

/* Abstände zwischen den Feldern */
.form-group {
    margin-bottom: 25px;
}

/* Die Beschriftungen (Name, Email...) */
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

/* Die Eingabefelder selbst */
.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 15px; /* Viel Platz zum Tippen */
    border: 2px solid #eee; /* Erstmal hellgrauer Rand */
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background-color: #fafafa; /* Ganz leichtes Grau innen */
    transition: all 0.3s ease; /* Weicher Übergang bei Klick */
}

/* Wenn man in ein Feld reinklickt */
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    background-color: #fff;
    border-color: #27ae60; /* Dein Grünton! */
    outline: none;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.1); /* Grüner Schimmer */
}

/* Der Absende-Button */
.contact-form button {
    background-color: #27ae60;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); /* Grüner Schatten */
}

/* Hover-Effekt für den Button */
.contact-form button:hover {
    background-color: #219150; /* Etwas dunkler */
    transform: translateY(-2px); /* Button hebt sich leicht an */
    cursor: pointer;
}

/* Damit die Select-Pfeile auf allen Browsern gut aussehen */
.form-group select {
    cursor: pointer;
    appearance: none; /* Entfernt Standard-Design */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
}
/* ================= DANKE SEITE ================= */
.thank-you-container {
    max-width: 600px;
    margin: 100px auto; /* 100px Abstand von oben */
    text-align: center;
    padding: 20px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: #27ae60; /* Dein Grün */
    color: white;
    font-size: 50px;
    line-height: 80px; /* Zentriert das Häkchen vertikal */
    border-radius: 50%; /* Macht den Kreis rund */
    margin: 0 auto 30px; /* Zentriert den Kreis horizontal */
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
}

.thank-you-container h1 {
    font-size: 2.5rem;
    color: #2c3e50;
}/* ================= ÜBER MICH ANPASSUNGEN ================= */

/* Macht die Überschrift "Ihr Partner vor Ort" noch etwas größer */
.about-text h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
}

/* Macht den Fließtext daneben größer und besser lesbar */
.about-text p {
    font-size: 1.15rem; /* Standard ist 1.0rem, das hier ist 15% größer */
    line-height: 1.8; /* Etwas mehr Luft zwischen den Zeilen */
    margin-bottom: 25px;
}
/* ================= PROFILBILD RAHMEN ================= */
.profile-pic {
    /* Fügt den Rahmen hinzu (5px dick, durchgezogen, in deiner Akzentfarbe) */
    border: 9px solid #27ae60; 
    
    /* Etwas Platz zwischen dem Bild und dem Rahmen (Weißraum) */
    padding: 0px; 
    
    /* Fügt einen leichten Schatten hinzu, damit das Bild etwas hervorgehoben wird */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    
    /* Sicherstellen, dass die Ränder rund bleiben */
    border-radius: 15px; 
}