/* css/style.css */

/* --- 1. Variablen und Basis-Reset --- */
:root {
    --bg: #0f1416; /* nicht ganz schwarz */
    --panel: #14181a;
    --muted: #9aa6b0; /* blaugrau */
    --accent: #2e8cff; /* dezentes blau */
    --danger: #d60000;
    --glass: rgba(255, 255, 255, 0.03);
}

* {
    box-sizing: border-box
}

/* Basis Body Styles (Farbzuweisung) */
body.theme-dark {
    background: var(--bg);
    color: #e7eef6;
    min-height: 100vh
}

/* Wichtig für Sticky Footer */
body {
    display: flex;
    flex-direction: column;
}
main {
    flex-grow: 1;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    font-size: 16px
	scroll-behavior: smooth;
}

/* --- 2. Navigation (Topbar) --- */
.topbar {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(20, 24, 26, 0.9), rgba(20, 24, 26, 0.8));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 30
}
.topbar__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px
}

/* Branding (Neutralisierung der Farbe) */
.brand__link {
    color: var(--muted); /* NEU: Statt var(--accent) fuer Neutralitaet */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem
}

/* Hauptnavigation */
.mainnav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center
}
.mainnav a {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    font-weight: 500
}
.mainnav a:hover {
    color: #fff;
    background: var(--glass)
}

/* Dropdown (Desktop Hover) */
.has-dropdown {
    position: relative
}
.dropdown {
    z-index: 100; /* NEU ODER GEÄNDERT: Muss höher sein als z-index: 30 der .topbar */
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 8px;
    border-radius: 8px;
    display: none;
    min-width: 180px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6)
}
.has-dropdown:hover .dropdown {
    display: block
}
.dropdown li {
    padding: 0
}
.dropdown a {
    display: block;
    padding: 8px 10px;
    color: var(--muted); /* Sicherstellen, dass Dropdown-Links neutral sind */
}

/* WICHTIG: Überschreibung der Display-Regeln für Hover */
.mainnav .has-dropdown .dropdown {
    display: none;
}
.mainnav .has-dropdown:hover .dropdown {
    display: block;
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: white;
	/* color: var(--muted); */
    font-size: 1.25rem
}

/* --- 1. Hero Bereich (Haupt-Wrapper) --- */
.hero {
    position: relative;
    overflow: hidden;
    
    /* ABSTAND ERHÖHEN, um Überschneidung der Navbar zu verhindern (DEIN WERT) */
    padding-top: 7rem; 
    
    /* min-height wird jetzt vom hero__video gesetzt, da video-wrap entfaellt */
    min-height: 40vh; 
}

/* --- VORHERIGES VIDEO CSS ENTFAELLT HIER (video-wrap, video-wrap iframe) --- */

/* --- 2. Hero__video Container (Bild-Wrapper und Hoehen-Definition) --- */
.hero__video {
    position: relative; 
    overflow: hidden;
    
    /* Definiert die tatsaechliche Hoehe der Hintergrundflaeche (z.B. 85% des Viewports) */
    min-height: 45vh;
    width: 100%;
}

/* --- 3. NEU: Positionierung des <img>-Tags als Hintergrund --- */
.hero__background-image {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Stellt sicher, dass das Bild den Container ausfüllt (wie background-size: cover) */
    object-fit: cover; 
    
    /* Legt das Bild HINTER das Overlay */
    z-index: 1; 
    
    /* Behaelt den optischen Filter vom Video bei */
    filter: grayscale(6%) saturate(110%);
	
	/* NEU: Positioniert den Fokus 30% von oben (schiebt das Bild nach oben) */
    object-position: center 70%;
}


