/* ==============================================================
   ABSOLUT – Punk 'n' Roll  |  style.css
   ================================================================
   DESIGN ANPASSEN → :root weiter unten (Farben, Fonts, Abstände)
   Alle Werte als CSS Custom Properties: eine Änderung wirkt global.

   Datei-Struktur:
     1. Google Fonts Import
     2. Design-Tokens (:root)
     3. Reset & Basis
     4. Layout-Helfer (.container, section, .section-title)
     5. Buttons
     6. Navigation
     7. Hero
     8. Die Band (Mitglieder-Grid)
     9. Shows
    10. Galerie
    11. Lightbox
    12. Videos
    13. Kontakt
    14. Footer
    15. Responsive (Breakpoints)
   ============================================================== */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,400;0,600;1,400&display=swap');

/* ── 2. DESIGN-TOKENS ────────────────────────────────────────── */
:root {
  /* ---- Hintergründe ---------------------------------------- */
  --clr-bg:          #0c0c0c;       /* Haupthintergrund           */
  --clr-surface:     #151515;       /* Karten, Sections           */
  --clr-surface-alt: #1d1d1d;       /* Abwechselnde Sections      */

  /* ---- Akzentfarben (aus dem Bandlogo) ---------------------- */
  --clr-accent:      #6dff00;       /* Neon-Grün  (Laser-Strahlen)*/
  --clr-accent-dim:  rgba(109, 255, 0, 0.12);
  --clr-accent-glow: rgba(109, 255, 0, 0.35);
  --clr-accent-2:    #c72b0a;       /* Stern-Rot                  */
  --clr-accent-2-glow: rgba(199, 43, 10, 0.35);

  /* ---- Text ------------------------------------------------- */
  --clr-text:        #efefef;
  --clr-text-muted:  #787878;

  /* ---- Rahmen ----------------------------------------------- */
  --clr-border:      #2c2c2c;

  /* ---- Leuchten-Effekte (box-shadow) ----------------------- */
  --glow-green: 0 0 14px var(--clr-accent-glow), 0 0 40px rgba(109, 255, 0, 0.12);
  --glow-red:   0 0 14px var(--clr-accent-2-glow), 0 0 40px rgba(199, 43, 10, 0.12);

  /* ---- Typografie ------------------------------------------- */
  --font-heading: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Barlow', 'Segoe UI', system-ui, sans-serif;

  /* ---- Layout ----------------------------------------------- */
  --nav-h:         68px;                        /* Höhe der fixierten Nav   */
  --max-w:         1400px;                      /* maximale Seitenbreite    */
  --pad-section:   clamp(60px, 8vw, 100px);    /* Section-Innenabstand     */
  --gap:           1.5rem;                      /* Standard-Grid-Abstand    */
  --radius:        4px;                         /* Eckenradius              */
}

/* ── 3. RESET & BASIS ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Verhindert, dass die fixierte Nav den Scroll-Zielanker überdeckt */
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden; /* verhindert horizontalen Scrollbalken durch Animationen */
}

img  { max-width: 100%; display: block; }
ul   { list-style: none; }
a    { color: inherit; text-decoration: none; }

/* ── 4. LAYOUT-HELFER ────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem); /* responsiver Seitenabstand */
}

section {
  padding-block: var(--pad-section);
  background: var(--clr-bg);
  position: relative;
}
/* Sections mit .section-alt wechseln die Hintergrundfarbe (Zebra-Effekt) */
section.section-alt {
  background: var(--clr-surface);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 0.3em;
  display: inline-block;
  position: relative;
}
/* Neon-grüner Strich unter jeder Section-Überschrift */
.section-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 52px;
  background: var(--clr-accent);
  margin-top: 8px;
  box-shadow: var(--glow-green);
}

/* ── 5. BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.6em 1.8em;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
/* Primär: grün gefüllt, Hover: transparent mit Leuchteffekt */
.btn-primary {
  background: var(--clr-accent);
  color: var(--clr-bg);
  border-color: var(--clr-accent);
}
.btn-primary:hover {
  background: transparent;
  color: var(--clr-accent);
  box-shadow: var(--glow-green);
}
/* Outline: transparent mit grünem Rand, Hover: gefüllt */
.btn-outline {
  background: transparent;
  color: var(--clr-accent);
  border-color: var(--clr-accent);
}
.btn-outline:hover {
  background: var(--clr-accent);
  color: var(--clr-bg);
  box-shadow: var(--glow-green);
}

