/* ============================================
   CSS VARIABLEN (ROOT)
   ============================================ */
/* Zentrale Farbpalette und wiederverwendbare Werte */
:root{
  --bg:#0b0b0b;                           /* Haupthintergrundfarbe (dunkel) */
  --fg:#eaeaea;                           /* Haupttextfarbe (hell) */
  --muted:#9aa0a6;                        /* Gedämpfte Textfarbe für sekundäre Inhalte */
  --glass:rgba(15,16,17,.46);             /* Glasmorphismus-Effekt (halbtransparenter Hintergrund) */
  --accent:#0F4C5C;                       /* Akzentfarbe Petrol - für Highlights und Hover-Effekte */
  --shadow:0 10px 30px rgba(0,0,0,.35);   /* Standard-Schattenwurf für Tiefeneffekt */
}

/* ============================================
   GLOBALE BASIS-STYLES
   ============================================ */
/* Box-Sizing für alle Elemente - erleichtert Größenberechnung */
*{box-sizing:border-box}

/* Sanftes Scrollen und dunkler Hintergrund */
html{scroll-behavior:smooth;background:#0b0b0b}

/* Body-Grundeinstellungen: Schriftart, Farben, Abstände */
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:17px/1.78 'PT Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial
}
/* Screenreader-only utility */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Reserve space at the bottom while consent banner is visible */
body{ padding-bottom: var(--consentH, 0px); }

/* Links ohne Unterstreichung, Farbe von Parent erben */
a{color:inherit;text-decoration:none}

/* Container-Wrapper: zentriert Inhalt und begrenzt maximale Breite */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
/* Sticky Header mit Glasmorphismus-Effekt - bleibt beim Scrollen oben */
.header{
  position:sticky;
  top:0;
  z-index:90;                                           /* Über anderen Elementen */
  background:rgba(0,0,0,.45);                          /* Halbtransparenter Hintergrund */
  backdrop-filter:saturate(160%) blur(12px);           /* Glaseffekt: Unschärfe + Sättigung */
  -webkit-backdrop-filter:saturate(160%) blur(12px);   /* Safari-Unterstützung */
  border-bottom:1px solid rgba(255,255,255,.06)        /* Subtile untere Trennlinie */
}

/* Flexbox-Container für Logo und Navigation */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 20px
}

/* Logo-Styling mit Schattenwurf-Effekt */
.logo-img{
  height:46px;
  width:auto;
  display:block;
  filter:drop-shadow(0 6px 28px rgba(15,76,92,.5));   /* Petrol-farbener Schattenwurf */
  transition:filter .35s, transform .2s                /* Sanfte Übergänge für Hover */
}

/* Logo-Hover: Intensiverer Schatten und leichte Bewegung nach oben */
.logo-img:hover{
  filter:drop-shadow(0 8px 36px rgba(15,76,92,.85));
  transform:translateY(-1px)
}

/* Navigation: Horizontales Flexbox-Layout mit Umbruch */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

/* Burger-Toggle standardmäßig ausblenden (nur mobil sichtbar) */
.nav-toggle{ display:none; }

/* Navigations-Links: Abgerundete Buttons mit mehrfachen Übergängen */
.nav a{
  padding:8px 10px;
  border-radius:12px;
  opacity:.9;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .35s, text-shadow .3s
}

/* Hover-Effekt für Nav-Links: Hebt sich nach oben und vergrößert sich leicht */
.nav a:hover{
  transform:translateY(-2px) scale(1.03);
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  text-shadow:0 0 10px rgba(15,76,92,.6)
}

/* Aktiver Navigations-Link (aktuell angezeigte Seite) */
.nav a[aria-current="true"]{
  background:rgba(15,76,92,.7);
  color:#e9f3f6;
  text-shadow:0 0 8px rgba(15,76,92,.7)
}