/* --- 4. Hero__overlay (Text-Container und Schleier) --- */
.hero__overlay {
    position: absolute;
    inset: 0;
    
    /* Stellt sicher, dass das Overlay die Hoehe von hero__video hat */
    height: 100%;
    
    /* Muss HÖHER sein als das Bild (z-index: 1) */
    z-index: 2; 
    
    /* Optional: Füge hier den dunklen Schleier hinzu */
    background: rgba(0, 0, 0, 0.2); 

    /* Zentrierungslogik */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Vertikal: Inhalt am oberen Rand */
    align-items: center;        /* Horizontal: Inhalt zentriert */
    text-align: center; 
    
    /* NEU: Einmaliges Padding fuer alle Seiten, KEIN extra padding-top */
    padding: 3rem;
    pointer-events: none;
    
    /* top: 0 ist durch inset: 0 bereits impliziert und kann entfernt werden */
    /* top: 0; */
}
}

/* --- 5. Hero__title und Hero__subtitle (DEINE VORHANDENE LOGIK) --- */
.hero__title {
    font-size: 2.2rem;
    margin-bottom: .25rem;
    color: white;
    pointer-events: auto
}
.hero__subtitle {
    opacity: .85;
    margin-bottom: 1rem;
    pointer-events: auto
}

/* --- 6. Hero__ctas (DEINE VORHANDENE LOGIK) --- */
.hero__ctas {
    display: flex;
    gap: .7rem;
    pointer-events: auto;
    /* Margin oben hinzufügen, um Abstand zum Subtitle zu geben */
    margin-top: 1rem; 
}

/* Buttons */
.btn {
    background: var(--accent);
    color: white;
    padding: .55rem .9rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600
}
.btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--muted)
}

/* Allgemeine Links (Nicht eingefärbt) */
a {
    color: var(--muted); /* Setzt die gedämpfte Farbe */
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--accent);
    text-decoration: underline;
}


/* --- 4. Haupt-Content & Zentrierung --- */

/* NEU: Zentriert das Haupt-Content-Element (.page) */
.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
    text-align: left; /* Stellt Linksbuendigkeit sicher */
}

/* Definiert den Haupt-Content-Bereich (fuer Home-Seite Grids) */
.content {
    max-width: 1100px;
    /* padding-top: 100rem; <--- DIESE REGEL ENTFERNT, da sie zu gross ist. */
    margin: 2rem auto; /* Fuegt Abstand zu Hero hinzu */
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Header von Inhaltsseiten */
.page__header {
    max-width: 1100px;
    margin: 1.4rem auto;
    padding: 0 18px;
}

/* --- 5. Karten (Card, Tile, Entry) --- */

/* Card-Basis: Hintergrund und Rahmen für alle Content-Boxen */
.card,
.entry /* NEU: Verwendet den Card-Stil fuer Listeneintraege */ 
{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.02);
    padding: 18px;
    border-radius: 10px;
}

/* Tiles (Home Grid) */
.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}
.tile {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--panel);
    transition: transform .22s ease, box-shadow .22s ease
}
.tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.6)
}
.tile__img {
    height: 120px;
    background-size: cover;
    background-position: center
}
.tile__meta {
    padding: 12px
}
.tile__title {
    font-weight: 600
}
.tile__desc {
    color: var(--muted);
    font-size: .95rem
}
.tile--add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}
.photo-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px
}

/* --- 6. Listeneinträge (Kalender, Archiv) --- */

.entry {
    /* ACHTUNG: margin, padding, border-bottom der alten Regel ENTFERNT */
    
    /* Zentrierung des Blocks beibehalten, Text linksbuendig */
    max-width: 1100px; 
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: 1.4rem; /* Abstand zwischen den Cards */
}
/* Entferne die Border zwischen Cards */
.entry:last-of-type {
    border-bottom: none;
}

/* Hebt das Datum hervor */
.entry time {
    display: block;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.2rem;
    font-size: 1.1rem;
}

/* Definiert den Titel des Auftritts */
.entry h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

/* Fügt dem Absatz etwas Abstand hinzu */
.entry p {
    margin-bottom: 0; /* Entferne den unteren Margin, da .card Padding hat */
    color: var(--muted);
}

