/* style.css - MoveExpert */

/* --- GLOBALE DETAILS --- */
html { scroll-behavior: smooth; }
p { margin-bottom: 1.5rem; color: #4a4a4a; line-height: 1.6; }
/* --- NAVIGATION & DROPDOWN --- */

/* Desktop Dropdown Logik */
@media (min-width: 800px) {
    .dropdown-trigger {
        position: relative;
    }
    /* Das Dropdown-Menü selbst */
    .dropdown-menu {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 220px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-radius: 4px;
        padding: 0.5rem 0;
        z-index: 999;
        text-align: left;
        border-top: 3px solid var(--primary);
    }

    /* Zeige Dropdown beim Hover über das Eltern-Element (li) */
    .dropdown-trigger:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.2s ease-in-out;
    }

    /* Links im Dropdown */
    .dropdown-menu li {
        display: block;
        width: 100%;
    }

    .dropdown-menu a {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        color: #333;
        border-bottom: 1px solid #f9f9f9;
        white-space: nowrap; /* Verhindert Umbruch */
    }

    .dropdown-menu a:hover {
        background-color: #f9f9f9;
        color: var(--primary);
        padding-left: 1.8rem; /* Kleiner Ruck-Effekt nach rechts */
        transition: all 0.2s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* --- MOBILE NAVIGATION & DROPDOWN (unter 800px) --- */
@media (max-width: 799px) {
    
    /* 1. Container aufräumen */
    #main-nav {
        text-align: left;
        padding: 0;
        max-height: 80vh; 
        overflow-y: auto;
        border-top: 1px solid #eee;
    }

    /* 2. Haupt-Links (Home, Leistungen, Preise...) */
    nav a {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f5f5f5;
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: var(--dark);
        text-decoration: none;
    }

    /* 3. Der "Leistungen" Hauptpunkt */
    /* Wenn aktiv: Hintergrund hellgrau, Schrift orange */
    .dropdown-trigger.active > a {
        color: var(--primary);
        background-color: #fafafa;
    }
    
    /* 4. Der Dropdown-Container */
    .dropdown-menu {
        display: none;       /* Standard: Versteckt */
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        background-color: #f9f9f9;
        width: 100%;
        box-sizing: border-box; 
    }

    /* Menü anzeigen, wenn aktiv (durch JS gesteuert) */
    .dropdown-trigger.active .dropdown-menu {
        display: block;
        animation: slideIn 0.3s ease-out;
    }

    /* 5. Die Unterpunkte (Links) */
    /* Wir entfernen hier unnötige Container-Styles für li und stylen direkt a */
    .dropdown-menu li {
        margin: 0;
        display: block;
        width: 100%;
    }

    .dropdown-menu li a {
        padding: 0.8rem 1rem 0.8rem 2.5rem; /* Standard Einrückung */
        font-size: 1rem;     
        color: #555;        
        border-bottom: 1px solid #eee;
        font-weight: normal; 
        background: transparent;
        
        /* TRICK: Transparenter Rahmen verhindert Springen beim Hover */
        border-left: 4px solid transparent; 
        
        transition: all 0.2s ease;
    }

    /* 6. Hover & Active Effekt */
    .dropdown-menu li a:hover,
    .dropdown-menu li a:active {
        background-color: #eaeaea; 
        color: var(--primary);    
        padding-left: 2.8rem;      /* Kleiner Ruck nach rechts */
        border-left-color: var(--primary); /* Nur die Farbe ändern! */
    }
    
    /* 7. Kontakt Button */
    .btn-nav {
        margin: 1.5rem auto !important;
        display: block !important;
        width: calc(100% - 3rem) !important;
        text-align: center;
        background: var(--primary);
        color: white !important;
        border-radius: 6px;
    }

    /* Animation */
    @keyframes slideIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* --- BUTTON STYLES --- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    line-height: 1.2;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff !important; 
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

.btn-outline {
    background-color: transparent;
    border-color: #ddd;
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: #fff;
}
/* --- BUTTON STYLES (Repariert) --- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    line-height: 1.2;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff !important; 
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

.btn-outline {
    background-color: transparent;
    border-color: #ddd;
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: #fff;
}

/* --- HERO SECTION --- */
.hero-bg {
    background: linear-gradient(to right, #ffffff 0%, #f9f9f9 100%);
    position: relative;
    overflow: hidden;
}

.hero-headline {
    font-size: 3rem; /* Groß auf Desktop */
    line-height: 1.1;
    margin-bottom: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dark);
}

.hero-subline {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 540px;
}

.hero-img-style {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transform: perspective(1000px) rotateY(-2deg);
    transition: transform 0.5s ease;
    width: 100%; /* WICHTIG: Bild passt sich Container an */
    height: auto;
}

/* Trust Bar */
.trust-bar {
    display: flex; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid #eee; font-size: 0.9rem; color: #666; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 0.5rem; }

/* --- LISTEN & FORMULARE --- */
ul.check-list { list-style: none; padding-left: 0; }
ul.check-list li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
ul.check-list li::before { content: '✓'; color: var(--primary); position: absolute; left: 0; font-weight: bold; }

input, select, textarea {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;
    font-family: inherit; font-size: 1rem; margin-bottom: 1rem;
}

/* --- FOOTER --- */
footer { background-color: var(--dark); color: #bbb; font-size: 0.95rem; border-top: 3px solid var(--primary); }
footer h3 { color: #fff; font-size: 1.2rem; margin-bottom: 1rem; }
footer a { color: #bbb; text-decoration: none; }
footer a:hover { color: var(--primary); }

/* --- MOBILE OPTIMIERUNG (WICHTIG!) --- */
@media (max-width: 768px) {
    /* Schriftgröße im Hero verkleinern, damit es nicht bricht */
    .hero-headline { font-size: 2.2rem; } 
    .hero-subline { font-size: 1.1rem; }
    
    /* Buttons untereinander und volle Breite auf dem Handy */
    .hero-bg .btn { 
        display: block; 
        width: 100%; 
        margin-bottom: 0.8rem; 
    }
    
    /* Abstände anpassen */
    .section-padding { padding-top: 2rem !important; padding-bottom: 3rem !important; }
    
    /* Bild-Effekt entfernen für Mobile Performance */
    .hero-img-style { transform: none; margin-bottom: 1.5rem; }
    
    /* Trust Bar kompakter */
    .trust-bar { flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; }
}
/* --- FEATURE / USP SECTION --- */

.section-padding {
    padding: 4rem 0; /* Standard Abstand oben/unten */
}

/* Die Karte an sich */
.feature-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #f0f0f0; /* Ganz feiner Rahmen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Text linksbündig wirkt moderner */
}

/* Hover Effekt: Karte hebt sich leicht an */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: transparent;
}

/* Das Icon-Design (Runder Kreis mit orangenem Hintergrund) */
.icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #fff8e1; /* Sehr helles Orange/Gelb */
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Macht es kreisrund */
    font-size: 1.8rem;  /* Icon Größe */
    margin-bottom: 1.5rem;
    transition: background-color 0.3s;
}

/* Wenn man über die Karte fährt, wird das Icon dunkler orange */
.feature-card:hover .icon-wrapper {
    background-color: #fcebc2;
}

.feature-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0;
}

/* Zentrierter Text für Überschriften-Container */
.text-center { text-align: center; }
/* --- LEISTUNGEN / CONTENT SECTION --- */

/* Hintergrundfarbe für Abwechslung */
.bg-light {
    background-color: #f8f9fa; /* Ganz helles Grau */
}

/* Checkliste Styling */
ul.check-list {
    list-style: none; /* Normale Punkte weg */
    padding-left: 0;
    margin-bottom: 2rem;
}

ul.check-list li {
    position: relative;
    padding-left: 2rem; /* Platz für das Häkchen */
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

/* Das Häkchen vor jedem Punkt */
ul.check-list li::before {
    content: '✓'; /* Unicode Häkchen */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary); /* Dein Orange */
    font-weight: 800;
    font-size: 1.2rem;
}

/* Optional: Fettgedrucktes im Listenelement betonen */
ul.check-list li strong {
    color: var(--dark);
}
/* --- TESTIMONIALS (Kundenstimmen) --- */

.testimonial-card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary); /* Oranger Akzent links */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.stars {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    letter-spacing: 2px; /* Sterne etwas auseinanderziehen */
}

.review-text {
    font-style: italic;
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 1.5rem;
}

.review-author strong {
    display: block;
    color: var(--dark);
}

.review-author span {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- CTA BANNER (Der orangene Balken unten) --- */

.cta-banner {
    background-color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary) 0%, #e67e22 100%); /* Leichter Verlauf */
    color: #fff;
    padding: 4rem 0;
    text-align: center;
    margin-top: 2rem;
}

.cta-content h2 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.cta-content p {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Mobile Anpassung für CTA Buttons */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cta-buttons .btn {
        width: 100%;
        margin-left: 0 !important; /* Margin Reset für Mobile */
    }
}
/* --- SEO SECTION & BENEFIT BOX --- */

/* Hilfsklasse: Richtet Elemente oben aus (statt mittig) */
.align-start {
    align-items: flex-start !important;
}

.seo-text-content h3 {
    font-size: 1.4rem;
    color: var(--dark);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

/* Die hervorgehobene Box rechts */
.benefit-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

/* Ein kleiner orangener Streifen oben an der Box */
.benefit-box::top {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--primary);
}

/* Die Liste in der Box */
.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f9f9f9;
}

