<style>
    /* Global Resets and Base Styles */
    *,
    *::before,
    *::after {
        box-sizing: border-box; /* Consistent box model */
    }

    html {
        scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    }

    body {
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Added fallbacks */
        background-color: #111827; /* Darkest blue/grey */
        color: #ffffff; /* White text */
        line-height: 1.6; /* Improved readability */
        font-size: 16px; /* Base font size */
    }

    /* Container */
    .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 1rem; /* Horizontal padding */
    }

    /* Links - General Styling */
    a {
        color: #a3e635; /* Accent color for general links */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    a:hover,
    a:focus {
        color: #bef264; /* Lighter accent on hover/focus */
        text-decoration: underline;
    }

    /* Headings */
    h1, h2, h3, h4 {
        margin-top: 0;
        margin-bottom: 1rem; /* Consistent bottom margin */
        line-height: 1.3;
        font-weight: 600; /* Slightly bolder */
    }

    /* Header */
    .header {
        background-color: #a3e635; /* Accent green background */
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 1000; /* Ensure header is on top */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1100px; /* Match container width */
        margin: 0 auto;
        padding: 0 1rem;
        position: relative; /* Wichtig für absolute Positionierung des Nav-Menüs */
    }

    .logo {
        height: 50px; /* Maintain logo size */
        display: block; /* Remove extra space below img if any */
    }

    /* Navigation Links - Desktop */
    .nav a {
        margin-left: 1.5rem;
        color: #000; /* Black text on accent green */
        text-decoration: none;
        font-weight: 600;
        padding: 0.5rem 0; /* Add some padding for easier clicking */
        position: relative; /* For hover effect */
        white-space: nowrap; /* Verhindert Zeilenumbruch der Nav-Links */
    }

    .nav a::after { /* Underline hover effect */
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #000;
        transition: width 0.3s ease;
    }

    .nav a:hover::after,
    .nav a:focus::after {
        width: 100%;
    }

    .btn-login {
        background-color: #000; /* Black background */
        color: #a3e635; /* Accent green text */
        padding: 0.6rem 1.2rem; /* Slightly larger padding */
        border-radius: 0.375rem; /* Rounded corners */
        margin-left: 1.5rem;
        text-decoration: none;
        font-weight: 600;
        border: 2px solid transparent; /* For focus outline */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-login:hover,
    .btn-login:focus {
        background-color: #1f2937; /* Darker grey on hover */
        color: #bef264; /* Lighter accent */
        outline: none;
        border-color: #a3e635; /* Accent border on focus */
    }

    /* Hamburger-Menü-Button (standardmäßig versteckt für Desktop) */
    .menu-toggle {
        display: none; /* Standardmäßig verstecken */
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        position: relative; /* Für die Positionierung des Icons */
        z-index: 1001; /* Stellt sicher, dass der Button über dem Menü liegt, wenn es eingeblendet wird */
        width: 40px; /* Größe des Buttons */
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none; /* Entfernt den Standard-Fokus-Outline */
    }

    .hamburger-icon {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #000; /* Schwarz, passend zum Header */
        position: relative;
        transition: background-color 0.3s ease-in-out;
        border-radius: 2px; /* Leicht abgerundet */
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: #000; /* Schwarz */
        position: absolute;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
        border-radius: 2px;
    }

    .hamburger-icon::before {
        top: -8px;
    }

    .hamburger-icon::after {
        top: 8px;
    }

    /* Zustände des Hamburger-Icons, wenn Menü geöffnet ist */
    .menu-toggle[aria-expanded="true"] .hamburger-icon {
        background-color: transparent; /* Mittlerer Strich verschwindet */
    }

    .menu-toggle[aria-expanded="true"] .hamburger-icon::before {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .hamburger-icon::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Section - (Deine vorhandenen Stile) */
    .hero {
        background: linear-gradient(to bottom, #111827, #1f2937); /* Gradient background */
        text-align: center;
        padding: 5rem 1rem 6rem 1rem; /* Increased bottom padding */
    }

    .hero h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem); /* Responsive font size */
        color: #a3e635; /* Accent green */
        margin-bottom: 1.5rem;
        font-weight: 700; /* Bolder */
    }

    .hero p {
        font-size: clamp(1.1rem, 2.5vw, 1.25rem); /* Responsive font size */
        margin-top: 1rem;
        max-width: 650px; /* Slightly wider */
        margin-left: auto;
        margin-right: auto;
        color: #d1d5db; /* Lighter grey for better contrast */
        line-height: 1.7;
    }

    .cta-button {
        display: inline-block;
        margin-top: 2.5rem; /* More space */
        background-color: #a3e635; /* Accent green */
        color: #000; /* Black text */
        padding: 0.9rem 1.8rem; /* Larger padding */
        border-radius: 0.5rem;
        font-weight: bold;
        text-decoration: none;
        font-size: 1.1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .cta-button:hover,
    .cta-button:focus {
        background-color: #bef264; /* Lighter accent on hover */
        color: #000;
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        outline: none;
    }

    /* General Section Styling */
    .section {
        padding: 4rem 1rem;
        background-color: #1f2937; /* Default section background (medium blue/grey) */
    }

    .section.dark {
        background-color: #111827; /* Darker section background */
    }

    .section h2 {
        text-align: center;
        font-size: clamp(1.8rem, 4vw, 2.5rem); /* Responsive font size */
        margin-bottom: 3rem; /* More space below heading */
        color: #a3e635; /* Accent green */
        font-weight: 700;
    }

    /* Grid Layout (used for services, reasons, etc.) */
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); /* Improved minmax */
        gap: 2rem; /* Gap between grid items */
    }

    /* Card Styling */
    .card {
        background-color: #374151; /* Lighter grey for cards */
        padding: 2rem;
        border-radius: 0.75rem; /* Slightly more rounded */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Softer shadow */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex; /* For better internal alignment if needed */
        flex-direction: column; /* Stack content vertically */
    }

    .card:hover {
        transform: translateY(-5px); /* Lift effect on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: #ffffff; /* White title for cards */
    }

    .card p {
        font-size: 1rem;
        color: #d1d5db; /* Lighter grey text in cards */
        flex-grow: 1; /* Allows paragraphs to fill space if cards have different heights */
        line-height: 1.6;
    }

    /* Specific for "Warum Auswandern" section cards */
    .reasons-intro {
        text-align: center;
        margin: 0 auto 2.5rem auto; /* Centered with more bottom margin */
        font-size: 1.15rem;
        color: #e5e7eb; /* Lighter text */
        max-width: 800px;
    }

    .reasons-grid .card h4 { /* Styles for h4 within these specific cards */
        font-size: 1.3rem;
        color: #a3e635; /* Accent color for these subheadings */
        margin-bottom: 0.75rem;
    }

    .reasons-grid .card p {
        font-size: 0.95rem; /* Slightly smaller text for these points */
        line-height: 1.6;
        color: #d1d5db;
    }

    /* Steps (Ablauf Section) */
    .steps {
        max-width: 700px;
        margin: 0 auto;
        padding-left: 0; /* Remove default padding if using custom markers */
        list-style: none; /* Remove default list style */
        counter-reset: steps-counter; /* Initialize counter */
    }

    .steps li {
        position: relative;
        padding: 0.75rem 0 0.75rem 2.5rem; /* Space for custom number */
        margin-bottom: 1rem;
        background-color: #374151; /* Match card background */
        border-radius: 0.375rem;
        font-size: 1.05rem;
        color: #ffffff; /* White text for steps list item */
    }

    .steps li::before {
        counter-increment: steps-counter; /* Increment counter */
        content: counter(steps-counter); /* Display counter */
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #a3e635; /* Accent color for number background */
        color: #000; /* Black text for number */
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.8rem; /* Center number vertically */
        margin-left: 0.5rem;
    }

    .steps li strong { /* Make starting words of steps bold */
        font-weight: 600;
        color: #ffffff;
    }


    /* Form Styling */
    .form {
        max-width: 700px;
        margin: 0 auto; /* Center form */
    }

    .form input[type="text"],
    .form input[type="email"],
    .form input[type="tel"],
    .form textarea {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1.25rem; /* Increased margin */
        border: 2px solid #374151; /* Subtler border */
        border-radius: 0.375rem;
        background-color: #1f2937; /* Darker input background */
        color: #fff; /* White text */
        font-size: 1rem;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .form input[type="text"]::placeholder,
    .form input[type="email"]::placeholder,
    .form input[type="tel"]::placeholder,
    .form textarea::placeholder {
        color: #9ca3af; /* Lighter placeholder text */
    }

    .form input[type="text"]:focus,
    .form input[type="email"]:focus,
    .form input[type="tel"]:focus,
    .form textarea:focus {
        outline: none;
        border-color: #a3e635; /* Accent border on focus */
        box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.3); /* Subtle glow effect */
    }

    .form textarea {
        min-height: 150px; /* Taller textarea */
        resize: vertical; /* Allow vertical resize */
    }

    .form button[type="submit"] {
        display: block; /* Make button full width or centered */
        width: auto; /* Or '100%' for full width */
        margin: 1rem auto 0 auto; /* Center button if not full width */
        background-color: #a3e635; /* Accent green */
        color: #000; /* Black text */
        padding: 0.9rem 2rem; /* Generous padding */
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .form button[type="submit"]:hover,
    .form button[type="submit"]:focus {
        background-color: #bef264; /* Lighter accent on hover */
        transform: translateY(-2px);
        outline: none;
    }

    /* Form Checkbox (Datenschutz) */
    .form div[style*="margin-bottom: 15px;"] { /* Target the div containing checkbox */
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem !important; /* Ensure spacing */
    }

    .form input[type="checkbox"] {
        width: auto; /* Override full width for checkbox */
        margin-right: 0.75rem;
        accent-color: #a3e635; /* Styles the checkbox color in modern browsers */
        transform: scale(1.2); /* Make checkbox slightly larger */
    }

    .form label[for="datenschutz"] {
        font-size: 0.9rem;
        color: #d1d5db;
    }

    .form label[for="datenschutz"] a { /* Style link within label */
        color: #a3e635;
        text-decoration: underline;
    }
    .form label[for="datenschutz"] a:hover {
        color: #bef264;
    }


    /* Footer */
    .footer {
        background-color: #0f172a; /* Darkest blue for footer */
        text-align: center;
        padding: 3rem 1rem; /* More padding */
        font-size: 0.9rem;
        color: #94a3b8; /* Muted text color */
        margin-top: 3rem; /* Space above footer */
    }

    .footer p {
        margin: 0.5rem 0;
    }

    .footer a {
        color: #cbd5e1; /* Lighter links in footer */
    }

    a.btn-login { /* Spezifische Regel für den Login-Button */
        color: #a3e635; /* Accent green text */
    }
    a.btn-login:hover,
    a.btn-login:focus {
        color: #bef264; /* Lighter accent on hover */
    }

    .footer a:hover,
    .footer a:focus {
        color: #a3e635; /* Accent on hover */
    }

    /* Utility Classes (Optional, but can be helpful) */
    .text-center {
        text-align: center;
    }
    .mt-1 { margin-top: 1rem; }
    .mb-1 { margin-bottom: 1rem; }

    /*kontakt */

    .kontakt-zentriert {
        text-align: center;
    }

    .kontakt-zentriert .container {
        max-width: 600px;
        margin: 0 auto;
    }


    /* Media Queries für mobile Ansicht */
    @media (max-width: 768px) { /* Beispiel Breakpoint - Passe ihn bei Bedarf an */
        .nav {
            display: none; /* Navigation standardmäßig verstecken */
            flex-direction: column;
            position: absolute; /* Absolut positionieren relativ zum header-inner */
            top: 100%; /* Direkt unter dem Header */
            left: 0;
            width: 100%;
            background-color: #1f2937; /* Hintergrundfarbe des aufklappbaren Menüs (Medium Blue/Grey) */
            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
            padding: 20px 0; /* Vertikaler Padding */
            z-index: 999; /* Unter dem Toggle-Button, aber über dem Rest der Seite */
            animation: fadeIn 0.3s ease-out forwards; /* Sanfte Einblend-Animation */
            transform-origin: top; /* Animation startet von oben */
            overflow: hidden; /* Verhindert Scrollbalken während der Animation */
        }

        .nav.open { /* Klasse, die JavaScript hinzufügt, wenn das Menü offen ist */
            display: flex; /* Menü anzeigen, wenn 'open' Klasse vorhanden ist */
        }

        .nav a {
            margin: 10px 0; /* Vertikaler Abstand für Links */
            text-align: center;
            color: #a3e635; /* Accent Green für Links im Dropdown */
            margin-left: 0; /* Zurücksetzen des linken Margins */
            padding: 10px 0; /* Padding für bessere Klickbarkeit */
            border-bottom: 1px solid rgba(255,255,255,0.1); /* Trennlinie */
        }
        .nav a:last-child {
            border-bottom: none; /* Keine Trennlinie am letzten Element */
        }

        .nav a::after {
            background-color: #bef264; /* Lichterer Accent für Hover-Underline im Dropdown */
        }

        .btn-login {
            display: block; /* Button auch als Block */
            width: calc(100% - 40px); /* Nimmt fast die volle Breite ein */
            margin: 20px auto 0 auto; /* Zentrieren und Abstand nach oben */
            padding: 12px 0;
            text-align: center;
        }

        .menu-toggle {
            display: flex; /* Hamburger-Button für Mobilgeräte anzeigen */
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scaleY(0);
        }
        to {
            opacity: 1;
            transform: scaleY(1);
        }
    }
</style>
