*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0d0d0f;color:#f5f5f5;font-family:Arial,sans-serif;background-image:repeating-linear-gradient(110deg,transparent 0 60px,#ffffff05 61px 62px)}a{color:inherit}header,main,footer{max-width:1120px;margin:auto}header img{width:100%;height:auto;display:block}nav{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:16px 10px}nav a,.social a,.shop a{display:inline-block;border:2px dashed #ddd;padding:12px 16px;text-decoration:none;text-transform:uppercase;font-weight:800;background:#151518;box-shadow:4px 4px #234b9c;transition:.15s}nav a:hover,.social a:hover,.shop a:hover{background:#234b9c;transform:translateY(-3px)}main{padding:0 20px}section{padding:28px 0;border-bottom:1px dashed #444}h2{font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(26px,4vw,38px);letter-spacing:.035em;font-weight:700;text-transform:uppercase;margin:0 0 24px;display:flex;align-items:center;gap:12px}h2:before{content:'★';color:#3159ad;font-size:1.25em}h3{font-size:20px}p{line-height:1.65}iframe{border:0;border-radius:12px;width:100%}.music{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.video{aspect-ratio:16/9}.video iframe{height:100%;border-radius:0}.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.photos button{border:2px dashed white;background:black;padding:3px;cursor:zoom-in;box-shadow:4px 4px #3159ad}.photos img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.social{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.dates article{padding:14px;border-left:4px solid #3159ad;background:#1b1b20;margin-bottom:12px}.shop{text-align:center}.shop a{margin:12px auto}footer{text-align:center;padding:35px 15px;color:#bbb}dialog{max-width:96vw;max-height:95vh;background:#111;border:2px solid white;padding:10px}dialog img{display:block;max-width:90vw;max-height:88vh;object-fit:contain}dialog button{position:absolute;right:10px;top:10px;background:black;color:white;border:1px solid white;font-size:26px;cursor:pointer}@media(max-width:650px){main{padding:0 13px}.music,.videos{grid-template-columns:1fr}.photos{grid-template-columns:repeat(2,1fr)}nav a{font-size:13px;padding:10px 11px}.social a{font-size:13px;padding:11px}section{padding:22px 0}}
/* Navigation above the hero image */
header nav{position:relative;z-index:2;padding:13px 10px 15px;background:#09090b}header nav a{font-size:clamp(12px,1.55vw,17px)}header img{display:block;width:100%;height:auto;object-fit:contain}
/* Navigation IM Headerbild, am oberen Rand */
header{position:relative}
header nav{position:absolute;top:1.5%;left:0;right:0;z-index:5;background:transparent;padding:0 12px;gap:8px}
header nav a{background:rgba(7,7,12,.86);font-size:clamp(11px,1.4vw,16px);padding:10px 13px;text-shadow:0 1px 2px #000}
@media(max-width:650px){header nav{top:1%;gap:5px;padding:0 5px}header nav a{font-size:clamp(9px,2.35vw,13px);padding:6px 7px;box-shadow:2px 2px #234b9c}}


/* WILDE ZEITEN – punk zine design refresh */
body{background-color:#080b11;background-image:radial-gradient(circle at 12% 15%,#4566b425 0 1px,transparent 2px),radial-gradient(circle at 81% 61%,#e43d4b24 0 1.4px,transparent 2.5px),repeating-linear-gradient(113deg,transparent 0 77px,#ffffff04 78px 79px);background-size:33px 35px,57px 49px,auto;font-family:Verdana,Arial,sans-serif;color:#f0f0f1}
header,main,footer{max-width:1100px}main{margin:22px auto;padding:22px 28px 30px;background:#10141b;border:1px solid #3c4558;box-shadow:9px 9px 0 #1c366c, -7px -7px 0 #121720;position:relative}
main:before{content:'';pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#e34d5322 .8px,transparent 1.6px),radial-gradient(#4977c122 1px,transparent 2px);background-size:29px 31px,41px 43px;opacity:.8}
main>section{position:relative;margin:16px 0 22px;padding:24px 26px;background:linear-gradient(145deg,#1b202b,#151920 80%);border:1px solid #303a4c;border-left:5px solid #335cb5;box-shadow:5px 5px 0 #090c13}
main>section:nth-child(even){border-left-color:#d43e52}
h2{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:clamp(25px,3.7vw,36px);font-weight:700;letter-spacing:.055em;line-height:1.28;text-shadow:2px 2px #111;margin-bottom:20px}h2:before{color:#4375db;text-shadow:2px 2px #070a12}
h3{font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:.025em;font-weight:700}
section p{font-size:15px;line-height:1.85;max-width:78ch;color:#e0e4ec}#band>p:first-of-type{max-width:76ch;background:#10151e;border-left:3px solid #a33b50;padding:20px 22px;line-height:1.95;box-shadow:inset 0 0 0 1px #ffffff08}
.punk-link{display:inline-block;background:#263f7c;border:2px dashed #aec5ff;padding:13px 19px;color:#fff;font-weight:700;text-decoration:none;box-shadow:4px 4px #b4314b;transform:rotate(-1deg)}.punk-link:hover{background:#b4314b}
.social-inline{margin-top:20px;border-top:1px dashed #64718c;padding-top:13px}.social-inline a{color:#9ebcff;text-decoration:underline;text-underline-offset:4px;font-size:14px}.social-inline a:hover{color:#fff}
.release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.release{background:#10141d;border:1px solid #43506a;padding:18px;box-shadow:3px 3px #243f7a}.release h3{margin:8px 0;font-size:19px}.release p{margin:0;font-size:13px}.release-year{font-size:13px;color:#91b0f8;font-weight:bold}.back-link{display:inline-block;margin:15px;color:#fff;background:#17264b;padding:10px 15px;text-decoration:none;border:1px dashed #fff}.subpage-header img{max-height:350px;object-fit:contain}
@media(max-width:700px){main{margin:12px 8px;padding:9px;box-shadow:4px 4px #1c366c}main>section{padding:17px 14px;margin:12px 0}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}section p{font-size:14px}#band>p:first-of-type{padding:13px}}
@media(max-width:400px){.release-grid{grid-template-columns:1fr}}

/* Abstand der Social-Media-Leiste zum Header */
header + .social, header ~ .social{margin-top:30px!important;}
header .social{margin-top:30px!important;}
.social{margin-top:30px!important;}
@media(max-width:650px){.social{margin-top:24px!important;}}

/* Social-Buttons deutlich unterhalb des Headerbilds, auch auf Mobilgeraeten */
header .social{margin-top:0!important;padding-top:56px!important;padding-bottom:12px!important;position:relative!important;transform:none!important;}
@media(max-width:650px){header .social{padding-top:52px!important;}}