/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');

/* --- Allgemeine Reset & Basis-Styles --- */
:root {
    /* Farbpalette */
    --color-bg-dark: #0A0A0A; /* Sehr dunkler Hintergrund */
    --color-bg-medium: #151515; /* Etwas helleres Grau für Elemente */
    --color-text-light: #E0E0E0; /* Heller Text auf dunklem Hintergrund */
    --color-text-accent: #B0B0B0; /* Akzentuierter Text, z.B. für Meta-Infos */
    --color-border-dark: #2A2A2A; /* Dunkle Rahmenlinien */

    /* Neon Akzente (dezent und zielgerichtet) */
    --color-neon-green: #39FF70; /* Futuristische Aktionen / Erfolg */
    --color-neon-blue: #00E0FF;  /* Interaktion / Hover / Links */
    --color-neon-pink: #FF00E0;  /* Besonderheiten / Hervorhebung */
    --color-neon-purple: #9D00FF; /* Tiefe / Schatten */

    /* Typografie */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Space Mono', monospace; /* Für Überschriften, Code, Akzente */

    /* Abstände */
    --spacing-xs: 8px;
    --spacing-s: 16px;
    --spacing-m: 32px;
    --spacing-l: 64px;
    --spacing-xl: 96px;

    /* Border Radius */
    --border-radius: 6px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--color-bg-dark);
    -webkit-font-smoothing: antialiased; /* Für bessere Schriftglättung */
    min-height: 100vh; /* Mindesthöhe für Footer am unteren Rand */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Sorgt dafür, dass der Main-Inhalt den verfügbaren Platz einnimmt */
}

/* Container für zentrierten Inhalt */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-s);
}

/* --- Typografie --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--color-neon-blue); /* Überschriften mit Neon-Akzent */
    margin-bottom: var(--spacing-s);
    text-shadow: 0 0 5px rgba(0, 224, 255, 0.4); /* Leichter Neon-Glow */
}

h1 { font-size: 3em; }
h2 { font-size: 2.5em; color: var(--color-neon-pink); text-shadow: 0 0 5px rgba(255, 0, 224, 0.4); }
h3 { font-size: 1.8em; }
p {
    margin-bottom: var(--spacing-s);
    color: var(--color-text-light);
}

a {
    color: var(--color-neon-blue);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--color-neon-green);
    text-shadow: 0 0 8px rgba(57, 255, 112, 0.7);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-s);
    background-color: var(--color-neon-green);
    color: var(--color-bg-dark); /* Text auf Neon-Button ist dunkel */
    font-family: var(--font-secondary);
    font-weight: bold;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(57, 255, 112, 0.3); /* Subtiler Glow */
}

.btn:hover {
    background-color: var(--color-neon-blue);
    color: var(--color-bg-dark);
    box-shadow: 0 0 15px rgba(0, 224, 255, 0.6);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-neon-blue);
    color: var(--color-neon-blue);
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.3);
}

.btn-secondary:hover {
    background-color: var(--color-neon-blue);
    color: var(--color-bg-dark);
    box-shadow: 0 0 15px rgba(0, 224, 255, 0.6);
}

