/* =====================================================
   BASE
===================================================== */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
    transition: background-color 0.8s ease;
}

body.inner {
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.inner.page-loaded {
    opacity: 1;
}

body.fade-out {
    background-color: transparent !important;
    transition: background-color 0.6s ease;
}

/* =====================================================
   GRID / SQUARES
===================================================== */

.sq {
    position: relative;
    border-radius: 6px;
    cursor: url("cursor1.png") 16 16, auto !important;
    opacity: 0;
    transition:
        opacity 0.4s ease,
        width 0.45s ease,
        height 0.45s ease;
}

.sq.loaded {
    opacity: 1;
}

.sq:hover {
    transform: scale(1.05);
}

/* =====================================================
   OVERLAY – SANFTE FADE-IN / FADE-OUT
===================================================== */

#color-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1; /* Vollton */
    z-index: 9999;
    background-color: #000; /* Standard, wird JS überschreiben */
    transition:
        width 0.6s ease-out,
        height 0.6s ease-out;
}

#color-overlay.show {
    width: 300vmax;
    height: 300vmax;
    opacity: 1 !important; /* Vollton, keine Transparenz */
}

/* =====================================================
   CONTENT
===================================================== */

body.inner .grid {
    display: none;
}

.content-area {
    position: relative;
    z-index: 10;
    padding: 80px;
    max-width: 900px;
    margin: 0 auto;
    background: transparent;
}

/* =====================================================
   TEXT COLOR AUTO
===================================================== */

body.dark-bg,
body.dark-bg .content-area,
body.dark-bg a {
    color: #fff;
}

body.light-bg,
body.light-bg .content-area,
body.light-bg a {
    color: #111;
}

/* =====================================================
   LABELS
===================================================== */

.sq-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.7;
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: none;
    opacity: 0;
    filter: blur(0.6px);
    mix-blend-mode: overlay;
    pointer-events: none;
    user-select: none;
    animation: labelFadeIn 1.5s ease forwards;
    animation-delay: 1s;
}

@keyframes labelFadeIn {
    to { opacity: 0.45; filter: blur(0.2px); }
}

@keyframes labelPulse { 0% {opacity:0.22;} 50% {opacity:0.35;} 100% {opacity:0.22;} }

/* =====================================================
   SPIRITS
===================================================== */

.sq.spirit-dark .sq-label {
    mix-blend-mode: screen;
    color: rgba(255,255,255,0.85);
    animation: labelFadeIn 1.5s ease forwards, blackBreath 9s ease-in-out infinite;
}
@keyframes blackBreath { 0%{opacity:0.15;} 50%{opacity:0.45;} 100%{opacity:0.15;} }

.sq.spirit-orange .sq-label {
    mix-blend-mode: screen;
    color: rgba(255,120,40,0.85);
    animation: labelFadeIn 1.5s ease forwards, orangeGlow 10s ease-in-out infinite;
}
@keyframes orangeGlow { 0%{opacity:0.35;} 50%{opacity:0.75; text-shadow:0 0 10px rgba(255,140,40,0.35);} 100%{opacity:0.35;} }

.sq.spirit-blue .sq-label {
    mix-blend-mode: screen;
    color: rgba(180,220,255,0.9);
    animation: labelFadeIn 1.5s ease forwards, blueGlow 12s ease-in-out infinite;
}
@keyframes blueGlow { 0%{opacity:0.25;} 50%{opacity:0.65; text-shadow:0 0 10px rgba(107,190,242,0.45);} 100%{opacity:0.25;} }

.sq.spirit-neon .sq-label {
    mix-blend-mode: multiply;
    color: rgba(60,70,0,0.9);
    animation: labelFadeIn 1.2s ease forwards, neonPulse 13s ease-in-out infinite;
}
@keyframes neonPulse { 0%,100%{opacity:0.1;} 50%{opacity:0.5;} }

.sq.spirit-light .sq-label {
    mix-blend-mode: multiply;
    color: rgba(40,40,40,0.85);
    animation: labelFadeIn 1.2s ease forwards, lightPulse 14s ease-in-out infinite;
}
@keyframes lightPulse { 0%,100%{opacity:0.15;} 50%{opacity:0.45;} }

/* =====================================================
   BACK BUTTON
===================================================== */

#back-button {
    position: fixed;
    right: 28px;
    bottom: 28px;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    color: currentColor;
    opacity: 0.35;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#back-button:hover {
    opacity: 0.85;
    transform: translateX(-2px);
}

body.home #back-button { display: none; }

@media (max-width: 640px) {
    body.home #back-button { display: none; }

    body.inner #back-button { font-size: 0; }

    body.inner #back-button::after {
        content: "zurück";
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: lowercase;
        opacity: 0;
        animation: backFadeIn 0.4s ease 0.5s forwards;
    }
}

@keyframes backFadeIn { to { opacity: 0.55; } }

/* =====================================================
   VINYL GRID
===================================================== */

.vinyl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.vinyl-tile { background:#111; color:#eee; display:flex; flex-direction:column; min-height:420px; border-radius:8px; overflow:hidden; }
.vinyl-cover img { width:100%; height:auto; display:block; }
.vinyl-text { padding:1rem; font-size:0.95rem; line-height:1.45; }

@media (max-width: 768px) {
    body { overflow-y:auto; }
    .item-page, .item-page>div, .vinyl-grid { height:auto !important; max-height:none !important; overflow:visible !important; }
}

/* =====================================================
   UNIVERSAL CONTENT GRID / TILE
===================================================== */

.content-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }
.content-tile { display:flex; flex-direction:column; min-height:420px; border-radius:8px; overflow:hidden; background:#111; color:#eee; }
.content-tile-media img { width:100%; height:auto; display:block; }
.content-tile-text { padding:1rem; font-size:0.95rem; line-height:1.45; }

/* =====================================================
   SECTION COLORS
===================================================== */

.content-tile[data-section="vinyl"],
.content-tile[data-section="apecafe"],
.content-tile[data-section="apeland"],
.content-tile[data-section="goto"],
.content-tile[data-section="visionen"] {
    background:#111;
    color:#eee;
}

/* =====================================================
   DESKTOP SCROLL
===================================================== */

.item-page { overflow-y:auto !important; }
body { overflow-y:auto !important; }

#legal-links {
    position: fixed;
    left: 28px;           /* gleiche Höhe wie Back-Button */
    bottom: 28px;
    font-size: 12px;
    color: rgba(255,255,255,0.35); /* gleiche Transparenz wie Back-Button */
    font-family: sans-serif;
    z-index: 9999;
    pointer-events: auto;
    user-select: none;
    transition: opacity 0.25s ease, color 0.25s ease;
}

#legal-links {
    position: fixed;
    left: 28px;
    bottom: 28px;
    font-size: 12px;
    font-family: sans-serif;
    z-index: 9999;

    display: flex;
    flex-direction: column;   /* <-- zwingt untereinander */
    align-items: flex-start;  /* linksbündig */
    gap: 4px;

    opacity: 0.65;
    transition: opacity 0.25s ease, color 0.25s ease;
}

#legal-links a {
    display: block;           /* <-- wichtig */
    color: inherit;
    text-decoration: none;
    margin: 0;
}


#legal-links:hover {
    opacity: 0.95;
}

@media (max-width: 1024px) {
    #legal-links {
        left: 12px;
        bottom: 12px;
        font-size: 10px;
    }
}