/* Scroll-Margin für Sections - Platz für Sticky-Header beim Anspringen */
/* Anker-Offset passend zur Header-Höhe (per JS in --hdrH gesetzt) */
section{scroll-margin-top:var(--hdrH, 64px)}

/* Standard-Padding für Sections */
.pad{padding:56px 0}

/* ============================================
   HERO-SECTION (Landing-Bereich)
   ============================================ */
/* Fullscreen Hero mit zentriertem Inhalt und Video-Hintergrund */
.hero{
  min-height:92vh;                    /* Fast volle Viewport-Höhe */
  display:grid;
  place-items:center;                 /* Zentriert Inhalt horizontal und vertikal */
  text-align:center;
  overflow:hidden;                    /* Verhindert Überlauf des Videos */
  position:relative;
  background:#0b0b0b
}

/* Video-Container: Leicht vergrößert für Zoom-Effekt ohne Ränder */
.hero-video-wrap{
  position:absolute;
  inset:-10%;                         /* Erweitert über die Grenzen hinaus */
  overflow:hidden;
  z-index:0;
  will-change:transform               /* Optimiert Performance für Animationen */
}

/* Hero-Video: Vollflächig mit Graustufen-Filter */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;                   /* Füllt den gesamten Bereich */
  /* Farbvideo: kein Schwarzweiß-Filter mehr */
  filter:none
}

/* Farbiges Overlay über Video - erzeugt Petrol-Tönung */
.hero-overlay{
  position:absolute;
  inset:0;
  /* Blaue Überlagerung global deaktiviert */
  background:transparent;
  mix-blend-mode:normal;              /* kein Multiply mehr */
  z-index:1;
}

/* Hero-Inhalt: Über Video und Overlay */
.hero-inner{
  position:relative;
  z-index:2
}

/* Logo-Animation: Fade-in von unten */
#heroLogo{
  opacity:0;
  transform:translateY(8px);
  animation:logoIn .8s ease .2s forwards  /* Startet nach 0.2s Verzögerung */
}

/* Hero-Überschrift: Responsive Schriftgröße mit clamp */
.hero h1{
  font-size:clamp(18px,2.4vw,40px);    /* Min 18px, bevorzugt 2.4vw, max 40px */
  letter-spacing:4px;                   /* Breiter Buchstabenabstand */
  margin:0
}

/* Einzelne Buchstaben der Überschrift - für gestaffelte Animation */
.hero h1 span{
  opacity:0;
  transform:translateX(-10px);
  display:inline-block
}

/* Zeigt Buchstaben mit Animation an (wird per JS hinzugefügt) */
.hero.ready h1 span.reveal{
  animation:letterIn .5s cubic-bezier(.2,.8,.2,1) forwards
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero h1 span{ animation:none !important; }
}

/* Tagline: Erscheint nach Logo und Buchstaben */
.tagline{
  opacity:0;
  transform:translateY(6px);
  animation:tagIn .6s ease 1.3s forwards;  /* Startet nach 1.3s */
  margin-top:6px;
  color:#d7e3ea;
  letter-spacing:.6px;
  font-size:18px
}

/* Keyframe-Animationen für Hero-Elemente */
@keyframes logoIn{to{opacity:1; transform:translateY(0)}}
@keyframes letterIn{to{opacity:1; transform:translateX(0)}}
@keyframes tagIn{to{opacity:1; transform:translateY(0)}}

/* ============================================
   SECTIONS MIT HINTERGRUNDBILD & PARALLAX
   ============================================ */
/* [GLOBAL] Fixierte Hero-Überschrift passend zu Logo/Slogan (Desktop-Ratio beibehalten) */
.hero h1{ font-size:40px; }
/* Hintergrundbilder mit Parallax-Effekt - Position wird per JS über CSS-Variable gesteuert */
.bg{
  position:relative;
  background-position:center calc(50% + var(--bgShift, 0px));  /* --bgShift wird dynamisch von JS gesetzt */
  background-size:cover;
  background-repeat:no-repeat;                                  /* Verhindert sichtbare Kanten/Tile-Effekt */
  will-change:background-position;                              /* Performance-Optimierung für Animation */
}