/* Spezifische Zentrierung für Kontaktseite */
.page-contact .entry {
    text-align: center;
}
.page-contact .page__header {
    text-align: center;
}


/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px
}
.project__card {
    display: block;
    background: var(--panel);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit
}
.project__img {
    height: 160px;
    background-size: cover;
    background-position: center
}
.project__body {
    padding: 12px
}

/* Footer */
.sitefooter {
    text-align: center;
}

/* --- 7. Animationen --- */

/* Basis-Animation: Hoehere Spezifitaet fuer die Startwerte */
.card,
.list .entry,
.project-block, /* Beibehalten für Spezifität */
.grid .project__card {
    transform: translateY(6px);
    opacity: 0;
    animation: fadeUp .45s ease forwards;
}

/* Gestaffelte Verzögerung: Erhöhung um 0.07s pro Element */
.card:nth-child(1), .list .entry:nth-child(1), .project-block:nth-child(1), .grid .project__card:nth-child(1) {
    animation-delay: .05s;
}
.card:nth-child(2), .list .entry:nth-child(2), .project-block:nth-child(2), .grid .project__card:nth-child(2) {
    animation-delay: .12s; /* 0.05 + 0.07 */
}
.card:nth-child(3), .list .entry:nth-child(3), .project-block:nth-child(3), .grid .project__card:nth-child(3) {
    animation-delay: .19s; /* 0.12 + 0.07 */
}
.card:nth-child(4), .list .entry:nth-child(4), .project-block:nth-child(4), .grid .project__card:nth-child(4) {
    animation-delay: .26s; /* 0.19 + 0.07 */
}
.card:nth-child(5), .list .entry:nth-child(5), .project-block:nth-child(5), .grid .project__card:nth-child(5) {
    animation-delay: .33s; /* 0.26 + 0.07 */
}

/* Fallback fuer alle weiteren Elemente (ab dem 6. Element) */
.card:nth-child(n+6), .list .entry:nth-child(n+6), .project-block:nth-child(n+6), .grid .project__card:nth-child(n+6) {
    animation-delay: .4s; /* Startet nach dem 5. Element (0.33s) */
}

@keyframes fadeUp {
    to {
        transform: none;
        opacity: 1;
    }
}


/* --- 8. Responsive Design (NEU UND KORRIGIERT) --- */

@media (max-width: 1000px) {
    .tiles {
        grid-template-columns: repeat(2, 1fr)
    }
    .grid {
        /* NEU: Projektkarten springen auf 2 Spalten */
        grid-template-columns: repeat(2, 1fr); 
    }
    .photo-grid img {
        height: 140px
    }
}

