:root{--bg:#000;--fg:#fff;--mut:#8b8b96;--acc:#8C7CFF;--line:#1d1d24;
      --mono:"SF Mono",ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}

nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:24px;align-items:center;height:58px;font-size:14px;letter-spacing:1px}
nav .logo{height:20px;display:block}
nav .wrap>a:first-child{margin-right:auto;line-height:0}
nav a{color:var(--fg);opacity:.7} nav a:hover,nav a.on{opacity:1;text-decoration:none}
nav a.on{color:var(--acc)}

header.hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;
            text-align:center;overflow:hidden}
header.hero .bg{position:absolute;inset:0;background:url('assets/band.jpg') center/cover no-repeat}
header.hero .veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.35) 0%,rgba(0,0,0,.78) 60%,#000 100%)}
header.hero .inner{position:relative;padding:90px 24px}
header.hero img{width:min(420px,76vw);display:block;margin:0 auto 26px}
header.hero p{margin:0 0 34px;color:#d8d8e2;font-size:17px;letter-spacing:.5px}

.pagehead{padding:64px 0 10px}
.pagehead h1{font-size:40px;margin:0 0 10px;letter-spacing:-.5px;font-weight:700}
.pagehead p{color:var(--mut);margin:0;max-width:62ch}

.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border:1px solid var(--acc);color:var(--acc);
     font-size:14px;letter-spacing:2px;text-transform:lowercase}
.btn:hover{background:var(--acc);color:#000;text-decoration:none}
.btn.solid{background:var(--acc);color:#000} .btn.solid:hover{background:#fff;border-color:#fff}
.btn.small{padding:8px 16px;font-size:12px}

section{padding:70px 0;border-top:1px solid var(--line)}
section.plain{border-top:none}
h2{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--mut);
   margin:0 0 28px;font-weight:400}
h3{font-size:20px;margin:34px 0 10px;letter-spacing:.5px}

.gig{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
     padding:20px 0;border-bottom:1px solid var(--line)}
.gig .date{color:var(--acc);font-size:20px;letter-spacing:1px;min-width:124px}
.gig .what{font-size:18px} .gig .where{color:var(--mut)}
.gig a.btn{margin-left:auto}
.gig.past .date{color:var(--mut);font-size:17px} .gig.past .what{font-size:16px;color:#d4d4de}
.more{margin-top:22px;font-size:14px;color:var(--mut)}

.player{line-height:0}
.player iframe{display:block;width:100%;border:0}
.karte img{width:100%;display:block;border:1px solid var(--line)}

.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.crew figure{margin:0}
.crew img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:grayscale(.15)}
.crew figcaption{padding-top:12px}
.crew .name{font-size:19px;letter-spacing:1px}
.crew .role{color:var(--mut);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.crew .handle{color:var(--acc);font-size:13px}

blockquote{margin:0;font-size:26px;line-height:1.45}
blockquote cite{display:block;margin-top:16px;font-size:13px;letter-spacing:2px;
                color:var(--mut);font-style:normal}

.vst{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.vst img{width:100%;display:block;border:1px solid var(--line)}
.vst ul{margin:0 0 26px;padding-left:20px;color:#cfcfda} .vst li{margin-bottom:7px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid3 img{width:100%;height:260px;object-fit:cover;display:block;border:1px solid var(--line)}
.grid3 .tall{grid-row:span 2} .grid3 .tall img{height:534px}

.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);padding:22px}
.card .ph{height:190px;border:1px dashed #2e2e3a;display:flex;align-items:center;
          justify-content:center;color:#45454f;font-size:13px;margin-bottom:16px}
.card .t{font-size:17px} .card .p{color:var(--acc);margin-top:4px}

table.fakten{width:100%;border-collapse:collapse;font-size:15px}
table.fakten td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.fakten td:first-child{color:var(--mut);width:210px}
.todo{color:#ffd27a}
.hinweis{border-left:2px solid var(--acc);padding:4px 0 4px 16px;color:#cfcfda;margin:26px 0}

footer{border-top:1px solid var(--line);padding:50px 0 70px;color:var(--mut);font-size:14px}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer a{color:var(--fg)} footer .credit{margin-top:34px;font-size:12px;color:#55555f}

@media(max-width:860px){
  .crew{grid-template-columns:repeat(2,1fr)}
  .vst,.shop,.grid3{grid-template-columns:1fr}
  .grid3 img,.grid3 .tall img{height:300px}
  header.hero{min-height:68vh} blockquote{font-size:21px}
  nav .wrap{gap:14px;font-size:13px;overflow-x:auto}
  .pagehead h1{font-size:30px}
  .gig .date{min-width:100px}
}

.lauf{color:#cfcfda;font-size:15px;line-height:1.75;max-width:78ch;margin:0 0 14px}
.band{padding:18px 0;border-bottom:1px solid var(--line)}
.band .bn{font-size:19px;letter-spacing:1px;color:var(--acc)}
.band .bn a{color:inherit}
.band .bd{color:#cfcfda;font-size:15px;margin-top:4px;max-width:78ch}
.flyerwrap{padding-top:26px}
.flyer{display:block;width:100%;max-width:520px;margin:0 auto;border:1px solid var(--line)}

/* Logo-Streifen ueber dem Startbild (26.10.2026) */
.logobar{background:#000;padding:30px 0 24px}
.logobar img{width:min(400px,64vw);display:block;margin:0 auto}

/* Instagram-Kacheln ueber der Fusszeile */
.igfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.igk{border:1px solid var(--line);display:flex;flex-direction:column}
.igk .ph{position:relative;aspect-ratio:4/5;background:#0b0b10;overflow:hidden;line-height:0}
.igk .ph video,.igk .ph img,.igk .ph .leer{width:100%;height:100%;display:block;object-fit:cover;background:#0b0b10}
.igk .ph video.laeuft{object-fit:contain;background:#000}
.igk .tx{margin:0;padding:13px 15px 0;font-size:14px;line-height:1.5;color:#cfcfda;flex:1}
.igk .dt{margin:0;padding:10px 15px 14px;font-size:12px;letter-spacing:1px;color:var(--mut)}
@media(max-width:860px){
  .logobar{padding:22px 0 18px}
  .igfeed{grid-template-columns:1fr}
  .igk .ph{aspect-ratio:1/1}
}