/* Overlay über Hintergrundbild: Petrol-Tönung + Verlauf nach unten */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* Blaue Überlagerung entfernt; nur dezentes Abdunkeln am unteren Rand */
  background:linear-gradient(to bottom, rgba(0,0,0,0) 70%, #0b0b0b 100%);
  mix-blend-mode:normal
}

/* Spezieller Top-Fade für Band-Section, um Übergang zu glätten (nur Desktop) */
#band.bg::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:120px; /* etwas höherer Verlauf für sauberen Übergang */
  background:linear-gradient(to bottom, #0b0b0b 0%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Mobile/Tablet: saubere Section-Grenzen ohne Überblendung/Parallax */
@media (max-width:1024px){
  .bg{ background-position:center center; }
  .bg::after{ background:none; }
  #band.bg::before{ display:none; }
}

/* Nur Mobil: Im Kontakt-Abschnitt den relevanten Ausschnitt (oben rechts) ins Zentrum schieben */
@media (max-width:768px){
  /* Mobile: eigenes Motiv für Kontakt verwenden (übersteuert Inline-Style) */
  #contact.bg{
    background-image:url('../images/section/contact_mobil.jpg') !important;
    background-position:center top;
    background-size:cover;
  }
}

/* Inhalt über dem Hintergrund und Overlay */
.bg>*{position:relative;z-index:1}

/* Standard-Überschriften-Abstand */
h2{margin:0 0 18px}

/* ============================================
   KARTEN-KOMPONENTE (GLASMORPHISMUS)
   ============================================ */
/* Glasmorphismus-Karte: Halbtransparent mit Unschärfe-Effekt */
.card{
  position:relative;
  background:var(--glass);                     /* Halbtransparenter Hintergrund */
  border-radius:18px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px) saturate(130%);  /* Glaseffekt: Unschärfe + erhöhte Sättigung */
}

/* ============================================
   BAND-SECTION (MITGLIEDER-PORTRAITS)
   ============================================ */
/* Grid-Layout: 7 Portraits nebeneinander (responsiv auf 4, dann 2 Spalten) */
.band-row{
  display:grid;
  grid-template-columns:repeat(7, minmax(140px,1fr));  /* 7 gleichbreite Spalten */
  gap:16px;
  align-items:stretch;
}

/* Responsive Breakpoints für Band-Grid */
@media(max-width:1200px){ .band-row{grid-template-columns:repeat(4,minmax(140px,1fr))} }  /* Tablet: 4 Spalten */
@media(max-width:800px){ .band-row{grid-template-columns:repeat(2,minmax(140px,1fr))} }   /* Mobile: 2 Spalten */

/* Mitglieder-Karte: 3D-Rotation und Hover-Effekt */
.m-card{
  position:relative;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.36);
  backdrop-filter: blur(12px);
  transform:perspective(800px) rotateY(-6deg);             /* 3D-Perspektive: leichte Rotation */
  transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .35s
}

/* Gerade Karten rotieren in andere Richtung für Abwechslung */
.m-card:nth-child(even){transform:perspective(800px) rotateY(6deg)}

/* Hover: Karte richtet sich gerade aus und hebt sich leicht */
.m-card:hover{transform:perspective(800px) rotateY(0) translateY(-2px)}

/* Portrait-Bild mit Petrol-Farbfilter im Ruhezustand */
.m-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* Nur Schwarzweiß im Ruhezustand, ohne Petrol-/Farbtonung */
  filter:grayscale(100%);
  transition:filter .4s ease;
}

/* Hover: Farbfilter wird entfernt - Bild wird farbig */
.m-card:hover img{filter:none}

/* Info-Bereich am unteren Rand der Karte (Name + Rolle) */
.m-info{
  position:absolute;
  inset:auto 0 0 0;
  padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));  /* Verlauf nach oben */
  font-size:14px
}