/* ── 6. NAVIGATION ───────────────────────────────────────────── */
#navbar {
  position: fixed;           /* bleibt beim Scrollen oben sichtbar */
  inset: 0 0 auto 0;
  height: var(--nav-h);
  background: rgba(12, 12, 12, 0.88);
  backdrop-filter: blur(12px);         /* Glasmorphismus-Effekt */
  -webkit-backdrop-filter: blur(12px); /* Safari-Präfix        */
  border-bottom: 1px solid var(--clr-border);
  z-index: 900;
  transition: border-color 0.4s;
}
/* Beim Scrollen: Unterlinie wird grün (gesteuert per JS) */
#navbar.scrolled {
  border-bottom-color: rgba(109, 255, 0, 0.3);
}

.nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Bandname oben links – Text direkt im HTML (index.html, .nav-brand) */
.nav-brand {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  letter-spacing: 0.14em;
  color: var(--clr-accent);
  flex-shrink: 0; /* wird nicht schmaler, auch wenn Nav-Links Platz brauchen */
  transition: text-shadow 0.25s;
}
.nav-brand:hover { text-shadow: var(--glow-green); }

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-left: auto; /* schiebt Links an den rechten Rand */
  align-items: center;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
/* .active wird per IntersectionObserver in main.js gesetzt */
.nav-links a:hover,
.nav-links a.active {
  color: var(--clr-accent);
  border-bottom-color: var(--clr-accent);
}

/* Hamburger-Button: standardmäßig ausgeblendet, Mobile-Only */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
/* X-Animation: Balken 1 und 3 drehen sich zu einem Kreuz */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 7. HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100svh; /* svh: korrekte Höhe auf Mobile (ohne Browser-Chrome) */
  min-height: 100vh;  /* Fallback für Browser ohne svh-Support              */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--nav-h); /* Platz für die fixierte Nav */
  padding-inline: 1rem;
  /* Radiale Farbverläufe simulieren den Bühnen-Spotlight-Effekt */
  background:
    radial-gradient(ellipse 75% 55% at 50% 62%, rgba(60, 140, 0, 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 45% 30% at 50% 58%, rgba(199, 43, 10, 0.14) 0%, transparent 60%),
    var(--clr-bg);
  overflow: hidden;
}

/* Feines Gitter-Muster im Hero-Hintergrund */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109, 255, 0, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 255, 0, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; /* Klicks gehen durch das Pseudo-Element hindurch */
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  position: relative; /* überlagert das ::before-Gitter */
}

.hero-logo {
  /* Skaliert mit dem Browserfenster: min 300px, 50% Viewport-Breite, max 1100px */
  width: clamp(300px, 50vw, 1100px);
  filter:
    drop-shadow(0 0 28px rgba(109, 255, 0, 0.28))
    drop-shadow(0 0 70px rgba(109, 255, 0, 0.1));
  animation: logo-pulse 4s ease-in-out infinite;
}
/* Pulsierender Leuchteffekt auf dem Logo */
@keyframes logo-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 28px rgba(109, 255, 0, 0.28))
      drop-shadow(0 0 70px rgba(109, 255, 0, 0.10));
  }
  50% {
    filter:
      drop-shadow(0 0 42px rgba(109, 255, 0, 0.45))
      drop-shadow(0 0 90px rgba(109, 255, 0, 0.20));
  }
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.12em;
  color: var(--clr-text);
}

/* Tagline in Neon-Grün (Akzentfarbe) */
.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  letter-spacing: 0.22em;
  color: var(--clr-accent);
}

/* Animierter Scroll-Pfeil am unteren Rand des Hero */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--clr-text-muted);
  font-size: 1.6rem;
  animation: bounce 2.2s ease-in-out infinite;
  transition: color 0.2s;
}
.hero-scroll:hover { color: var(--clr-accent); }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  55%       { transform: translateX(-50%) translateY(9px); }
}