/* --- Header & Navigation --- */
.main-nav { /* Der Header bekommt die Klasse 'main-nav' */
    background-color: var(--color-bg-medium);
    padding: var(--spacing-s) 0;
    border-bottom: 1px solid var(--color-border-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative; /* Wichtig für die Positionierung des mobilen Menüs */
    z-index: 100; /* Sicherstellen, dass der Header über anderen Inhalten liegt */
}

.nav-container { /* Ersetzt header .container für die Navigationsstruktur */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-s);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Styling für den aktiven Navigationspunkt */
.nav-links li a.active {
    color: var(--color-neon-pink); /* Eine andere Neonfarbe für den aktiven Link */
    text-shadow: 0 0 10px rgba(255, 0, 224, 0.7); /* Deutlicherer Glow */
    border-bottom: 2px solid var(--color-neon-pink); /* Unterstreichung */
    padding-bottom: 8px; /* Etwas Abstand zur Unterstreichung */
}

/* Anpassung für den aktiven Link auf Hover, damit er sich immer noch abhebt */
.nav-links li a.active:hover {
    color: var(--color-neon-green); /* Wechselt Farbe beim Hover auf aktiven Link */
    text-shadow: 0 0 12px rgba(57, 255, 112, 0.9); /* Intensiverer Glow */
    border-color: var(--color-neon-green); /* Unterstreichung wechselt auch */
}

/* Stelle sicher, dass auf Mobilgeräten der aktive Link auch gut aussieht */
@media (max-width: 768px) {
    .nav-links li a.active {
        background-color: rgba(255, 0, 224, 0.1); /* Leichter Hintergrund, wenn aktiv */
        border-bottom: none; /* Keine Unterstreichung, da Block-Element */
        padding-bottom: 15px; /* Standard Padding */
    }
}


/* Logo-Styling */
.logo {
    display: flex; /* Für bessere Ausrichtung, falls Text oder andere Elemente hinzukommen */
    align-items: center;
    margin-right: auto; /* Schiebt das Logo nach links und die Navigation nach rechts */
    z-index: 1001; /* Sicherstellen, dass das Logo über dem mobilen Menü liegt */
}

.logo img {
    height: 50px; /* Logo etwas größer machen, für bessere Erkennbarkeit */
    filter: drop-shadow(0 0 8px var(--color-neon-purple)); /* Neon-Glow für das Logo */
    transition: filter 0.3s ease; /* Übergang für Hover-Effekt */
}

.logo img:hover {
    filter: drop-shadow(0 0 15px var(--color-neon-pink)); /* Intensiverer Glow beim Hover */
}

/* Desktop-Navigation */
.nav-links { /* Umbenannt von nav ul */
    list-style: none;
    display: flex;
    gap: var(--spacing-m);
    transition: all 0.4s ease-in-out; /* Für reibungsloses Ein-/Ausklappen */
}

.nav-links li a {
    color: var(--color-text-light);
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    padding: 10px 0; /* Für Klickbereich auf Desktop */
    display: block;
}

.nav-links li a:hover {
    color: var(--color-neon-green);
    text-shadow: 0 0 8px rgba(57, 255, 112, 0.7);
}

/* Hamburger-Menü (Mobile Toggle) */
.menu-toggle-checkbox {
    display: none; /* Checkbox verstecken */
}

.mobile-menu-toggle {
    display: none; /* Standardmäßig auf Desktop versteckt */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1000; /* Sicherstellen, dass der Toggle über dem Menü liegt */
    position: relative; /* Für die absolute Positionierung der Balken im geöffneten Zustand */
}

.mobile-menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-neon-blue);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* --- Hero Section --- */
.hero {
    position: relative;
    height: 600px; /* Oder eine andere feste Höhe, die zu deinem Design passt */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Wichtig, um abgeschnittene Bildteile zu vermeiden */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/hero-background.jpg'); /* Dein Hero Hintergrundbild */
    background-size: cover; /* Bild deckt den gesamten Bereich ab */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat;
    filter: brightness(0.4) contrast(1.2); /* Dunkler und etwas kontrastreicher für besseren Textkontrast */
    z-index: 0; /* Hintergrund soll unter dem Inhalt liegen */
}

.hero-content {
    position: relative;
    z-index: 1; /* Inhalt über dem Hintergrund */
    text-align: center;
    color: var(--color-text-light);
    max-width: 800px;
    padding: var(--spacing-m);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparenter Hintergrund für bessere Lesbarkeit */
    border-radius: var(--border-radius);
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.3), 0 0 40px rgba(255, 0, 224, 0.3); /* Mehr Neon-Glow */
    border: 1px solid var(--color-border-dark);
}

.hero-content h1 {
    font-size: 4em;
    margin-bottom: var(--spacing-s);
    color: var(--color-neon-blue);
    text-shadow: 0 0 15px rgba(0, 224, 255, 0.7);
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: var(--spacing-l);
    color: var(--color-text-light);
}

.hero-buttons .btn {
    margin: 0 var(--spacing-xs);
}

/* --- Content Sections --- */
section {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

section:nth-of-type(even) {
    background-color: var(--color-bg-medium);
}

/* --- Grid Layout (z.B. für Features oder Produkte) --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-l);
    margin-top: var(--spacing-l);
}

.grid-item {
    background-color: var(--color-bg-medium);
    padding: var(--spacing-m);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-dark);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 224, 255, 0.2);
}

.grid-item h3 {
    color: var(--color-neon-pink);
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 0 5px rgba(255, 0, 224, 0.3);
}

.grid-item img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-s);
}

/* --- Blog Post Styling --- */
.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-l);
    margin-top: var(--spacing-l);
}

.blog-list-item {
    background-color: var(--color-bg-medium);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-dark);
    overflow: hidden; /* Stellt sicher, dass das Bild richtig im Rahmen bleibt */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(57, 255, 112, 0.2);
}

.blog-list-item img {
    width: 100%;
    height: 200px; /* Feste Höhe für Blog-Vorschaubilder */
    object-fit: cover;
}

.blog-item-content {
    padding: var(--spacing-s);
    text-align: left;
    flex-grow: 1; /* Sorgt dafür, dass der Inhalt den restlichen Platz einnimmt */
    display: flex;
    flex-direction: column;
}

.blog-item-content h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-neon-blue);
    text-shadow: none; /* Kein Glow bei diesen Überschriften */
}

.blog-item-content p {
    font-size: 0.9em;
    color: var(--color-text-accent);
    flex-grow: 1;
}

.blog-item-content .btn {
    align-self: flex-start; /* Button linksbündig */
    margin-top: var(--spacing-s);
}

