/* Theme Name: J-Rock Pop (No-Image DL V1.22) */
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap');

:root {
    --bg-base: #f8f9fa; --bg-card: #ffffff; --bg-header: rgba(255, 255, 255, 0.98);
    --brush-cyan: #00f3ff; --brush-pink: #ff003c; --brush-orange: #ff9e00;
    --text-main: #1a1a1a; --text-meta: #666666;
    --font-brush: 'Rock Salt', cursive; --font-body: 'M PLUS Rounded 1c', sans-serif;
    --col-yt: #ff0000; --col-x: #000000; --col-spotify: #1db954; --col-insta: #e1306c;
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-left: 1px solid #ddd; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--brush-cyan), var(--brush-pink)); border-radius: 10px; border: 3px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: var(--brush-pink); }
::selection { background: var(--brush-pink); color: #fff; text-shadow: 1px 1px 0 #000; }

body { background-color: var(--bg-base); color: var(--text-main); font-family: var(--font-body); margin: 0; padding: 0; overflow-x: hidden; background-image: url('https://www.transparenttextures.com/patterns/brush-strokes.png'); }
a { color: inherit; text-decoration: none; transition: 0.3s; }
a:hover { color: var(--brush-pink); }
img { max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }

#site-header { background: var(--bg-header); width: 100%; position: fixed; top: 0; z-index: 2000; backdrop-filter: blur(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-bottom: 5px solid transparent; border-image: url('https://i.imgur.com/3G9j1qj.png') 30 round; display: flex; justify-content: center; padding-top: 20px; padding-bottom: 15px; }
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #site-header { top: 46px; } }
.header-inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-area { margin-bottom: 10px; width: 100%; display: flex; justify-content: center; }
.custom-logo-link img { height: auto; max-height: 110px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.1)); transition: transform 0.3s ease; }
.custom-logo-link img:hover { transform: scale(1.03) rotate(-2deg); }
.main-nav { width: 100%; display: flex; justify-content: center; }
.main-nav ul { display: inline-flex; gap: 10px; list-style: none; margin:0; padding:0; flex-wrap: wrap; justify-content: center; }
.main-nav a { font-family: var(--font-brush); font-size: 14px; padding: 8px 25px; background: #fff; color: var(--text-main); border: 2px solid #eee; transform: rotate(-1deg); transition: 0.3s; }
.main-nav a:hover { background: var(--brush-pink); color: #fff; border-color: var(--brush-pink); transform: rotate(1deg) scale(1.1); box-shadow: 3px 3px 0px rgba(0,0,0,0.1); }

.hero-slider-wrap { margin-top: 180px; position: relative; width: 95%; max-width: 1200px; height: 60vh; min-height: 400px; margin-left: auto; margin-right: auto; overflow: hidden; margin-bottom: 50px; background: #000; box-shadow: 10px 10px 0px rgba(0,0,0,0.05); border: 5px solid var(--brush-cyan); transform: rotate(-1deg); }
@media (max-width: 600px) { .hero-slider-wrap { margin-top: 160px; width: 100%; border-width: 2px; transform: none; } .custom-logo-link img { max-height: 80px; } }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; transform: scale(1.0); z-index: 1; image-rendering: -webkit-optimize-contrast; }
.hero-slide.active { opacity: 1; z-index: 2; transform: scale(1.05); transition: opacity 1s ease-in-out, transform 6s linear; }
.hero-slide::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/brush-strokes.png'); opacity: 0.3; z-index: 3; pointer-events: none; }
.hero-slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 4; pointer-events: none; }
.slide-content { position: relative; z-index: 10; text-align: center; max-width: 800px; padding: 30px; background: rgba(255, 255, 255, 0.9); box-shadow: 5px 5px 0px var(--brush-pink); border: 2px solid var(--text-main); transform: rotate(1deg); }
.slide-title { font-family: var(--font-brush); font-size: 36px; color: var(--text-main); margin: 0 0 10px 0; line-height: 1.2; }
@media(min-width:768px){ .slide-title{ font-size: 50px; } }
.slide-meta { font-family: var(--font-body); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--brush-pink); margin-bottom: 10px; display: block; }
.slide-btn { display: inline-block; padding: 10px 30px; background: var(--text-main); color: #fff; font-family: var(--font-brush); font-size: 18px; border: none; margin-top: 15px; box-shadow: 3px 3px 0px var(--brush-cyan); transition: 0.3s; }
.slide-btn:hover { background: var(--brush-cyan); color: var(--text-main); box-shadow: 3px 3px 0px var(--text-main); transform: translate(-2px, -2px); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
h2 { color: var(--text-main); text-align: center; font-family: var(--font-brush); font-size: 36px; text-shadow: 3px 3px 0px rgba(0,0,0,0.05); }
h2 span { color: var(--brush-pink); text-decoration: underline wavy var(--brush-cyan); }
.jrock-card { background: var(--bg-card); overflow: hidden; transition: 0.3s; border: 2px solid #eee; display: flex; flex-direction: column; box-shadow: 5px 5px 0px rgba(0,0,0,0.05); }
.jrock-card:hover { transform: translate(-3px, -3px); border-color: var(--text-main); box-shadow: 8px 8px 0px var(--brush-pink); }
.card-img-wrap { width: 100%; height: 220px; position: relative; display: block; overflow: hidden; background-color: #eee; }
.card-img-wrap::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/brush-strokes.png'); opacity: 0.2; z-index: 5; pointer-events: none; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.5s ease; image-rendering: -webkit-optimize-contrast; }
.jrock-card:hover .card-img-wrap img { transform: scale(1.05) rotate(1deg); }
.card-body { padding: 20px; flex-grow: 1; display:flex; flex-direction:column; justify-content:center; }
.card-body h3 a { color: var(--text-main); font-family: var(--font-brush); font-size: 22px; }
.card-body h3 a:hover { color: var(--brush-pink); }
.card-body div { color: var(--text-meta); font-family: var(--font-body); }

/* DL Card Tweaks */
.dl-card {
    min-height: 150px; 
    border-left: 5px solid var(--brush-orange);
}
.dl-card-no-img .card-body {
    /* Zentriert den Text in der Box */
    padding: 30px !important;
}

.download-btn-small {
    display: inline-block; padding: 10px 20px; 
    background: var(--brush-orange); color: #000;
    font-family: var(--font-brush); font-size: 14px;
    border: 2px solid var(--text-main);
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    transition: 0.3s;
}
.download-btn-small:hover { 
    background: #000; color: var(--brush-orange); 
    box-shadow: 5px 5px 0px var(--brush-cyan);
}

.social-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.social-btn { display: flex; align-items: center; justify-content: center; width: 200px; padding: 15px; font-family: var(--font-brush); font-size: 18px; color: #fff !important; text-decoration: none; border: 2px solid #1a1a1a; box-shadow: 5px 5px 0px rgba(0,0,0,0.1); transform: rotate(-1deg); transition: 0.3s; }
.social-btn:hover { transform: rotate(1deg) scale(1.05); box-shadow: 8px 8px 0px rgba(0,0,0,0.2); }
.social-yt { background: var(--col-yt); } .social-x { background: var(--col-x); } .social-spotify { background: var(--col-spotify); } .social-insta { background: var(--col-insta); }

.sticky-player { position: fixed; bottom: 20px; right: 20px; background: var(--text-main); color: #fff; padding: 10px 20px; font-family: var(--font-brush); display: flex; align-items: center; gap: 10px; box-shadow: 5px 5px 0px var(--brush-pink); z-index: 9999; font-size: 14px; cursor: pointer; border: 2px solid #fff; transform: rotate(-2deg); transition: 0.3s; }
.sticky-player:hover { transform: scale(1.05) rotate(0deg); }
.sticky-player.playing { background: var(--text-main); border-color: var(--brush-cyan); box-shadow: 5px 5px 0px var(--brush-cyan); animation: pulse-beat 1s infinite; }
@keyframes pulse-beat { 0% {transform: scale(1);} 50% {transform: scale(1.03);} 100% {transform: scale(1);} }

footer { background: #fff; color: var(--text-meta); border-top: 5px solid var(--brush-pink); padding: 60px 0; margin-top: 50px; text-align: center; font-family: var(--font-brush); background-image: url('https://www.transparenttextures.com/patterns/brush-strokes.png'); }
footer p { font-size: 14px; opacity: 0.8; }