.benefit-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.benefit-list .icon {
    font-size: 1.5rem;
    background: #fff8e1; /* Helles Orange */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0; /* Verhindert, dass Icon gequetscht wird */
}

.benefit-list strong {
    display: block;
    color: var(--dark);
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.benefit-list .sub-text {
    font-size: 0.9rem;
    color: #777;
    line-height: 1.4;
    display: block;
}

/* Mobile Anpassung: Box nimmt volle Breite ein */
@media (max-width: 800px) {
    .benefit-box {
        padding: 1.5rem;
        margin-top: 2rem;
    }
}
/* --- RESPONSIVE LAYOUT FIX --- */

/* 1. Standard (Mobile First): Alles untereinander */
.split-section {
    display: grid;
    grid-template-columns: 1fr; /* Nur 1 Spalte */
    gap: 2.5rem;
    align-items: center;
}

/* Bild auf Handy zuerst anzeigen */
.split-section .image-container {
    order: -1; 
}

/* Bild darf nie breiter sein als der Bildschirm */
.image-container img {
    max-width: 100%;
    height: auto;
}

/* 2. Desktop (ab 800px): Nebeneinander */
@media (min-width: 800px) {
    .split-section {
        grid-template-columns: 1fr 1fr; /* 2 Spalten (50% / 50%) */
        gap: 4rem;
    }
    
    /* Bild wieder an normale Position setzen */
    .split-section .image-container {
        order: 0;
    }
}
/* --- SEO CONTENT STYLING --- */

.seo-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Keywords fett markieren, aber in der Farbe dezent halten */
.seo-content strong {
    color: #333;
    font-weight: 600;
}

/* Mobile Anpassung: Spalten auflösen */
@media (max-width: 768px) {
    .seo-columns {
        column-count: 1 !important; /* Auf Handy nur eine Spalte */
        text-align: left !important; /* Auf Handy Blocksatz vermeiden (Lücken) */
    }
}
/* Verhindert, dass Überschriften unter dem Sticky-Header verschwinden */
section[id] {
    scroll-margin-top: 100px; /* Abstand nach oben beim Springen */
}
/* --- PREISE / PRICING TABLE --- */

.price-grid {
    align-items: center; /* Damit die mittlere Karte vertikal zentriert wachsen kann */
}

/* Die einzelne Preiskarte */
.price-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.price-card h3 {
    font-size: 1.3rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

/* Der Preis selbst */
.price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.price-amount .currency {
    font-size: 1.5rem;
    vertical-align: top;
    margin-right: 2px;
}

.price-amount .period {
    font-size: 1rem;
    color: #999;
    font-weight: normal;
    vertical-align: bottom;
}

.price-desc {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.price-card hr {
    border: 0;
    border-top: 1px solid #f4f4f4;
    margin: 1.5rem 0;
}

/* Features Liste in der Karte */
.price-features {
    text-align: left;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* HIGHLIGHT CARD (Beliebt) */
.price-card.popular {
    border: 2px solid var(--primary);
    padding: 2.5rem 2rem; /* Etwas größer */
    box-shadow: 0 10px 40px rgba(243, 156, 18, 0.15);
    z-index: 1; /* Liegt über den anderen */
    transform: scale(1.05); /* Leicht vergrößert */
}

.price-card.popular:hover {
    transform: scale(1.05) translateY(-5px);
}

.badge {
    background: var(--primary);
    color: #fff;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* PREIS TABELLE (Material) */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden; /* Für runde Ecken */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.price-table td {
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.price-table tr:last-child td {
    border-bottom: none;
}

.text-right {
    text-align: right;
}

/* Mobile Anpassung für Pricing Cards */
@media (max-width: 800px) {
    .price-card.popular {
        transform: none; /* Kein Zoom auf Handy, sonst sprengt es den Rahmen */
        margin: 1rem 0;
    }
    
    .price-card.popular:hover {
        transform: translateY(-5px);
    }
}
/* --- KONTAKT SEITE --- */

/* Linke Spalte: Infos */
.contact-info-box {
    padding-right: 2rem;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.contact-list li {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-list .icon {
    width: 40px;
    height: 40px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-list a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/* Rechte Spalte: Formular Karte */
.contact-form-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border-top: 4px solid var(--primary);
}

/* Map Container */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Alerts (Erfolg/Fehler Nachrichten) */
.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: bold;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Mobile Anpassung */
@media (max-width: 800px) {
    .contact-info-box {
        padding-right: 0;
        margin-bottom: 3rem;
    }
    
    .contact-form-card {
        padding: 1.5rem; /* Weniger Padding auf Handy */
    }
}