/* ── 8. DIE BAND ─────────────────────────────────────────────── */
.band-intro {
  color: var(--clr-text-muted);
  margin-block: 1rem 2.2rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.band-members-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
  margin-bottom: 1.5rem;
}

/* Gesamtband-Foto vor den Mitgliederkarten */
.band-photo-full {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  margin-bottom: 2.8rem;
  display: block;
}

/* 3+2-Layout für 5 Bandmitglieder:
   6 gleiche Spalten; Karten 1–3 belegen je 2 Spalten (= volle Zeile).
   Karte 4 startet bei Spalte 2, Karte 5 bei Spalte 4 →
   je 1 leere Spalte links und rechts = optisch zentriert.
   Spaltenplan: [_][4][4][5][5][_]                          */
.members-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.member-card { grid-column: span 2; }             /* Karten 1–3: je 2 Spalten */
.member-card:nth-child(4) { grid-column: 2 / 4; } /* Karte 4: Spalten 2–3     */
.member-card:nth-child(5) { grid-column: 4 / 6; } /* Karte 5: Spalten 4–5     */

.member-card--clickable { cursor: pointer; }

.member-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.member-card:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--glow-green);
  transform: translateY(-4px);
}

.member-photo {
  width: 100%;
  aspect-ratio: 1;   /* quadratisches Foto */
  object-fit: cover;
}
/* Platzhalter wenn noch kein Foto hinterlegt ist */
.member-photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(150deg, #0f1f0f 0%, #1b2e1b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.member-photo-placeholder .ph-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  opacity: 0.28;
}

.member-info { padding: 1rem 0.8rem 1.1rem; }
.member-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.2em;
}
.member-instrument {
  font-size: 0.82rem;
  color: var(--clr-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── 9. SHOWS ────────────────────────────────────────────────── */
.shows-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.2rem;
  table-layout: fixed; /* erzwingt einheitliche Spaltenbreiten bei beiden Tabellen */
}
.shows-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  color: var(--clr-text-muted);
  border-bottom: 1px solid var(--clr-border);
  padding: 0.5rem 1.2rem 0.5rem 0;
}
.shows-table td {
  padding: 1rem 1.2rem 1rem 0;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
}
.shows-table tr:hover td { color: var(--clr-accent); }

.show-date {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  white-space: nowrap; /* Datum bricht nicht um */
}
.show-venue { color: var(--clr-text); }
.show-city  { color: var(--clr-text-muted); font-size: 0.92rem; }
.show-address { color: var(--clr-text-muted); font-size: 0.82rem; }

/* Tickets + Mehr-Infos-Button nebeneinander */
.show-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Platzhalter-Box wenn SHOWS-Array leer ist */
.shows-empty {
  margin-top: 2rem;
  padding: 2.5rem;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text-muted);
  text-align: center;
  font-size: 1rem;
}

/* ── 10. GALERIE ─────────────────────────────────────────────── */

/* Akkordeon-Gruppen (details/summary) */
.gallery-group { margin-top: 2.5rem; }
.gallery-group:first-child { margin-top: 0; }

.gallery-group-title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
  margin-bottom: 0.8rem;
  /* summary-spezifisch: Marker entfernen, Pfeil hinzufügen */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  transition: color 0.2s;
  user-select: none;
}
.gallery-group-title::-webkit-details-marker { display: none; }
.gallery-group-title::after {
  content: '▶';
  font-size: 0.65em;
  opacity: 0.6;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 1rem;
}
details[open] > .gallery-group-title::after { transform: rotate(90deg); }
details[open] > .gallery-group-title { color: var(--clr-text); }
.gallery-group-title:hover { color: var(--clr-accent); }

.gallery-grid {
  display: grid;
  /* 3–5 Spalten je nach Viewport: wächst von 200px auf max 420px */
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 20vw, 420px), 1fr));
  gap: 6px;
}

.gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  cursor: pointer;
  position: relative;
  transition: border-color 0.22s, box-shadow 0.22s;
}
/* Leuchteffekt nur auf Fotos mit data-src (echte Bilder, keine Platzhalter) */
.gallery-item[data-src]:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--glow-green);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.gallery-item:hover img { transform: scale(1.06); } /* sanfter Zoom beim Hover */

