/* --- CSS-Variablen für das Dark-Mode-Theme --- */
:root {
    --dark-bg: #121212;
    --darker-bg: #1E1E1E;
    --light-text: #E0E0E0;
    --accent-color: #a32cff; /* Ein eleganter Akzentton */
    --accent-color2: #FDFCBB; /* Ein eleganter Akzentton */
}

/* --- Grundlegende Body-Styles --- */
body {
    background-color: var(--dark-bg);
    color: var(--light-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 3rem 0; /* Mehr Abstand oben/unten */
    line-height: 1.6;
}

header {
            background-color: var(--darker-bg);
            padding: 20px;
            margin-bottom: 12rem;
            text-align: center;
        }

body {
    margin: 1%;
    padding: 0;
}

footer {
            background-color: var(--darker-bg);
            color: white;
            padding: 20px;
            margin-top: 12rem;
            text-align: center;
}

a {
    color: var(--light-text)
}

/* --- Container, der die Kacheln zentriert --- */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Kacheln */
    gap: 12rem; /* Abstand zwischen den Kacheln */
}

.gradient-text {
  /* Definiert den Farbverlauf. Du kannst hier deine eigenen Farben einfügen. */
  background: linear-gradient(to right, var(--accent-color), var(--accent-color2));
  
  /* Schneidet den Hintergrund auf die Form des Textes zu. */
  -webkit-background-clip: text;
  
  /* Macht den Text selbst transparent, damit der Hintergrund durchscheint. */
  -webkit-text-fill-color: transparent;
  
  /* Der folgende Teil ist für ältere Browser, die -webkit nicht unterstützen. */
  background-clip: text;
  text-fill-color: transparent;
}

/* --- Projekt-Kachel --- */
.project-card {
    /* NEU: Flexbox für Seite-an-Seite-Layout */
    display: flex;
    flex-direction: column;
    width: 80%; /* Breite der Kachel angepasst */
    padding: 5%;
    max-width: 900px; /* Maximale Breite für Lesbarkeit */
    background-color: var(--darker-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    margin: 0; /* Margin wird durch 'gap' im Container gesteuert */
    overflow: hidden;
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.5s ease;
}

.project-card:hover {
    transform: translateY(0) scale(1.2); /* Vergrößert die Kachel um 2% bei Hover */
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.6); /* Fügt einen stärkeren Schatten hinzu */
}

.project-main-content {
    display: flex; /* Richtet Bild und Inhalt nebeneinander aus */
    align-items: stretch;
    gap: 20px;
    flex-wrap: nowrap;
    flex-grow: 1; /* Nimmt den verbleibenden Platz ein */
}

/* SCHLÜSSEL: Kehrt die Reihenfolge für jede zweite Kachel um */
.project-card:nth-child(even) .project-main-content {
    flex-direction: row-reverse;
}

/* --- Animationsklassen --- */
.project-card.hidden {
    opacity: 0;
    transform: translateY(20px);
}
.project-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Bild- und Inhaltsbereich (jeweils 50% Breite) --- */
.project-image,
.project-content {
    width: 50%;
    box-sizing: border-box;
    padding: 25px;
}

/* --- Bild-Styling --- */
.project-image img {
    width: 100%;
    height: 100%; /* Wichtig für Flexbox, um die Höhe zu füllen */
    object-fit: cover; /* Verhindert Verzerrungen */
    display: block;
    border-radius: 10px; /* Fügt abgerundete Ecken hinzu */
    overflow: hidden; /* Wichtig, um */
}

/* --- Inhalts-Styling --- */
.project-content {
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
}

project-header {
    display: flex;
    align-items: flex-start; /* Icons und Titel sind oben ausgerichtet */
    justify-content: space-between;
    margin-bottom: 15px;
}

.project-titles {
    display: flex;
    flex-direction: column; /* Stapelt die Titel vertikal */
}

.project-header h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--accent-color);
}


.project-header h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #ffffff;
}

.project-header h3 {
    margin: 0; /* Entfernt den Außenabstand */
    font-size: 1rem;
    line-height: 1.5rem;
    color: #9E9E9E;
}

.project-icon {
    position: absolute; /* Position aus dem Fluss nehmen */
    bottom: 20px;
    right: 20px;
    width: 60px; /* 2.5x größer */
    height: 60px; /* 2.5x größer */
    fill: var(--accent-color);
}

.project-content ul {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 0; /* Mehr Abstand oben, um die Stichpunkte von der Unterüberschrift zu trennen */
    font-weight: bold;
    line-height: 1.5rem;
}

.project-content ul li {
    /* WICHTIG: Entfernt das Padding, da es die Zentrierung stört */
    padding-left: 0;
    margin-bottom: 8px;
    position: relative;
    margin-bottom: 25px;
    /* Zentriert die Stichpunkte im verfügbaren Raum */
}

.project-content ul li::before {
    content: '–';
    color: var(--accent-color);
    /* Entfernt die absolute Positionierung, da sie nicht mehr benötigt wird */
    position: static;
    margin-right: 8px;
}

/* Styling for the new hashtag section */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Abstände zwischen den Hashtags */
    padding: 20px;
    gap: 50px;
    background-color: var(--darker-bg);
    justify-content: center;
}

.tag {
    background-color: #383838;
    color: var(--light-text);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

#particle-container {
    position: fixed; /* Fixiert den Container, damit er sich nicht mit dem Inhalt bewegt */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Wichtig: Ermöglicht Klicks auf Elemente hinter dem Partikel-Effekt */
    z-index: -1; /* Stellt sicher, dass der Container hinter anderen Elementen liegt */
}

.particle {
    position: absolute;
    background-color: white; /* Weiße Partikel */
    border-radius: 50%;
    opacity: 0;
    animation: fade-out 2s forwards; /* Partikel verblassen über 2 Sekunden */
}


.spawn_particle {
    position: absolute;
    background-color: white; /* Weiße Partikel */
    border-radius: 50%;
    opacity: 0;
    animation: spawn 2s forwards; /* Partikel verblassen über 2 Sekunden */
}

@keyframes fade-out {
    from {
        transform: scale(1);
        opacity: 0.25;
    }
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes spawn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    20% {
        transform: scale(1);
        opacity: 0.25;
    }
    80% {
        opacity: 0.25;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

/* Grundlegende Stildefinitionen für die SVG-Zeilen */
.line-animation {
  opacity: 0; /* Die Zeilen sind standardmäßig unsichtbar */
  transform: translateX(-50px); /* Starte 50px links von ihrer endgültigen Position */
  animation-fill-mode: forwards; /* Halte den letzten Animationszustand */
}
/* --- Media Query für Smartphones --- */
@media (max-width: 1024px) { /* Passt die Darstellung für Bildschirme bis 768px an (typisch für Tablets und Smartphones) */
    header {
        margin-bottom: 5rem;
    }

    .project-main-content {
        flex-direction: column; /* Stapelt die Elemente vertikal */
    }
    
    .project-card:nth-child(even) .project-main-content {
        flex-direction: column; /* Überschreibt row-reverse für gerade Karten */
        padding: 0%;
        width: 100%;
    }

    .project-image,
    .project-content {
        width: 100%; /* Jedes Element nimmt die volle Breite ein */
        padding: 5%; /* Reduziert den Padding für kleinere Bildschirme */
    }
}