/* SIDEK!CK Poster Theme — gritty paper / stencil look */
:root{
  --paper:#F4EEDD; /* warm paper */
  --ink:#0E0E0E;  /* near-black */
  --yellow:#FFC933;
  --teal:#2EC9C9;
  --muted:#6A6A6A;
  --white:#fff;
  --shadow: 0 6px 18px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: url("assets/img/backg_p.png")  repeat;*/

    /*radial-gradient(1200px 600px at 20% 0%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0,0,0,.05), transparent 70%),
    linear-gradient(#f9f5e7, #f2ecd8 50%, #efe6cf);*/
	
}

/* Typography tweaks for poster look */
@font-face{font-family:'Sticker'; src: local('Stardos Stencil'), local('Allerta Stencil');}
.h1-stencil,.hero-title,.tagline,.right-head{font-family: 'Special Elite','Sticker','Oswald',sans-serif; letter-spacing:.5px}
.smallcaps{font-variant: all-small-caps; letter-spacing: .06em}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; position:sticky; top:0; z-index:20;
  background: rgba(245,240,224,.92);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid #111;
}
.logo img{height:66px}
.main-nav{display:flex; gap:18px; align-items:center; font-weight:600}
.main-nav a{color:var(--ink); text-decoration:none; position:relative}
.main-nav a::after{content:''; position:absolute; left:0; bottom:-4px; width:0; height:3px; background:var(--yellow); transition:width .2s}
.main-nav a:hover::after{width:100%}
.right-head{display:flex; gap:18px; align-items:center}
.lang-switch button{border:2px solid #111; background:var(--yellow); padding:6px 10px; cursor:pointer; font-weight:700}
.lang-switch button+button{background:var(--teal)}

/* Hero */
.hero{position:relative; padding:56px 18px 28px; overflow:hidden;}
.hero::before{
	opacity: 0.65; /* anpassen zwischen 0.25 – 0.65 */
  content:''; position:absolute; inset:0; z-index:-1;
  background:
	url("assets/img/SK_3.jpg") center/cover no-repeat;
   /*radial-gradient(1200px 580px at -15% -10%, rgba(0,0,0,.15), transparent 50%),
    radial-gradient(900px 420px at 110% -20%, rgba(0,0,0,.12), transparent 55%),
    repeating-linear-gradient(160deg, rgba(0,0,0,.03) 0 6px, transparent 6px 16px),
    linear-gradient(180deg, #f6f1de, #efe7cf);*/
  filter: contrast(1.02) saturate(.98);
}
.hero-inner{max-width:1100px; margin:0 auto;}
.hero-badge{display:flex; align-items:center; gap:12px; margin-bottom:18px; transform: rotate(3deg);}
.hero-title{font-size:clamp(28px,6vw,64px); font-weight:900; line-height:1.05; text-transform:uppercase; 
  padding:15px 14px;  color:var(--white); ;
  display:inline-block; }
.hero-strip{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px}
.sticker{display:inline-block; background:var(--yellow); color:#111; font-weight:900; padding:10px 14px; 
  box-shadow: var(--shadow); transform: rotate(-2deg); border:3px solid #111;}
.sticker.teal{background:var(--teal)}
.tagline{font-size:clamp(16px,2.5vw,22px); margin:8px 0 0; font-weight:600}
.sticker2{display:inline-block; background:var(--yellow); color:#111; font-weight:900; padding:10px 14px; 
  box-shadow: var(--shadow); transform: rotate(-8deg); border:3px solid #111;}
  
/* CTA Buttons */
.buttons{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn{appearance:none; border:none; text-decoration:none; cursor:pointer; font-weight:800; letter-spacing:.02em;
  padding:10px 14px; display:inline-flex; align-items:center; gap:8px; border:3px solid #111; color:#111; background:#fff; box-shadow:var(--shadow)}
.btn-yellow{background:var(--yellow)}
.btn-teal{background:var(--teal)}
.btn-dark{background:#111; color:#fff}
.btn:hover{transform: translateY(-1px);background:var(--yellow);transform: rotate(2deg)}

/* Sections */
.section{max-width:1100px; margin:28px auto; padding:0 18px}
.section-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:10px}
.section h2{font-size:clamp(22px,3.5vw,36px); text-transform:uppercase; font-weight:900}
.chip{background:#111; color:#fff; padding:8px 10px; border:3px solid #000; box-shadow:var(--shadow)}

/* Toolbar */
.toolbar{display:flex; gap:12px; align-items:center; margin:10px 0 18px; flex-wrap:wrap}
#search{border:3px solid #111; padding:10px 12px; background:#fff; min-width:240px}
#filter{border:3px solid #111; padding:10px 12px; background:#fff}

/* Shows list styled like poster slate */
.shows{display:grid; gap:14px}
.show{display:grid; grid-template-columns: 96px 1fr auto; gap:12px; align-items:center; background:#111; color:#fff; border:4px solid #000; box-shadow: var(--shadow); padding:12px; position:relative}
.show .date{background:var(--paper); color:#111; border:3px solid #000; text-align:center; padding:10px 6px; font-weight:900}
.show .date b{display:block; font-size:26px;}
.show .date small{font-size:12px}
.show .meta{display:grid; gap:6px}
.place{font-weight:800}
.line{color:#ddd}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.badge{background:var(--teal); color:#111; padding:5px 8px; font-weight:900; border:3px solid #000}
.badge.upcoming{background:var(--yellow)}
.badge.past{background:#e0ddd2}
.actions{display:flex; gap:8px}
.actions .btn{background:var(--yellow)}

.past-toggle{text-align:center; margin-top:12px}
.past-toggle .btn{background:var(--teal);}

/* Band grid */
.band-grid{display:grid; color:var(--white); grid-template-columns: 1.0fr 1.0fr; gap:18px}
.band-photo{width:100%; transform: rotate(3deg); border:6px solid var(--white); box-shadow:var(--shadow)}

/* Media panels */
.media-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.panel{background:#fff; border:4px solid #000; transform: rotate(0deg);  box-shadow: var(--shadow); padding:12px}
.panel1{background:#fff; border:4px solid #000; transform: rotate(-2deg);  box-shadow: var(--shadow); padding:12px}
.panel2{background:#fff; border:4px solid #000; transform: rotate(2deg);  box-shadow: var(--shadow); padding:12px}
.embed-wrapper iframe{width:100%; height:315px}

/* Downloads */
.download-button{display:inline-block; background:#FFC933; border:3px solid #111; padding:10px 14px; margin-right:10px; font-weight:800}
.download-button2{display:inline-block; background:#2EC9C9;transform: rotate(-2deg); border:3px solid #111; padding:10px 14px; margin-right:10px; font-weight:800}
.download-button:hover{transform: translateY(-1px)}
.download-button2:hover{transform: translateY(-1px)}


/* Newsletter */
.newsletter{background:#111; color:#fff; padding:18px; border-top:4px solid #000; border-bottom:4px solid #000}
.newsletter .wrap{max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center}
.newsletter h3{margin:0; font-size:22px}
.newsletter input[type=email]{padding:10px 12px; border:3px solid #fff; background:#222; color:#fff; min-width:260px}
.newsletter button{padding:10px 14px; border:3px solid #fff; background:var(--yellow); color:#111; font-weight:900}

/* Footer */
.site-footer{max-width:1100px; margin:18px auto 40px; padding:0 18px; text-align:center; color:#333}
.site-footer a{color:inherit}

/* Responsive */
@media (max-width: 860px){
  .band-grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr}
  .show{grid-template-columns:80px 1fr}
  .actions{grid-column:1 / -1}
}
@media (max-width: 600px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
    text-align: center;
  }

  .logo img {
    height: 48px;
  }

  .right-head {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .main-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .main-nav a {
    font-size: 15px;
  }

  .lang-switch button {
    padding: 4px 8px;
    font-size: 14px;
  }
}
@media (max-width: 600px) {

  .hero {
    padding: 32px 12px 18px;
  }

  .hero-badge img {
    height: 90px !important;
  }

  .hero-badge {
    flex-direction: column;
    transform: none; /* verhindert horizontalen Overflow */
    text-align: center;
  }

  .hero-title {
    font-size: 28px !important;
    padding: 8px 16px;
    background-size: 200% 300%; /* Grafik anpassen */
  }

  .hero-strip {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .buttons {
    justify-content: center;
  }

  .btn {
    padding: 8px 10px;
  }
}

/* Make all headings use the same font as .hero-title */
h1, h2, h3, h4, h5, h6, .section h2 {
  font-family: 'Special Elite','Sticker','Oswald',sans-serif;
}


/* Yellow charcoal stripe behind section headings */

.section h2 {
 
display: inline-block;
  background-image: url('assets/img/dash_teal.png');
  background-repeat: no-repeat;
  background-size: 140% 460%;  /* größer als Text */
  background-position: center center;
  padding: 10px 20px;
}

.hero-title{
display: inline-block;
  background-image: url('assets/img/dash_b.png');
  background-repeat: no-repeat;
  background-size: 135% 550%;  /* größer als Text */
  background-position: center center;
  padding: 15px 50px;
}

.band-grid{
display: inline-block;
  background-image: url('assets/img/block_b.png');
  background-repeat: no-repeat;
  background-size: 125% 215%;  /* größer als Text */
  background-position: center center;
  padding: 15px 50px;
}