/* Platzhalter wenn noch kein Foto hinterlegt ist */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--clr-surface) 0%, var(--clr-surface-alt) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--clr-border);
  font-size: 2.2rem;
}
.gallery-placeholder span {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--clr-text-muted);
  opacity: 0.5;
}

/* ── 11. LIGHTBOX ────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9000; /* über allem anderen (Nav hat z-index: 900) */
  padding: 1rem;
}
/* hidden-Attribut in HTML schaltet die Box komplett aus */
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
  line-height: 1;
  user-select: none;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--clr-accent); }

.lightbox-close {
  top: 1.2rem;
  right: 1.8rem;
  font-size: 2.8rem;
}
/* Pfeile: vertikal zentriert, je 1.5rem vom Rand */
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  padding: 1rem 1.2rem;
}
.lightbox-prev:hover { transform: translateY(-50%) scale(1.15); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.15); }
.lightbox-prev { left:  1.5rem; }
.lightbox-next { right: 1.5rem; }

/* Pfeile ausblenden wenn nur 1 Bild vorhanden */
.lightbox--single .lightbox-prev,
.lightbox--single .lightbox-next { display: none; }

/* ── 12. VIDEOS ──────────────────────────────────────────────── */
.videos-grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1.5);
  margin-top: 2.2rem;
}

/* Hochkant-Videos: nebeneinander, zentriert */
.videos-row--vertikal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
}
.videos-row--vertikal .video-item {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 340px);
}

/* Querformat-Videos: Grid darunter */
.videos-row--quer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 45vw, 650px), 1fr));
  gap: var(--gap);
}

.video-item {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s;
}
.video-item:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--glow-green);
}
/* 16:9-Verhältnis via padding-bottom-Trick (klassische Methode für iframes) */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 */
  height: 0;
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-wrapper--vertikal {
  padding-bottom: 177.78%; /* 16/9 */
}
.video-title {
  padding: 0.7rem 1rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.08em;
  background: var(--clr-surface-alt);
  color: var(--clr-text-muted);
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--clr-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}

/* ── 13. KONTAKT ─────────────────────────────────────────────── */
.kontakt-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.kontakt-inner > p {
  max-width: 560px;
  color: var(--clr-text-muted);
  font-size: 1.05rem;
}
/* Wrapper für E-Mail- und Telefon-Button nebeneinander */
.kontakt-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;       /* umbrechen auf kleinen Screens */
  justify-content: center;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6em 1.3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: border-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor; /* Farbe folgt automatisch der Text-Farbe */
  flex-shrink: 0;
}
.social-link:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  box-shadow: var(--glow-green);
}

/* ── 14. SOCIAL ──────────────────────────────────────────────── */
.social-intro {
  color: var(--clr-text-muted);
  margin-block: 1rem 2rem;
  font-size: 1.05rem;
}

.social-links--large {
  gap: 1rem;
}
.social-links--large .social-link {
  padding: 0.8em 2em;
  font-size: 1.15rem;
  border-color: var(--clr-border);
}
.social-links--large .social-link svg {
  width: 22px;
  height: 22px;
}

/* ── 14. LINKS ───────────────────────────────────────────────── */
.links-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2rem;
}

.link-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.link-item-anchor {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--clr-accent);
  text-decoration: none;
  transition: color 0.2s;
}
.link-item-anchor:hover {
  color: #fff;
}
.link-item-desc {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}
.link-item-zusatz {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  font-style: italic;
}

/* ── 15. FOOTER ──────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 2.2rem 1rem;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 0.85rem;
}

/* ── SHOWS: Vergangen / Kommend ─────────────────────────────── */
.shows-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: 0.1em;
  color: var(--clr-text);
  margin: 2.5rem 0 0;
}
.shows-subtitle:first-child { margin-top: 0; }
/* "Vergangene Shows" etwas zurückhaltender */
.shows-subtitle--past {
  color: var(--clr-text-muted);
  font-size: clamp(1rem, 2vw, 1.3rem);
}

/* ── BOOKING ─────────────────────────────────────────────────── */