/* Text-Schatten für bessere Lesbarkeit */
.m-info .m-name, .m-info .m-role{
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55)
}

/* Verstärkt den Hintergrund-Verlauf */
.m-info{
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

/* ============================================
   ABOUT-SECTION (ÜBER UNS)
   ============================================ */
/* About-Karte mit Padding */
.about{padding:28px}

/* Zweispaltiges Layout für About-Text */
 .about .two-col{
  display:grid;
  grid-template-columns:1fr 1fr;  /* Zwei gleich breite Spalten */
  gap:40px;
  font-size:18px;
  line-height:1.9;
}

/* Responsive: Auf schmalen Bildschirmen einspaltig */
@media(max-width:900px){ .about .two-col{ grid-template-columns:1fr } }

/* Mobile & Tablet: Im Band-About nur ersten Absatz zeigen und einspaltig */
@media(max-width:1024px){
  #bandCard .two-col p + p{ display:none; }
  .about .two-col{ grid-template-columns:1fr; }
}

/* ============================================
   YOUTUBE-VIDEOS GRID
   ============================================ */
/* Grid-Layout für YouTube-Videos - responsiv */
.yt-grid{display:grid;gap:18px}

/* Desktop: 3 Videos nebeneinander */
@media(min-width:900px){ .yt-grid{grid-template-columns:1fr 1fr 1fr} }

/* Video-Karte mit Glasmorphismus */
.video-card{
  overflow:hidden;
  border-radius:18px;
  background:rgba(0,0,0,.36);
  backdrop-filter: blur(12px)
}

/* Thumbnail-Container: 16:9 Seitenverhältnis */
.thumb-wrap{
  position:relative;
  aspect-ratio:16/9;           /* Festes Seitenverhältnis */
  overflow:hidden;
  cursor:pointer               /* Zeigt an, dass es klickbar ist */
}

/* Thumbnail-Bild (vor dem Klick) */
.thumb-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

/* YouTube-iframe (nach dem Klick) */
.thumb-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

/* Play-Button (überlagert das Thumbnail) */
.play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  border-radius:50%;                    /* Runder Button */
  background:rgba(255,255,255,.10);
  display:grid;
  place-items:center
}

/* Video-Titel/Beschriftung unter dem Thumbnail */
.caption{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:15px
}

/* ============================================
   SOCIAL MEDIA LINKS
   ============================================ */
/* Grid für Social-Media-Karten: 2×2 auf Mobile, 4 Spalten auf Desktop */
.social-grid{
  display:grid;
  gap:18px;
  margin-top:8px;
  grid-template-columns:repeat(2, minmax(240px,1fr));  /* Mobile/Tablet: 2 Spalten */
}

/* Desktop: 4 Spalten */
@media(min-width:1000px){ .social-grid{grid-template-columns:repeat(4, minmax(200px,1fr))} }

/* Social-Media-Karte: Zentriert mit Hover-Effekt */
.s-card{
  display:grid;
  place-items:center;
  text-align:center;
  gap:6px;
  padding:24px 16px;
  border-radius:18px;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s
}

/* Hover: Hebt sich nach oben mit stärkerem Schatten */
.s-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.35)
}

/* Social-Icon: SVG-Logo als Hintergrundbild */
.s-icon{
  width:64px;
  height:64px;
  border-radius:0px;
  background-size:contain;              /* Logo passt sich an Container an */
  background-repeat:no-repeat;
  background-position:center;
  filter:grayscale(0%);                 /* Farbig anzeigen (kein Graustufen-Filter) */
  transition:filter .3s, transform .3s
}

/* Label (Plattform-Name) */
.s-label{font-weight:700}

/* Subtitle (z.B. "Folge uns") */
.s-sub{
  opacity:.9;
  color:#c8d3da;
  font-size:14px
}

