/* --- LOKALE FONTS EINBINDEN (DSGVO SAFE) --- */

@font-face {
    font-family: 'Syncopate';
    src: url('fonts/Syncopate-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* Verhindert unsichtbaren Text beim Laden */
}

@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- GLOBALE STYLES & VARIABLEN --- */
:root {
    /* Deine Farben */
    --color-bg-dark: #37464a;
    --color-lime: #cfe98d;
    --color-cyan: #00ded9;
    --color-text-white: #ffffff;
    --color-placeholder-grey: #b5b7b9;

    /* DEINE LOKALEN SCHRIFTARTEN */
    --font-header: 'Syncopate', sans-serif;
    --font-text: 'Google Sans', sans-serif;
}

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

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    font-family: var(--font-text);
    overflow-x: hidden; /* Verhindert seitliches Scrollen wegen des Wellenhintergrunds */
}

/* --- TAG TEAM VANTA LAYERS (SMOOTH FADE) --- */
.vanta-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    /* Zurück zum butterweichen 4-Sekunden-Überblenden */
    transition: opacity 4s ease-in-out; 
}

.active-layer {
    opacity: 1;
}

.hidden-layer {
    opacity: 0;
}


/* --- INHALTS-WRAPPERS --- */
.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 50px; /* Abstand zwischen den Sektionen */
}

/* --- HEADER SEKTION --- */
.header-main-title {
    font-family: var(--font-header); /* Syncopate greift hier! */
    color: var(--color-lime);
    font-size: 3rem;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-weight: 700; /* Falls du die fette Version triggern willst */
}

.intro-text {
    font-family: var(--font-text); /* Google Sans */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
    font-size: 1.1rem;
    padding: 0 20px;
}

.intro-text b {
    color: var(--color-lime); /* Highlightet wichtige Stellen */
    font-family: var(--font-header); /* Syncopate für Akzente */
    font-size: 0.9rem;
}

/* --- SEKTIONS-ÜBERSCHRIFTEN --- */
.section-title {
    font-family: var(--font-header); /* Und hier auch! */
    color: var(--color-lime);
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Unter-Labels */
.gallery-title,
.events-title,
.music-title,
.games-title,
.addme-title {
    color: var(--color-cyan);
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* --- GALERIE-GRID --- */
.gallery-container {
    line-height: 0;
    column-count: 3; /* 3 Spalten am Desktop */
    column-gap: 15px; /* Abstand zwischen den Spalten */
}

.gallery-item {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;
    
    /* FIX: Hier stand vorher zoom-in, wir nehmen jetzt den Standard-Pfeil */
    cursor: default; 
}

.gallery-item:hover {
    transform: scale(1.02);
    border-color: var(--color-cyan);
}

/* Responsive: Auf dem Handy nur 1 oder 2 Spalten */
@media (max-width: 800px) {
    .gallery-container { column-count: 2; }
}
@media (max-width: 500px) {
    .gallery-container { column-count: 1; }
}

/* Text-Labels in der Galerie */
a {
    color: #ffffff;
    text-decoration: none;}
.gallery-text p {
    font-size: 0.8rem;
    color: var(--color-text-white);
    line-height: 1.4;
}

.item-text-1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding-top: 10px;
    padding-left: 5px;
}

.item-text-2 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
    padding-top: 10px;
    padding-left: 5px;
}


/* --- EVENTS GRID SETUP (Original Colors) --- */
.events-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.event-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    min-width: 0;
}