/* Kontaktblock: zentriert, ähnlich wie die alte Kontakt-Section */
.booking-contact {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--clr-border);
}
.booking-contact > p {
  max-width: 560px;
  color: var(--clr-text-muted);
  font-size: 1.05rem;
}

/* Trennblock mit Titel für jeden Unterbereich */
.booking-block {
  margin-top: 3rem;
}
.booking-block-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  margin-bottom: 1.4rem;
}
.booking-hint {
  color: var(--clr-text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.6rem;
}

/* Gig-Fakten: responsive Karten */
.booking-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 28%, 320px), 1fr));
  gap: var(--gap);
}
.booking-fact {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  transition: border-color 0.22s;
}
.booking-fact:hover { border-color: var(--clr-accent); }
.booking-fact-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.booking-fact-value {
  font-size: 0.92rem;
  color: var(--clr-text);
  line-height: 1.55;
}

/* Download-Buttons */
.booking-downloads-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65em 1.4em;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--clr-text);
  transition: border-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.download-btn:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  box-shadow: var(--glow-green);
}
.download-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.download-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}
.download-soon {
  font-size: 0.75em;
  opacity: 0.7;
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* Setlist: eine flache Liste in 3 Spalten */
.setlist-container { /* Wrapper, hält den Hint-Text + die Liste */ }

.setlist-list {
  list-style: none;
  column-count: 3;
  column-gap: 2.5rem;
  /* Verhindert, dass ein Song-Eintrag zwischen zwei Spalten bricht */
  column-fill: balance;
}
.setlist-song {
  display: flex;
  flex-direction: column;
  padding: 0.38rem 0;
  border-bottom: 1px solid rgba(44, 44, 44, 0.55);
  break-inside: avoid; /* kein Spaltenumbruch mitten im Eintrag */
}
.setlist-song:last-child { border-bottom: none; }
.setlist-song-titel {
  font-size: 0.93rem;
  color: var(--clr-text);
  line-height: 1.3;
}
.setlist-song-interpret {
  font-size: 0.76rem;
  color: var(--clr-text-muted);
  margin-top: 0.08rem;
}

/* ── 16. RESPONSIVE ──────────────────────────────────────────── */

/* Tablet / Mobile (≤ 700px) */
@media (max-width: 700px) {
  /* Nav: Hamburger-Button einblenden, Links verstecken */
  .nav-toggle { display: flex; }
  .nav-brand {
    font-size: 1.1rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 10, 10, 0.98);
    border-bottom: 1px solid var(--clr-border);
    padding: 1.5rem 1.8rem 2rem;
    gap: 1.3rem;
    align-items: flex-start;
  }
  .nav-links.open { display: flex; } /* per JS per Klick geöffnet */
  .nav-links a { font-size: 1.4rem; }

  /* Logo auf Mobile: fast volle Viewport-Breite */
  .hero-logo { width: min(90vw, 480px); }

  /* Mitglieder-Grid: auf Mobile normales 2-Spalten-Layout.
     Die nth-child-Regeln vom Desktop (6-Spalten-Zentrierung)
     werden hier zurückgesetzt, da ein 2-Spalten-Grid anders funktioniert. */
  .members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .member-card,
  .member-card:nth-child(4),
  .member-card:nth-child(5) { grid-column: span 1; }

  /* Shows-Tabelle: komplett auf Block umstellen (keine Spaltenbreiten mehr) */
  .shows-table,
  .shows-table tbody { display: block; width: 100%; }
  .shows-table thead { display: none; }
  .shows-table tr {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--clr-border);
  }
  .shows-table td {
    display: block;
    padding: 0.15rem 0;
    border: none;
  }
  .shows-table td:last-child { margin-top: 0.6rem; }
  .show-buttons .btn { font-size: 0.9rem; padding: 0.4em 1.1em; }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .videos-grid {
    grid-template-columns: 1fr;
  }

  .setlist-list { column-count: 2; }
}

@media (max-width: 480px) {
  .setlist-list { column-count: 1; }
}

/* Sehr kleine Geräte (≤ 400px) */
@media (max-width: 400px) {
  .hero-logo { width: 92vw; }
  .members-grid {
    grid-template-columns: 1fr 1fr;
  }
}