/* YouTube-Icon: Eigenes Logo aus assets/images/logos-socials */
.s-icon.yt{
  background-image:url('../images/logos-socials/logo_youtube.svg');
}

/* Instagram-Icon: Eigenes Logo aus assets/images/logos-socials */
.s-icon.ig{
  background-image:url('../images/logos-socials/logo_instagram.svg');
}

/* TikTok-Icon: Eigenes Logo aus assets/images/logos-socials */
.s-icon.tt{
  background-image:url('../images/logos-socials/logo_tiktok.svg');
}

/* Facebook-Icon: Eigenes Logo aus assets/images/logos-socials */
.s-icon.fb{
  background-image:url('../images/logos-socials/logo_facebook.svg');
}

/* ============================================
   KONTAKT-SECTION
   ============================================ */
/* Booking-Blurb (Einleitungstext) */
.booking-blurb{
  padding:18px;
  margin-bottom:16px
}

/* Links im Booking-Blurb */
.booking-blurb .note a{
  color:#cfe8ef;
  text-decoration:underline
}

/* Kontaktformular: Grid-Layout für Eingabefelder */
.contact-form{
  display:grid;
  gap:12px;
  max-width:640px
}

/* Eingabefelder und Textarea: Dunkles Design mit Glaseffekt */
.contact-form input,.contact-form textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:#fff; /* starke weiße Schrift für bessere Lesbarkeit */
  padding:12px 14px;
  outline:0
}

/* Platzhalter heller und kontrastreicher */
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#f3f6fa; opacity:.95; }
/* Browser-Präfixe für breite Unterstützung */
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder{ color:#f3f6fa; opacity:.95; }
.contact-form input::-moz-placeholder,
.contact-form textarea::-moz-placeholder{ color:#f3f6fa; opacity:.95; }
.contact-form input:-ms-input-placeholder,
.contact-form textarea:-ms-input-placeholder{ color:#f3f6fa; opacity:.95; }

/* Submit-Button: Petrol-Farbe mit Hover-Effekt */
.contact-form button{
  background:rgba(15,76,92,.8);
  color:#e9f3f6;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  transition:filter .25s, transform .2s
}

/* Button-Hover: Wird heller und hebt sich leicht */
.contact-form button:hover{
  filter:brightness(1.05);
  transform:translateY(-1px)
}

/* Kontakt-Grid: Zweispaltig (Text links, Formular rechts) */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
  grid-template-areas:"blurb form"
}

.contact-grid .booking-blurb{grid-area:blurb}
.contact-grid .contact-form{grid-area:form}

/* Responsive: Einspaltig auf schmalen Bildschirmen */
@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
    grid-template-areas:"blurb" "form"
  }
}

/* ============================================
   GALERIE (BILDERGALERIE-CAROUSEL)
   ============================================ */
/* Galerie-Bühne: Fixe Höhe für Karten-Container */
.g-stage{
  position:relative;
  height:min(82vh,820px)  /* Responsive Höhe: max 82vh oder 820px */
}

/* Galerie-Karte: Einzelnes Bild im Carousel */
.g-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(1200px,88vw);                           /* Responsive Breite */
  height:calc(min(82vh,820px) - 60px);
  transform:translate(-50%,-50%) scale(.94);        /* Zentriert und leicht verkleinert */
  border-radius:18px;
  overflow:hidden;
  /* Schatten/Glas entfernt – sauberes Bild ohne Farbsäume */
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

/* Bild in der Galerie-Karte */
.g-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

/* Aktive Karte: Voll sichtbar und skaliert */
.g-card.show{
  z-index:3;
  transform:translate(-50%,-50%) scale(1)
}

/* Vorherige Karte: Links sichtbar, beschnitten */
.g-card.prev{
  z-index:2;
  clip-path: inset(0 85% 0 0);                      /* Zeigt nur linke 15% */
  transform:translate(calc(-50% - 12%),-50%) scale(.90)
}