@media (max-width: 600px) {
    /* --- Mobile Header Anpassungen --- */
    .topbar__inner {
        padding: 10px 18px; /* Innenabstand für kleine Bildschirme */
    }
    
    /* Hamburger-Menü Steuerung */
    .mainnav {
        display: none; /* Desktop Navigation verstecken */
    }
	/* Dies betrifft den Button, der nur mobil sichtbar ist */
	.menu-toggle {
			display: block; 
			z-index: 40; 
			
			/* NEU: WICHTIG fuer das Unicode-Zeichen */
			color: var(--text-light, white); /* Macht das Symbol hell */
			font-size: 2rem; /* Macht das Symbol deutlich sichtbar */
			line-height: 1; /* Stellt sicher, dass es zentriert ist */
			
			/* Optional: Entfernt den blauen Fokus-Rahmen */
			border: none;
			outline: none; 
			background: none;
			padding: 0;
		}
	
    
    /* Hauptmenü im mobilen Zustand öffnen */
    .mainnav.open {
        display: flex; /* Bessere Anordnung der Menüpunkte */
        flex-direction: column;
        
        position: absolute; 
        left: 0;
        right: 0;
        top: 56px; /* Position unterhalb des Brand-Links */
        
        background: var(--panel); 
        padding: 12px 18px 20px; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
        
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        z-index: 35;
    }
    
    /* Vertikales Layout für alle Listen */
    .mainnav ul,
    .dropdown ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        /* padding-left: 0; /* Entfernt die Standard-Einrueckung der Liste */ */
    }
    
    /* Alle Menü-Einträge und Links erhalten volle Breite für große Klickflächen */
    .mainnav ul li {
        width: 100%;
    }
    .mainnav a {
        display: block; /* WICHTIG: Macht die gesamte Link-Fläche klickbar */
        padding: 10px 0;
        border-radius: 0;
    }

    /* Dropdown-Container für Mobilgeräte anpassen */
    .dropdown {
        position: static; /* WICHTIG: Damit das Untermenü unter dem Hauptpunkt fließt */
        border: none;
        background: none;
        padding: 0 0 0 2.5rem; /* Leichte Einrückung für Unterpunkte */
        min-width: auto;
        box-shadow: none;
        display: block !important; /* Untermenü immer anzeigen, wenn Hauptmenü offen ist */
    }
    
    /* Optionale Trennlinie für den Hauptpunkt mit Dropdown */
    .has-dropdown {
        border-bottom: 1px solid var(--glass);
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    /* --- Projekt/Layout Anpassungen --- */
    .project-hero__media {
        height: 250px; 
        border-radius: 0;
    }
    .tiles {
        grid-template-columns: 1fr;
    }
    .grid { 
        grid-template-columns: 1fr; 
    }
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* --- Hero/Titel Anpassungen --- */
    .hero__overlay {
        align-items: center;
        text-align: center;
        padding: 1.2rem;
    }
    .hero__title {
        font-size: 1.6rem;
    }
}


/* --- Projekt-Seiten (Generations Duo) --- */

/* Hero Container */
.project-hero {
    position: relative;
    padding-top: 1rem; /* Abstand von der Navbar */
    margin-bottom: 1.5rem;
}

/* Hero Header (mit Titel und Buttons) */
.project-hero__header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
    padding-top: 2rem; /* Abstand nach dem Bild/Medien */
}

/* Hintergrundbild/Video-Wrap */
.project-hero__media {
    width: 100%;
    height: 350px; /* Definierte Höhe für das Hero-Bild */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin: 0 auto;
    max-width: 1100px;
}

/* Inhalt der Projektseite (zentriert und mit Abstand) */
.content-sections {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px 4rem; /* Abstand unten für Footer */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Abstand zwischen den Blöcken */
}

/* Listen-Stil für Details-Block */
.details-block .detail-list {
    list-style: none;
    padding-left: 0;
}
.details-block .detail-list li {
    padding: 5px 0;
    border-bottom: 1px solid var(--glass);
}
.details-block .detail-list li:last-child {
    border-bottom: none;
}

/* --- Link-Wrapper für klickbare Artikel (Archive/Kalender) --- */

.entry-link {
    display: block; /* Sehr wichtig, damit der Link die volle Breite einnimmt */
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit; /* Behält die Textfarbe der Seite (hellgrau/weiß) bei */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.entry-link:hover {
    /* Ein subtiler Hover-Effekt: Nur die Hintergrundfarbe ändert sich leicht */
    background-color: var(--glass); /* Ein sehr dezenter Effekt */
    text-decoration: none;
    transform: translateY(-1px); /* Die Karte springt minimal hoch, um Klickbarkeit zu zeigen */
}

/* Verhindert, dass der Titel beim Hovern blau wird, da der ganze Block klickbar ist */
.entry-link:hover h3 a {
    color: inherit; 
    text-decoration: none;
}

/* --- Styling fuer Bilder in Content Bloecken (z.B. 404 Seite) --- */

.entry-image {
    max-width: 100%; /* Das Bild ist nie breiter als der .entry Block (800px) */
    height: auto;    /* Behält das Seitenverhältnis bei */
    display: block;  /* Stellt sicher, dass das Bild sich ordentlich verhält */
    margin: 1.5rem auto; /* Zentriert das Bild und gibt oben/unten Abstand */
}