.event-logo {
    width: 100%;
    max-width: 80px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    
    /* Filter gelöscht: Logos zeigen jetzt ihre echten Farben! */
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.event-name {
    font-family: var(--font-text);
    color: var(--color-text-white);
    font-size: 0.8rem;
    text-align: center;
    transition: color 0.3s ease;
}

/* --- HOVER ACTION --- */
.event-item:hover .event-logo {
    /* Ein satter Cyan-Glow um das farbige Logo sieht richtig High-Tech aus */
    filter: drop-shadow(0 0 12px var(--color-cyan));
    transform: translateY(-5px) scale(1.05);
}

.event-item:hover .event-name {
    color: var(--color-cyan);
}

/* Mobile Fix: Wenn es auf dem Handy zu eng wird, zwei Zeilen erlauben */
@media (max-width: 600px) {
    .events-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    .event-item {
        flex: 0 1 40%; /* Zwei nebeneinander auf dem Handy */
    }
}

.event-item {
    display: flex;
    align-items: center; /* Logo und Text vertikal zentrieren */
    gap: 20px; /* Abstand zwischen Logo und Text */
    background-color: rgba(255, 255, 255, 0.03); /* Ganz dezenter Hintergrund */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none; /* Link-Unterstreichung weg */
    transition: all 0.3s ease;
}

/* --- THE LOGO MAGIC (Funktioniert für SVG, PNG, JPG) --- */
.event-name {
    font-family: var(--font-text); /* Google Sans */
    color: var(--color-text-white);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* --- EVENT HOVER EFFEKT --- */
.event-item:hover {
    background-color: rgba(0, 224, 255, 0.05); /* Dezenter Cyan-Hintergrund */
    border-color: rgba(0, 224, 255, 0.2);
    transform: translateX(5px); /* Leichte Bewegung nach rechts */
}

/* Das Logo beim Hovern einfärben (Cyan Glow) */
.event-item:hover .event-logo {
    /* Schritt 2: Filter ausschalten (Originalfarbe kommt zurück) */
    filter: brightness(1) invert(0) 
            /* Schritt 3: Den Cyan-Glow drüberlegen */
            drop-shadow(0 0 8px var(--color-cyan));
    
    transform: scale(1.05);
}

.event-item:hover .event-name {
    color: var(--color-cyan); /* Text wird auch Cyan */
}
/* --- MUSIC SEKTION --- */
.music-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: 15px;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Basis-Setup für die Music Icons (falls du noch andere ergänzen willst) */
.music-icon {
    width: 25px;
    height: 25px;
    display: inline-block;
}

/* YT Music Icon Setup */
.yt-music-icon {
    background-color: var(--color-text-white); /* Startfarbe: Weiß */
    -webkit-mask: url('addMe/youtubemusic.svg') no-repeat center / contain;
    mask: url('addMe/youtubemusic.svg') no-repeat center / contain;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover-Effekt: Cyan! Sheesh! */
.yt-music-icon:hover {
    background-color: var(--color-lime);
    transform: scale(1.1);
}

.music-item p {
    font-size: 0.9rem;
    color: var(--color-text-white);
}

/* --- GAMES SEKTION --- */
.games-list {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.game-item {
    width: 18%; /* Platz für 5 Icons */
    text-align: center;
}

.game-item p {
    font-size: 0.8rem;
    color: var(--color-text-white);
    margin-bottom: 8px;
}

/* --- UPDATED: UNIFIED GAME ICON STYLING --- */
/* (Ersetzt den alten .icon-placeholder Block) */

/* Basis-Setup für die Game-Icon-Fläche */
.game-icon {
    width: 100%; /* Füllt die 18% Breite des .game-item aus */
    aspect-ratio: 1 / 1; /* Behält die quadratische Form des Platzhalters bei */
    display: inline-block;
    transition: all 0.3s ease; /* Smoother Übergang für Hover */
    
    /* Approach 1: Masking (Wie AddMe Icons) */
    background-color: var(--color-text-white); /* Startfarbe: Weiß */
    
    /* Kugelsicheres Longhand-Masking-Setup */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Optional: Damit der Game-Name oben Google Sans nutzt und clean aussieht */
.game-item p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    font-family: var(--font-text);
}

/* --- GAME-ICON HOVER EFFEKT --- */
/* Tech-Cyan und ein minimaler 'AAA-Gamer' Glow */
.game-icon:hover {
    background-color: var(--color-cyan);
    transform: translateY(-4px) scale(1.03); /* Minimale Bewegung nach oben */
    filter: drop-shadow(0 4px 10px rgba(0, 224, 255, 0.3)); /* Cyan Glow */
}


/* --- SPEZIFISCHE MASKEN-LINKS --- */
/* (Pfade müssen exakt zu deinen Dateien passen, z.B. lol.svg, valorant.svg...) */

.lol-icon {
    -webkit-mask-image: url('games/leagueoflegends.svg');
    mask-image: url('games/leagueoflegends.svg');
}

.valorant-icon {
    -webkit-mask-image: url('games/valorant.svg');
    mask-image: url('games/valorant.svg');
}

.arc-icon {
    -webkit-mask-image: url('games/ARC_Raiders.svg');
    mask-image: url('games/ARC_Raiders.svg');
}

.finals-icon {
    -webkit-mask-image: url('games/thefinals.svg');
    mask-image: url('games/thefinals.svg');
}

.vrchat-icon {
    -webkit-mask-image: url('games/vrchat.svg');
    mask-image: url('games/vrchat.svg');
}

/* --- INTERAKTIVE GAME ITEMS --- */
.game-item.clickable {
    cursor: pointer; /* Zeigt die Hand beim Hovern */
    text-decoration: none; /* Entfernt die Link-Unterstreichung bei den Steam-Games */
    display: block;
}

/* Der Text in den Game-Items */
.game-item p.game-name {
    font-size: 0.85rem;
    color: var(--color-text-white);
    margin-bottom: 8px;
    font-family: var(--font-text);
    transition: color 0.3s ease; /* Smoother Farbwechsel für das Feedback */
}

/* Text wird beim Hovern leicht eingefärbt, passend zum Icon */
.game-item.clickable:hover p.game-name {
    color: var(--color-cyan);
}

/* --- ADD ME ON SEKTION --- */
.addme-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    gap: 15px;
}

.addme-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Basis-Setup für alle Add-Me Icons */
.addme-icon {
    width: 25px;
    height: 25px;
    display: inline-block;
}

/* Die spezifischen Icons als Schablonen (Masks) laden */
.discord-icon {
    background-color: var(--color-text-white); /* Hier bestimmst du die Farbe des Icons! */
    -webkit-mask: url('addMe/discord.svg') no-repeat center / contain;
    mask: url('addMe/discord.svg') no-repeat center / contain;
}

.telegram-icon {
    background-color: var(--color-text-white);
    -webkit-mask: url('addMe/telegram.svg') no-repeat center / contain;
    mask: url('addMe/telegram.svg') no-repeat center / contain;
}
/* Instagram Inline-SVG Fix */
.insta-inline {
    width: 25px;
    height: 25px;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Wir targeten den Pfad im Inneren für die Farbe */
.insta-inline path {
    fill: var(--color-text-white);
    transition: fill 0.3s ease;
}

/* Hover-Effekt für Instagram */
.insta-inline:hover path {
    fill: var(--color-lime); /* Bleibt Limettengrün beim Hover */
}

.insta-inline:hover {
    transform: scale(1.1);
}
.steam-icon {
    background-color: var(--color-text-white);
    -webkit-mask: url('addMe/steam.svg') no-repeat center / contain;
    mask: url('addMe/steam.svg') no-repeat center / contain;
}

/* Hover-Effekt: Mach sie limettengrün, wenn du drübergehst! Sheesh! */
.addme-icon:hover {
    background-color: var(--color-lime);
    transition: background-color 0.3s ease;
}


.addme-item p {
    font-size: 0.9rem;
    color: var(--color-text-white);
}

/* --- LEGAL FOOTER --- */
.legal-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-link {
    font-family: var(--font-text);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-divider {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
    font-size: 0.75rem;
}

.legal-link:hover {
    color: var(--color-cyan);
}

/* --- LEGAL PAGES STYLING --- */
.legal-page-container {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    min-height: 100vh;
}

.legal-content {
    background: rgba(11, 14, 20, 0.8); /* Dunkler Glas-Effekt für Lesbarkeit */
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 224, 255, 0.1);
    font-family: var(--font-text);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* Styling für die Standard-Tags vom Generator */
.legal-content h2 {
    font-family: var(--font-header);
    color: var(--color-lime);
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

.legal-content p {
    margin-bottom: 15px;
}

/* Der stylische Back-Button */
.back-to-lab {
    display: inline-block;
    margin-bottom: 30px;
    font-family: var(--font-header);
    color: var(--color-cyan);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.back-to-lab:hover {
    color: var(--color-lime);
    transform: translateX(-5px);
}

.back-arrow {
    margin-right: 10px;
}

/* --- MOBILE ANPASSUNG (Subtil) --- */
@media (max-width: 600px) {
    .header-main-title { font-size: 2rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .item-text-1, .item-text-2 { grid-column: span 2; padding-left: 0; padding-top: 5px; }
    .events-list, .games-list { flex-direction: column; gap: 15px; }
    .event-card, .game-item { width: 100%; }
    .card-placeholder { height: 100px; }
    .music-list, .addme-list { grid-template-columns: 1fr; }
}