/* Nächste Karte: Rechts sichtbar, beschnitten */
.g-card.next{
  z-index:2;
  clip-path: inset(0 0 0 85%);                      /* Zeigt nur rechte 15% */
  transform:translate(calc(-50% + 12%),-50%) scale(.90)
}

/* Wrapper für Galerie - erlaubt Überlauf für Pfeile */
#gallery .wrap{
  position:relative;
  overflow:visible
}

#gStage{position:relative}

/* Navigationspfeile: Absolut positioniert, keine Pointer-Events im Container */
.g-nav{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5
}

/* Galerie-Pfeil: Runder Button mit Glaseffekt */
.g-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;                              /* Pfeile sind klickbar */
  background:rgba(46,72,78,.88);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  color:#ffffff;
}

/* Pfeil-Hover: Vergrößert sich leicht */
.g-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 22px 56px rgba(0,0,0,.56)
}

/* Positionierung (Desktop): Pfeile immer im Sichtfeld, innen am Rand */
#gPrev{ left:12px }
#gNext{ right:12px }

/* SVG-Icons in den Pfeilen */
.g-arrow svg{
  width:24px;
  height:24px;
  display:block
}

/* MOBILE/TABLET: Galerie als Stacking-Karussell mit Peek-Effekt, swipebar
   - Stage wird quadratisch über aspect-ratio
   - Karten bleiben absolut; Nachbarn peeken seitlich
   - Pfeile ausblenden; Navigation per Swipe und Auto-Slide */
@media (max-width:1024px){
  #gallery .wrap h2{ margin-bottom:10px; }
  .g-stage{ width:100%; aspect-ratio:1/1; height:auto; display:block; overflow:visible; }
  .g-card{ width:100%; height:100%; }
  .g-card.prev{ clip-path: inset(0 88% 0 0); transform:translate(calc(-50% - 8%),-50%) scale(.92) }
  .g-card.next{ clip-path: inset(0 0 0 88%); transform:translate(calc(-50% + 8%),-50%) scale(.92) }
  .g-nav, .g-arrow{ display:none !important; }
}


/* ============================================
   FOOTER & MODALS
   ============================================ */
/* Footer: Zentriert, dunkler Hintergrund */
footer{
  padding:26px 0;
  text-align:center;
  color:#cbd5e1;
  background:#0a0a0a;
  border-top:1px solid rgba(255,255,255,.06)
}

/* Links im Footer: Unterstrichen */
footer a{
  color:#cfe8ef;
  text-decoration:underline
}

/* Modal-Overlay: Fullscreen, halbtransparent */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;                                     /* Standardmäßig versteckt */
  align-items:center;
  justify-content:center;
  z-index:130
}

/* Modal-Box: Zentrierter Container mit Scrollbar */
.modal .box{
  max-width:900px;
  max-height:80vh;
  overflow:auto;                                    /* Scrollbar bei langem Inhalt */
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px
}

/* (Kein Fallback-Frame mehr nötig – Impressum statisch) */

/* Modal sichtbar machen (per JS-Klasse) */
.modal.show{display:flex}

/* Schließen-Button */
.close{
  float:right;
  background:rgba(255,255,255,.08);
  border:0;
  border-radius:8px;
  color:#fff;
  padding:6px 10px;
  cursor:pointer
}

/* ============================================
   ZUSÄTZLICHE HILFSELEMENTE
   ============================================ */
/* Track-Titel im Audio-Player */
.t-title{font-weight:700}

/* Künstler-Name im Audio-Player */
.t-artist{
  font-style:italic;
  opacity:.9;
  font-size:13px
}

/* ============================================
   RESPONSIVE ERGÄNZUNGEN (Mobile-First Breakpoints)
   - Ziel: Mobile & Tablet optimieren, Desktop unverändert lassen
   - Breakpoints: max-width: 1024px (Tablet), 768px (Mobil)
   ============================================ */

