/* 1. VARIABLE DEFINITIONS */
:root {
    --sidebar-w: 300px;
    --bg: #fdfdfb; 
    --bg-rgb: 253, 253, 251; 
    --text: #1a1a2e; 
    --accent: #FF4500; 
    --grey: #ececec; 
    --shape-color: rgba(136, 136, 136, 0.2); 
}
@media (prefers-color-scheme: dark) {
    :root { 
        --bg: #0a0a0a; 
        --text: #f0f0f0; 
        --accent: #FF5E1A; 
        --grey: #1a1a1a; 
        --shape-color: rgba(102, 102, 102, 0.15);
    }
}

[data-theme="light"] { --bg-rgb: 253, 253, 251; --bg: #fdfdfb; --text: #1a1a2e; --accent: #FF4500; }
[data-theme="dark"] { --bg-rgb: 10, 10, 10; --bg: #0a0a0a; --text: #f0f0f0; --accent: #FF5E1A; --grey: #1a1a1a; }

[data-theme="dark"] .triple-switch,
[data-theme="chaos"] .triple-switch {
    background: #1a1a1a;
}

/* 2. BASE STYLES */
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: 'Inter', sans-serif; display: flex; height: 100vh; 
    overflow: hidden; transition: background 0.4s ease, color 0.4s ease;
}

.content-box {
    background: rgba(var(--bg-rgb), 0.6); 
    backdrop-filter: blur(15px) saturate(150%);; 
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    padding: 3.5rem;
    z-index: 2;
    position: relative;
    max-width: 900px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  
	transition: background 0.4s ease;
}
/* 3. ACCESSIBILITY HELPERS */
.sr-only { 
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
    overflow: hidden; clip: rect(0,0,0,0); border: 0; 
}

/* Der Skip-Link erscheint nur, wenn man die Tab-Taste benutzt */
.skip-link { 
    position: fixed; top: -100px; left: 20px; 
    background: var(--accent); color: white; 
    padding: 1rem; z-index: 9999; 
    text-decoration: none; transition: top 0.3s; 
}
.skip-link:focus { top: 20px; }

/* Deutlicher Fokus-Rahmen für Tastatur-Nutzer */
:focus-visible { 
    outline: 2px solid var(--accent); 
    outline-offset: 4px; 
}
/* 3. SIDEBAR & NAVIGATION */
.sidebar {
    width: var(--sidebar-w); height: 100vh; flex-shrink: 0; z-index: 100;
    background: var(--bg); border-right: 1px solid var(--grey);
    padding: 3rem 2rem; box-sizing: border-box; display: flex; flex-direction: column;
}

.logo { font-weight: 900; font-size: 1.5rem; color: var(--accent); margin-bottom: 2rem; }

.nav-links { list-style: none; padding: 0; margin-top: auto; }
.nav-links a { 
    text-decoration: none; color: var(--text); font-weight: bold; font-size: 0.8rem; 
    text-transform: uppercase; opacity: 0.4; display: block; padding: 0.6rem 0; transition: 0.3s; 
}
.nav-links a.active { opacity: 1; color: var(--accent); padding-left: 8px; }

/* 4. THEME SWITCHER */
.triple-switch { display: flex; background: var(--grey); border-radius: 8px; padding: 2px; position: relative; width: fit-content; }
.triple-switch input { display: none; }

.triple-switch label { padding: 10px; cursor: pointer; z-index: 2; display: flex; align-items: center; }

.triple-switch svg { width: 18px; height: 18px; stroke: var(--text); opacity: 0.5; }
input:checked + label svg { 
    opacity: 1; 
    stroke: #ffffff; 
}

.switch-selection {
    position: absolute; height: calc(100% - 4px); width: 33.33%;
    background: var(--accent); border-radius: 6px; top: 2px; left: 0;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
#t-light:checked ~ .switch-selection { transform: translateX(0); }
#t-dark:checked ~ .switch-selection { transform: translateX(100%); }
#t-chaos:checked ~ .switch-selection { transform: translateX(200%); }

/* 5. CONTENT SECTIONS */
.horizontal-wrapper { flex-grow: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
.slide { flex: 0 0 calc(100vw - var(--sidebar-w)); height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 5vw; box-sizing: border-box; }

.accent-text { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; transition: 0.4s; }

/* 6. ART GRID (Fixed) */
.art-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px; margin-top: 2rem; width: 100%;
}
.art-item { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; border: 1px solid var(--grey); position: relative; }
.art-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none !important; transition: none !important; }

/* 7. CHAOS ELEMENTS */
.chaos-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.float-shape, .chaos-only-shape {
    position: absolute;
    fill: var(--shape-color);
    transition: transform 0.3s ease-out;
}

.chaos-only-shape {
    display: block; 
    transition: color 0.5s ease, transform 0.4s ease-out;
}

[data-theme="chaos"] .chaos-only-shape {
    color: var(--accent) !important;
    opacity: 0.3 !important;
}
shape-react {
    transform: scale(1.2) !important;
    opacity: 0.4 !important;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.2); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.1; }
}
@keyframes drift {
    0% { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(4vw, 6vh) rotate(360deg); }
}
/* 8. LEGAL */
.legal-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--grey); }

.legal-link { 

    font-size: 0.75rem; text-transform: uppercase; 

    letter-spacing: 1px; text-decoration: none; 

    color: var(--text); opacity: 0.4; transition: 0.3s; 

}
.legal-link:hover { opacity: 1; color: var(--accent); }

.big-link { font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; text-decoration: none; color: var(--text); display: block; transition: 0.3s; }
.big-link:hover { color: var(--accent); transform: translateX(20px); }



@media (max-width: 768px)(prefers-color-scheme: dark) {
    :root { 
        --bg: #0a0a0a; 
        --bg-rgb: 10, 10, 10;
        --text: #f0f0f0; 
        --accent: #FF5E1A; 
        --grey: #1a1a1a; 
        --shape-color: rgba(102, 102, 102, 0.15); 
    }
	.content-box {
        padding: 2rem;
        margin: 1rem;
        backdrop-filter: blur(8px); 
    }
	body { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: fixed; top: 0; border-right: none; border-bottom: 1px solid var(--grey); }
    .slide { flex: 0 0 100vw; padding-top: 140px; }
}