.blog-post {
    max-width: 900px;
    margin: var(--spacing-xl) auto;
    background-color: var(--color-bg-medium);
    padding: var(--spacing-l);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
}

.blog-post h1 {
    text-align: center;
    margin-bottom: var(--spacing-m);
    font-size: 2.8em;
}

.blog-post-meta {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-accent);
    margin-bottom: var(--spacing-l);
}

.blog-post-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-l);
    border: 2px solid var(--color-border-dark);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.blog-post-content p {
    font-size: 1.1em;
    margin-bottom: var(--spacing-m);
}

.blog-post-content h3 {
    margin-top: var(--spacing-l);
    margin-bottom: var(--spacing-s);
    color: var(--color-neon-green);
    text-shadow: 0 0 5px rgba(57, 255, 112, 0.3);
}

/* --- About & Contact Page Styling --- */
.text-section {
    max-width: 900px;
    margin: var(--spacing-l) auto;
    text-align: left;
    background-color: var(--color-bg-medium);
    padding: var(--spacing-l);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border-dark);
}

.text-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-l);
}

.card {
    background-color: var(--color-bg-medium);
    padding: var(--spacing-m);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-dark);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Volle Höhe für das Grid! */
}

.card img {
    width: 100%;
    height: 220px;       /* Oder 200px, 240px – je nach gewünschter Höhe */
    object-fit: cover;   /* Schneidet das Bild schön zu */
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-s);
    border: 1px solid var(--color-border-dark);
}

.card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-neon-blue);
}

.card p {
    font-size: 0.95em;
    color: var(--color-text-accent);
}


.contact-form {
    display: grid;
    gap: var(--spacing-s);
}

.contact-form label {
    font-weight: bold;
    color: var(--color-neon-blue);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius);
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    font-family: var(--font-primary);
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: var(--color-neon-pink);
    box-shadow: 0 0 10px rgba(255, 0, 224, 0.4);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    width: fit-content;
    margin-top: var(--spacing-s);
}

/* --- Footer --- */
footer {
    background-color: var(--color-bg-medium);
    color: var(--color-text-accent);
    padding: var(--spacing-s) 0;
    text-align: center;
    font-size: 0.9em;
    border-top: 1px solid var(--color-border-dark);
    margin-top: var(--spacing-xl);
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-s);
}

.social-links {
    margin-top: var(--spacing-xs);
}

.social-links a {
    color: var(--color-text-accent);
    font-size: 1.5em;
    margin: 0 var(--spacing-xs);
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--color-neon-blue);
    text-shadow: 0 0 8px rgba(0, 224, 255, 0.7);
}

/* --- Responsive Design (Media Queries) --- */
@media (max-width: 768px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    .hero { height: 450px; }
    .hero-content h1 { font-size: 3em; }
    .hero-content p { font-size: 1.1em; }

    /* Mobile Navigation */
    .mobile-menu-toggle {
        display: flex; /* Hamburger-Menü auf kleinen Bildschirmen anzeigen */
    }

    .nav-links {
        max-height: 0; /* Menü standardmäßig verstecken */
        overflow: hidden;
        position: absolute;
        top: 100%; /* Unter dem Header */
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--color-bg-medium);
        padding: 0; /* Kein Padding, wenn geschlossen */
        border-top: 1px solid var(--color-border-dark);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        pointer-events: none; /* Verhindert Klicks, wenn geschlossen */
        opacity: 0;
    }

    .nav-links li {
        margin: 0; /* Vertikaler Abstand wird über a-Padding geregelt */
    }

    .nav-links a {
        padding: 15px 0; /* Mehr Padding für Klickfläche auf Mobilgeräten */
        display: block; /* Links füllen die gesamte Breite aus */
        text-align: center;
    }

    /* Wenn die Checkbox aktiviert ist, zeige das Menü an */
    .menu-toggle-checkbox:checked ~ nav .nav-links {
        max-height: 300px; /* Genug Platz für alle Links; anpassen, falls du viele Links hast */
        padding: 20px 0; /* Padding nur, wenn Menü offen */
        opacity: 1;
        pointer-events: auto;
    }

    /* Animation für das Hamburger-Symbol, wenn es geöffnet ist */
    .menu-toggle-checkbox:checked + .mobile-menu-toggle .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle-checkbox:checked + .mobile-menu-toggle .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle-checkbox:checked + .mobile-menu-toggle .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .grid {
        grid-template-columns: 1fr; /* Einzelne Spalte auf kleinen Bildschirmen */
    }

    .blog-post {
        margin: var(--spacing-m) auto;
        padding: var(--spacing-m);
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    .hero-content h1 { font-size: 2em; }
    .hero-content p { font-size: 1em; }
    .btn { padding: var(--spacing-xs) var(--spacing-s); font-size: 0.9em; }

    section {
        padding: var(--spacing-l) 0;
    }
}