/* [RESPONSIVE] Grundabstände/Typo anpassen */
@media (max-width:1024px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
  .pad{ padding:42px 0; }
}

@media (max-width:768px){
  .wrap{ padding:0 12px; }
  .pad{ padding:36px 0; }
}

/* [RESPONSIVE] Navigation als Burger-Menü (Klick zum Öffnen/Schließen) */
@media (max-width:1024px){
  .row{ padding:10px 12px; }

  /* Toggle-Button fix rechts oben; bleibt statisch */
  .nav-toggle{
    position:fixed; top:12px; right:12px; z-index:120;
    width:44px; height:44px; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; cursor:pointer; padding:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    box-shadow:0 12px 36px rgba(0,0,0,.35);
    display:block;
  }
  .nav-toggle:focus{ outline:none; }
  .nav-toggle:focus-visible{ box-shadow:0 0 0 3px rgba(207,232,239,.35), 0 12px 36px rgba(0,0,0,.35); }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:block; width:22px; height:2px; background:#eaeaea; border-radius:2px; content:"";
  }
  .nav-toggle span::before{ transform:translate(-50%, calc(-50% - 6px)); }
  .nav-toggle span::after{ transform:translate(-50%, calc(-50% + 6px)); }
  body.nav-open .nav-toggle span{ background:transparent; }
  body.nav-open .nav-toggle span::before{ transform:translate(-50%,-50%) rotate(45deg); }
  body.nav-open .nav-toggle span::after{ transform:translate(-50%,-50%) rotate(-45deg); }

  /* Panel: startet unterhalb der Header-Leiste, mit Blur-Hintergrund */
  .nav{
    position:fixed; right:12px; top:var(--hdrH, 64px); z-index:110;
    width:auto; min-width:160px; max-width:min(80vw, 240px); /* so schmal wie möglich */
    display:flex; flex-direction:column; gap:6px;
    padding:6px 8px;
    background:rgba(0,0,0,.95); /* 95% deckend, kein Weichzeichner */
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    opacity:0; transform:translateY(-8px) scale(.98);
    pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    overflow:hidden;
  }
  .nav::before{ content:none; }
  body.nav-open .nav{ opacity:1; transform:none; pointer-events:auto; }

  .nav::before{ display:none; } /* alte Burger-Icon-Andeutung ausblenden */
  .nav a{ display:block; padding:9px 10px; border-radius:10px; font-size:15px; text-align:left; white-space:nowrap; }
  .nav a:hover{ background:rgba(255,255,255,.08); }
}

@media (max-width:768px){
  .logo-img{ height:40px; }
}

/* [RESPONSIVE] Musik & Videos: Stacking-Karussell (wie Galerie), 16:9 */
@media (max-width:1024px){
  #ytGrid{ position:relative; display:block; width:92%; margin:0 auto; aspect-ratio:16/9; height:auto; overflow:visible; }
  #ytGrid .video-card{
    position:absolute; left:50%; top:50%; width:100%; height:100%;
    transform:translate(-50%,-50%) scale(.86);      /* kleiner + vertikales Karussell */
    border-radius:14px; overflow:hidden; background:transparent; box-shadow:none;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  #ytGrid .video-card.show{ z-index:3; transform:translate(-50%,-50%) scale(.92) }
  /* Vertikaler Peek: nur schmale Streifen oben/unten sichtbar; exakt vertikal ohne Schrägversatz */
  #ytGrid .video-card.prev{ z-index:2; clip-path: inset(0 0 86% 0); transform:translate(-50%, calc(-50% - 14%)) scale(.80) }
  #ytGrid .video-card.next{ z-index:2; clip-path: inset(86% 0 0 0); transform:translate(-50%, calc(-50% + 14%)) scale(.80) }
  #ytGrid .thumb-wrap{ position:absolute; inset:0; aspect-ratio:auto; }
  #ytGrid .caption{ position:absolute; left:0; right:0; bottom:0; padding:8px 10px; background:rgba(0,0,0,.55); border-top:0; }
  #ytGrid .thumb-wrap img, #ytGrid .thumb-wrap iframe{ display:block; backface-visibility:hidden; transform:translateZ(0); }
}

