:root {
    /* Light Mode Base */
    --bg-gradient: linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
    --apple-black: #1D1D1F;
    --navy-blue: #003366;
    --apple-grey: #86868B;
    --tile-bg: rgba(255, 255, 255, 0.75);
    --border-color: rgba(255, 255, 255, 0.5);
    --mc-green: #24D366;
    
    /* Icon Colors for Glow */
    --glow-ha: rgba(3, 169, 244, 0.15);
    --glow-dsm: rgba(0, 120, 212, 0.15);
    --glow-mc: rgba(36, 211, 102, 0.15);
    --glow-file: rgba(248, 148, 6, 0.15);
    --glow-photo: rgba(255, 45, 85, 0.15);
    --glow-audio: rgba(175, 82, 222, 0.15);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-gradient: linear-gradient(135deg, #1C1C1E 0%, #000000 100%);
        --apple-black: #F5F5F7;
        --navy-blue: #3399FF; /* Helleres Blau für Kontrast */
        --apple-grey: #A1A1A6;
        --tile-bg: rgba(44, 44, 46, 0.6);
        --border-color: rgba(255, 255, 255, 0.1);
        
        /* Intensiverer Glow für Dark Mode */
        --glow-ha: rgba(3, 169, 244, 0.25);
        --glow-dsm: rgba(0, 120, 212, 0.25);
        --glow-mc: rgba(36, 211, 102, 0.25);
        --glow-file: rgba(248, 148, 6, 0.25);
        --glow-photo: rgba(255, 45, 85, 0.25);
        --glow-audio: rgba(175, 82, 222, 0.25);
    }
}

body {
    margin: 0; padding: 0;
    background: var(--bg-gradient);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--apple-black);
    -webkit-font-smoothing: antialiased;
    perspective: 1200px;
    transition: background 0.5s ease, color 0.5s ease;
}

.main-wrapper { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; }

.main-header { 
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    margin-bottom: 50px; width: 100%;
}

.main-logo { width: 55px; height: auto; margin-right: 20px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }

.header-text-group { display: flex; flex-direction: column; align-items: center; text-align: center; }
.header-title { font-size: 28px; font-weight: 300; letter-spacing: 2px; margin: 0; text-transform: uppercase; line-height: 1.0; }
.header-title span { font-weight: 800; color: var(--navy-blue); }
.header-subtitle { font-size: 10px; font-weight: 700; color: var(--apple-grey); letter-spacing: 7px; text-transform: uppercase; margin-top: 6px; margin-right: -7px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; width: 100%; max-width: 1000px; }

.tile {
    background: var(--tile-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    min-height: 170px; border-radius: 22px; padding: 25px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    text-decoration: none; color: inherit;
    /* Schnelle, reaktionsfreudige Transitions */
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), 
                box-shadow 0.3s ease, 
                background 0.3s ease, 
                border-color 0.3s ease;
    transform-style: preserve-3d;
}

.tile:hover {
    transform: translateY(-8px) rotateX(6deg) rotateY(-4deg);
    background: var(--tile-bg); /* Beibehaltung der Transparenz */
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- DYNAMISCHE GLOW EFFEKTE --- */
/* Nutzt nth-child, um die Kacheln in der HTML-Reihenfolge anzusprechen */
.tile:nth-child(1):hover { box-shadow: 0 20px 40px var(--glow-ha); }
.tile:nth-child(2):hover { box-shadow: 0 20px 40px var(--glow-dsm); }
.info-tile:hover { box-shadow: 0 20px 40px var(--glow-mc); }
.tile:nth-child(4):hover { box-shadow: 0 20px 40px var(--glow-file); }
.tile:nth-child(5):hover { box-shadow: 0 20px 40px var(--glow-photo); }
.tile:nth-child(6):hover { box-shadow: 0 20px 40px var(--glow-audio); }

/* --- LOGOS & ICONS (FEST VERANKERT) --- */
.icon-box { 
    width: 48px; height: 48px; margin-bottom: 18px; 
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transform: translateZ(35px);
}

/* Home Assistant */
.icon-ha { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303A9F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='2'/%3E%3Cpath d='M12 15v3M10 13l-2 1M14 13l2 1'/%3E%3C/svg%3E"); }

/* DSM */
.icon-dsm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='6' rx='1'/%3E%3Crect x='2' y='13' width='20' height='6' rx='1'/%3E%3Ccircle cx='5' cy='8' r='0.5' fill='%230078D4'/%3E%3Ccircle cx='5' cy='16' r='0.5' fill='%230078D4'/%3E%3C/svg%3E"); }

/* Minecraft */
.mc-brand-wrapper { display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; transform: translateZ(20px); }
.icon-box-small { width: 42px; height: 42px; margin-bottom: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.icon-mc-creeper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324D366' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M7 8h2v2H7zM15 8h2v2h-2zM11 12h2v2h-2zM9 14h2v2H9zM13 14h2v2h-2z'/%3E%3C/svg%3E"); }
.mc-title { font-size: 17px; font-weight: 600; margin: 0; }
.mc-title span { color: var(--mc-green); }

/* Synology Stations */
.icon-file { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F89406' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.icon-photo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2D55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E"); }
.icon-audio { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF52DE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }

/* Textelemente */
.tile h2 { font-size: 17px; font-weight: 600; margin: 0; transform: translateZ(20px); }
.tile p { font-size: 12px; color: var(--apple-grey); margin-top: 4px; transform: translateZ(12px); }

/* Minecraft Status Area */
.status-area { margin-top: 15px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 12px; width: 100%; text-align: center; transform: translateZ(15px); }
.mc-address { font-size: 14px; font-weight: 700; color: var(--apple-black); display: block; margin-bottom: 3px; }
.status-text { font-size: 9px; font-weight: 700; color: var(--apple-grey); display: block; margin-bottom: 3px; }
.player-info-text { font-size: 10px; font-weight: 400; color: var(--apple-grey); display: block; }

/* Status Dot Animation */
@keyframes status-pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.status-dot { display: inline-block; width: 7px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.pulse-animation { animation: status-pulse 2s infinite ease-in-out; }

@media (max-width: 950px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }