* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
:root {
  --bg:#1f1f21; --card:#4b4b4b; --fg:#f4f4f5;
  --accent:#f3b51b; --accent-contrast:#111;
}
body { background:var(--bg); color:var(--fg); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { max-width:1100px; margin:0 auto; padding:0 1rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:#000c; backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid #ffffff1a; }
.nav { display:flex; align-items:center; justify-content:space-between; height:56px; }
.logo a { color:#fff; font-weight:900; letter-spacing:.5px; font-size:1.75rem; }
.menu { display:flex; gap:.9rem; align-items:center; }
.menu a { color:#fff; font-size:.95rem; }
.menu .cta { background:var(--accent); color:var(--accent-contrast); padding:.55rem .9rem; border-radius:.6rem; font-weight:700; }
.burger { display:none; color:#fff; font-size:1.4rem; }

/* Hero */
.hero { height:100vh; min-height:520px; background:#000 center/cover no-repeat; position:relative; display:grid; place-items:center; text-align:center; }
.hero.has-image { background-image:url('../images/hero.jpg'); }
.hero .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* Desktop Hero - ursprüngliches Layout beibehalten */
@media (min-width: 861px) {
  .hero.has-image { 
    background-image:url('../images/hero.jpg'); 
  }
  .hero .hero-bg {
    display: none; /* Verstecke img auf Desktop, nutze background-image */
  }
}
.hero .overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.hero .inner { position:relative; z-index:1; padding:1rem; }
.hero h1 { font-size: clamp(2rem, 4vw + 1rem, 4rem); margin:0 0 .6rem; font-weight:900; animation: fadeInUp 1s ease-out 0.2s both; }
.hero p.lead { max-width:720px; margin:0 auto 1rem; opacity:.95; animation: fadeInUp 1s ease-out 0.4s both; }
.hero .hero-actions { animation: fadeInUp 1s ease-out 0.6s both; }
.btn { display:inline-block; padding:.75rem 1.1rem; border-radius:.7rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all .3s ease; }
.btn.primary { background:var(--accent); color:var(--accent-contrast); box-shadow:0 2px 8px rgba(243, 181, 27, 0.3); }
.btn.primary:hover { background:#e6a517; transform:translateY(-1px); box-shadow:0 4px 12px rgba(243, 181, 27, 0.4); }
.btn.secondary { background:rgba(255, 255, 255, 0.1); color:#fff; border:1px solid rgba(255, 255, 255, 0.2); }
.btn.secondary:hover { background:rgba(255, 255, 255, 0.2); transform:translateY(-1px); }
.btn.dark { background:#111; color:#fff; }

/* Content */
.section { padding:2rem 0; }
.section h2 { font-size:1.8rem; margin:0 0 1rem; font-weight:800; }
.prose p { margin:.9rem 0; }

/* Highlight */
.highlight { background:var(--accent); color:var(--accent-contrast); text-align:center; padding:2rem 1rem; border-radius:1.1rem; }

/* Highlight mit Bild */
.highlight--with-image {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.highlight-image {
  margin: .2rem auto 0;
  line-height: 0;           /* removes inline gap */
  max-width: 100%;
}

.highlight-image img {
  width: 100%;
  height: auto;             /* behält das natürliche Seitenverhältnis */
  border-radius: .7rem;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  /* Wenn das Banner extrem schmal ist, optional leicht begrenzen: */
  /* max-height: 320px; object-fit: cover; */
}

/* Button im Highlight etwas Abstand nach oben */
.highlight--with-image .btn.dark {
  margin: .2rem auto 0;
}

/* News */
.news-card { background:#ffffff14; border:1px solid #ffffff22; border-radius:1rem; padding:2rem; margin:1rem 0; }
.news-content p { margin:1rem 0; line-height:1.6; }
.news-greeting { font-size:1.1rem; margin-bottom:1.5rem; }
.highlight-text { color:var(--accent); font-weight:700; }
.news-cta { font-weight:600; margin:1.5rem 0 1rem; }
.news-actions { margin:1rem 0; }
.news-actions p { margin:.8rem 0; }
.news-link { color:var(--accent); font-weight:600; text-decoration:none; }
.news-link:hover { text-decoration:underline; }
.news-closing { font-style:italic; margin:1.5rem 0 1rem; }
.news-slogan { color:var(--accent); font-weight:700; font-size:1.1rem; margin-top:1.5rem; }

/* Newsletter */
.newsletter-card { background:#ffffff14; border:1px solid #ffffff22; border-radius:1rem; padding:2rem; margin:1rem 0; }
.newsletter-content { max-width:600px; margin:0 auto; }
.newsletter-intro { font-size:1.1rem; margin-bottom:2rem; text-align:center; }
.newsletter-form { margin:2rem 0; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:.5rem; font-weight:600; color:var(--accent); }
.form-group input { width:100%; padding:.8rem 1rem; border:1px solid #ffffff44; border-radius:.6rem; background:#ffffff14; color:#fff; font-size:1rem; }
.form-group input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(243, 181, 27, 0.2); }
.form-group input::placeholder { color:#ffffff66; }
.form-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:2rem 0; }
.newsletter-info { margin-top:2rem; padding-top:2rem; border-top:1px solid #ffffff22; }
.newsletter-info ul { margin:1rem 0; padding-left:1.5rem; }
.newsletter-info li { margin:.5rem 0; }
.privacy-note { font-size:.9rem; opacity:.8; margin-top:1rem; font-style:italic; }

/* Band */
.grid { display:grid; gap:1rem; }
.band-card { background:#ffffff14; border:1px solid #ffffff22; border-radius:1rem; padding:1rem; display:grid; grid-template-columns:140px 1fr; gap:1rem; align-items:start; }
.band-card img { width:100%; height:140px; object-fit:cover; border-radius:.7rem; background:#000; }
.band-card h3 { margin:.1rem 0 .4rem; font-size:1.2rem; }
.band-card p { margin:.2rem 0; font-size:.95rem; }

/* Termine */
.termine-timeline { display:flex; flex-direction:column; gap:0; }
.event { position:relative; background:#4b4b4b; border-radius:.8rem; padding:1rem 1.2rem; margin-bottom:.5rem; color:#fff; }
.event.featured { background:var(--accent); color:var(--accent-contrast); }
.event:not(:last-child)::after { content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:16px; height:2px; background:#4b4b4b; }
.event:not(:last-child)::before { content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:4px solid #4b4b4b; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.event-date { font-weight:800; font-size:1.1rem; margin-bottom:.3rem; }
.event-title { font-weight:600; margin-bottom:.2rem; }
.event-location { font-size:.9rem; opacity:.8; }

/* Media */
.gallery-placeholder { background:#ffffff14; border:1px dashed #ffffff44; padding:1.2rem; text-align:center; border-radius:.9rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1rem; margin:1rem 0; }
.gallery-item { border-radius:1rem; overflow:hidden; background:#000; }
.gallery-item img { width:100%; height:250px; object-fit:cover; transition:transform .3s ease; }
.gallery-item:hover img { transform:scale(1.05); }

/* Karussell */
.carousel-container { position:relative; max-width:800px; margin:2rem auto; }
.carousel { position:relative; width:100%; height:400px; overflow:hidden; border-radius:1rem; background:#000; }
.carousel-slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.5s ease-in-out; }
.carousel-slide.active { opacity:1; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.7); color:#fff; border:none; width:50px; height:50px; border-radius:50%; font-size:24px; cursor:pointer; z-index:10; transition:all .3s ease; display:flex; align-items:center; justify-content:center; }
.carousel-arrow:hover { background:var(--accent); color:#000; }
.carousel-arrow-left { left:-70px; }
.carousel-arrow-right { right:-70px; }
.carousel-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.dot { width:12px; height:12px; border-radius:50%; background:#ffffff44; cursor:pointer; transition:background .3s ease; }
.dot.active { background:var(--accent); }
.dot:hover { background:var(--accent); }

.video { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:1rem; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; }

/* Video Karussell */
.video-carousel-container { position:relative; max-width:800px; margin:2rem auto; }
.video-carousel { position:relative; width:100%; height:450px; overflow:hidden; border-radius:1rem; background:#000; }
.video-carousel-slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.5s ease-in-out; }
.video-carousel-slide.active { opacity:1; }
.video-carousel-slide .video { height:100%; }
.video-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.7); color:#fff; border:none; width:50px; height:50px; border-radius:50%; font-size:24px; cursor:pointer; z-index:10; transition:all .3s ease; display:flex; align-items:center; justify-content:center; }
.video-carousel-arrow:hover { background:var(--accent); color:#000; }
.video-carousel-arrow-left { left:-70px; }
.video-carousel-arrow-right { right:-70px; }
.video-carousel-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.video-dot { width:12px; height:12px; border-radius:50%; background:#ffffff44; cursor:pointer; transition:background .3s ease; }
.video-dot.active { background:var(--accent); }
.video-dot:hover { background:var(--accent); }

/* Footer */
.site-footer { margin-top:2rem; border-top:1px solid #ffffff1a; background:#000c; text-align:center; padding:1rem; font-size:.9rem; }
.site-footer a { color:var(--accent); }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Section spacing for onepager */
section { scroll-margin-top: 80px; }

/* Responsive */
@media (max-width: 860px) {
  .band-card { grid-template-columns:1fr; }
  .event { grid-template-columns:1fr; text-align:left; }
  .menu { display:none; }
  .burger { display:block; }
  .menu.open { display:flex; flex-direction:column; align-items:flex-start; padding:.8rem 0; }
  
  /* Karussell responsive */
  .carousel-arrow { width:40px; height:40px; font-size:20px; }
  .carousel-arrow-left { left:-50px; }
  .carousel-arrow-right { right:-50px; }
  
  /* Video Karussell responsive */
  .video-carousel-arrow { width:40px; height:40px; font-size:20px; }
  .video-carousel-arrow-left { left:-50px; }
  .video-carousel-arrow-right { right:-50px; }
  .video-carousel { height:300px; }
  
  /* Termine Timeline responsive */
  .event { padding:.8rem 1rem; font-size:.9rem; }
  .event:not(:last-child)::after { left:-6px; width:12px; }
  .event:not(:last-child)::before { left:-10px; }
}

/* Hero Animationen */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll Animationen */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero Text Lesbarkeit verbessern */
/* 1) Etwas dunklere Bild-Überlagerung */
.hero .overlay{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.45) 40%,
    rgba(0,0,0,.78) 100%
  );
}

/* 2) "Scrim" hinter dem Textblock (leichtes, transparentes Panel) */
.hero .inner{
  position: relative;
}
.hero .inner::before{
  content:"";
  position:absolute;
  inset:-.5rem;               /* Panel etwas größer als der Text */
  border-radius: .9rem;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(2px); /* macht es ruhiger, bleibt aber durchsichtig */
  z-index:-1;
}

/* 3) Deutlicher Textschatten (konturiert auf hellem Bild) */
.hero h1{
  color:#fff;
  line-height:1.1;
  text-shadow: 0 3px 16px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.6);
}
.hero p.lead{
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

/* Dünne Outline nur für WebKit */
@supports (-webkit-text-stroke: 1px black){
  .hero h1{ -webkit-text-stroke: 1px rgba(0,0,0,.25); }
}

/* ========== Mobile-first Typografie & Abstände ========== */
:root{
  /* Flüssige Typo-Skala */
  --step--1: clamp(.9rem, .85rem + .4vw, 1rem);
  --step-0:  clamp(1rem, .95rem + .6vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.05rem + 1.4vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.3rem + 2.4vw, 2.2rem);
  --step-3:  clamp(2.2rem, 1.8rem + 3.6vw, 3rem);
}
body{ 
  font-size:var(--step-0); 
  -webkit-tap-highlight-color: transparent; 
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
}
h1{ font-size:var(--step-3); line-height:1.1; }
h2{ font-size:var(--step-2); }
h3{ font-size:var(--step-1); }

/* Desktop: Ursprüngliche Hero-Typografie beibehalten */
@media (min-width: 861px) {
  .hero h1 { 
    font-size: clamp(2rem, 4vw + 1rem, 4rem); 
    line-height: 1.1;
  }
  .hero p.lead { 
    font-size: 16px; 
    line-height: 1.6;
  }
}
.section{ padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) 0; }
.container{ 
  padding-left:max(1rem, env(safe-area-inset-left)); 
  padding-right:max(1rem, env(safe-area-inset-right)); 
  max-width: 100vw; /* Verhindert Überlauf */
  box-sizing: border-box;
}

/* ========== Buttons: große Touch-Ziele (≥44px) ========== */
.btn{ min-height: 44px; padding:.85rem 1.15rem; border-radius:.8rem; }
@media (max-width: 520px){
  /* Buttons auf kleinen Phones besser stapeln */
  .hero .inner .btn{ width:100%; max-width: 320px; }
}

/* ========== Header / Mobile-Menü ========== */
.no-scroll { overflow:hidden; }
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; z-index:49;
}
.menu.open + .menu-overlay{ display:block; }

/* Mobile-Menü als Panel */
@media (max-width: 860px){
  .menu{
    position: fixed; top:56px; right:1rem; left:auto;
    background:rgba(17, 17, 17, 0.95); 
    backdrop-filter: blur(10px);
    border:1px solid #ffffff22; border-radius:1rem;
    display:none; flex-direction:column; gap:0;
    padding:1.5rem 1.25rem; z-index:50;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    width: 160px;
  }
  .menu.open{ 
    display: flex;
  }
  .menu a {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
  }
  .menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
  }
  .menu .cta {
    background: var(--accent);
    color: var(--accent-contrast);
    margin-top: 0.5rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    display: block;
  }
  .menu .cta:hover {
    background: #e6a517;
    transform: translateX(4px);
  }
  .menu .cta .desktop-text {
    display: none;
  }
  .menu .cta .mobile-text {
    display: inline;
  }
}
/* Desktop bleibt wie gehabt */
@media (min-width: 861px){
  .burger{ display:none; }
  .menu .cta .desktop-text {
    display: inline;
  }
  .menu .cta .mobile-text {
    display: none;
  }
}

/* ========== Hero: Fokus/Zoom, volle Höhe, beste Lesbarkeit ========== */
@media (max-width: 860px) {
  .hero{
    --hero-x:50%;
    --hero-y:34%;
    --hero-zoom:1.10;   /* 1 = kein Zoom; >1 = reinzoomen */
    height: 82vh; min-height: 520px; overflow:hidden;
  }
  .hero .hero-bg{
    object-fit: cover;
    object-position: var(--hero-x) var(--hero-y);
    transform: scale(var(--hero-zoom));
    transform-origin: var(--hero-x) var(--hero-y);
  }
  @media (max-aspect-ratio: 16/9){ .hero{ --hero-y: 30%; --hero-zoom:1.06; } }
  @media (max-aspect-ratio: 4/3){  .hero{ --hero-y: 38%; --hero-zoom:1.02; } }
  @media (max-width: 480px){      .hero{ --hero-y: 36%; --hero-zoom:1.14; } }
}

/* Hero-Textpanel noch lesbarer auf Handy */
.hero .inner::before{
  background: rgba(0,0,0,.45);
}
.hero h1{ text-shadow: 0 3px 16px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.6); }
.hero p.lead{ text-shadow: 0 2px 8px rgba(0,0,0,.65); }

/* ========== Layouts: Band & Termine mobil ========== */
@media (max-width: 860px){
  /* Vollbildschirm auf Mobile */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
  
  /* Container anpassen */
  .container {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  
  /* Alle Elemente in Bildschirmbreite */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .band-card{ 
    grid-template-columns:1fr; 
    gap: 1.5rem;
    width: 100%;
  }
  .band-card img { 
    width: 100%; 
    height: 280px; 
    object-fit: cover; 
    border-radius: .7rem; 
    background: #000; 
  }
  .event{ 
    grid-template-columns:1fr; 
    width: 100%;
  }
  
  /* Hero-Text auf Handy nach unten verschieben */
  .hero .inner {
    transform: translateY(180px);
  }
  
  /* Karussell responsive */
  .carousel-container {
    width: 100%;
    max-width: 100vw;
  }
  
  .carousel {
    width: 100%;
  }
  
  /* Pfeile in Mobile-Variante in die Karussells hineinschieben */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-arrow:hover {
    background: var(--accent);
    color: #000;
  }
  .carousel-arrow-left {
    left: 10px;
  }
  .carousel-arrow-right {
    right: 10px;
  }
  
  /* Video responsive */
  .video {
    width: 100%;
    max-width: 100%;
  }
  
  /* Video-Pfeile in Mobile-Variante in die Videos hineinschieben */
  .video-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-carousel-arrow:hover {
    background: var(--accent);
    color: #000;
  }
  .video-carousel-arrow-left {
    left: 10px;
  }
  .video-carousel-arrow-right {
    right: 10px;
  }
}

/* ========== Haptik: :active-Styles auf Buttons ========== */
.btn:active{ transform: translateY(1px); filter: brightness(.98); }