/* [RESPONSIVE] Band: Stacking-Karussell (wie Galerie), Bilder hochkant (kein Crop) */
@media (max-width:1024px){
  .band-row{ position:relative; display:block; overflow:visible; height:88vw; }
  .band-row .m-card{
    position:absolute; left:50%; top:50%; width:66vw; height:88vw; /* 3:4 Portrait-Template */
    transform:translate(-50%,-50%) scale(.94);
    border-radius:16px; overflow:hidden; background:transparent; box-shadow:none;
  }
  .band-row .m-card.show{ z-index:3; transform:translate(-50%,-50%) scale(1) }
  .band-row .m-card.prev{ z-index:2; clip-path: inset(0 70% 0 0); transform:translate(calc(-50% - 20%),-50%) scale(.86) }
  .band-row .m-card.next{ z-index:2; clip-path: inset(0 0 0 70%); transform:translate(calc(-50% + 20%),-50%) scale(.86) }
  .band-row .m-card img{ object-fit:cover; background:transparent; }
}

/* [RESPONSIVE] Galerie: quadratischer Crop + Pfeile im Sichtfeld halten */
@media (max-width:1024px){
  .g-card{
    width:92vw; height:auto; aspect-ratio:1/1;           /* quadratisch */
  }
  .g-card.prev{ clip-path: inset(0 88% 0 0); transform:translate(calc(-50% - 8%),-50%) scale(.92); }
  .g-card.next{ clip-path: inset(0 0 0 88%); transform:translate(calc(-50% + 8%),-50%) scale(.92); }
  .g-arrow{ width:44px; height:44px; }
  #gPrev{ left:8px; }
  #gNext{ right:8px; }
}

/* [RESPONSIVE] Social: 2×2 Kacheln, quadratisch */
@media (max-width:768px){
  .social-grid{ grid-template-columns:repeat(2, 1fr); }
  .s-card{ aspect-ratio:1/1; padding:18px 12px; }
  .s-icon{ width:56px; height:56px; }
}

/* [RESPONSIVE] Kontakt: Text oben, Formular darunter (Tablet/Mobil) */
@media (max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; grid-template-areas:"blurb" "form"; }
}

/* (Audio Player entfernt) */

/* [RESPONSIVE] Hero: etwas kompakter auf Mobil */
@media (max-width:768px){
  .hero{ min-height:78vh; }
  /* [RESPONSIVE] Slogan bewusst in fixer Größe lassen (wie Desktop) */
  .tagline{ font-size:18px; }
}

/* [GLOBAL] Band-Abschnitt: Text als Blocksatz, enger Absatzabstand */
#band .about p{ text-align:justify; hyphens:auto; margin:0 0 10px; }

/* ============================================
   COOKIE / CONSENT BANNER
   ============================================ */
.consent-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:120;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px 16px;
}
.consent-banner .btn{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.consent-banner .btn.accept{ background:rgba(15,76,92,.8); border-color:rgba(15,76,92,.9); }
.consent-banner .btn.reject{ background:rgba(255,255,255,.08); }
.consent-banner .btn.settings{ background:rgba(255,255,255,.08); }
.consent-banner .consent-text{ flex:1 1 280px; font-size:14px; opacity:.95 }
.consent-banner .consent-actions{ display:flex; gap:8px; }
.consent-banner .consent-panel{ width:100%; padding-top:6px; border-top:1px solid rgba(255,255,255,.08); display:block }
.consent-banner .consent-opt{ display:flex; gap:8px; align-items:flex-start; font-size:14px; }
.consent-banner .consent-panel-actions{ margin-top:8px; display:flex; gap:8px; }