@font-face{
  font-family: "Tan Meringue";
  src: url("TAN MERINGUE.woff2") format("woff2"),
       url("TAN MERINGUE.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Tan Meringue", serif;background:#0e0e11;color:#222;line-height:1.25}

/* Base section spacing */
section{padding:72px 6vw}





/* HERO - adjust image crop and text sizing */
/* --- HERO v3 ------------------------------------------------------- */

.hero {
  position: relative;
  height: 90vh;
  overflow: hidden;

  background-image: url("hero_portrait_credit_Yaroka_Fotografie.jpg");
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
}


/* Vordergrund bewegt sich schneller */
.parallax-foreground {
  position: relative;
  z-index: 3;
  transform: translateZ(0);
  will-change: transform;
  color: #fff;
}

.hero-center {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #efe7de;
}

.hero-title {
  font-size: 120px;
  line-height: 0.9;
  margin: 0;
  letter-spacing: -1px;
}

.hero-sub {
  font-size: 30px;
  margin-top: 6px;
}

.hero-button {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 44px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 40px;
  text-decoration: none;
  color: #efe7de;
  background: transparent;
  transition: all 0.25s ease;

}



/* HERO BUTTON — same hover behavior as Soundcloud/Spotify */
.hero-button:hover {
  background: #B8A898;   /* gleiche Farbe wie Sets-Buttons */
  color: #fff;           /* weißer Text */
  border-color: #fff;
  cursor: pointer;
}






/* Logo kleiner & exakt verankert */
.hero-logo {
  position: absolute;
  right: 40px;   /* fix statt 6vw */
  bottom: 40px;  /* etwas höher, damit dein Endpunkt stimmt */
}

.hero-logo img {
  width: 120px;        /* kleiner */
  opacity: 0.95;
}

/* Credit-Text verankert */
.hero-credit {
  position: absolute;
  left: 40px;     /* fix statt 6vw */
  bottom: 40px;   /* gleicher Abstand wie Logo */
  font-size: 12px;
  color: #fff;

}


.hero {
  width: 100%;
  padding: 0;
}




/* -------------------------------------------
   HERO2: nur Mobile Zusatz-Sektion
------------------------------------------- */

/* Desktop/Web: hero2 aus, Hero-Events an */
.hero2 { 
  display: none;
}

/* Mobile: hero2 an, Events-Block im Hero aus */
@media (max-width: 900px) {

  /* Entfernt den Events-Teil aus HERO */
  .hero-events {
    display: none !important;
  }

  /* Zeigt hero2 unterhalb des Hero */
  .hero2 {
    display: block;
    width: 100%;
    background: #e9efe6;         /* gleiche Grundfarbe wie Site */
    padding: 48px 0 40px;        /* genug Platz */
    box-sizing: border-box;
    text-align: center;
    color: #5a3528;
  }

  .hero2-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
  }

  .hero2-text {
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
  }

  /* Button zentrieren (dein spotify-btn bleibt Style) */
  .hero2 .spotify-btn {
    margin: 0 auto;
    color: #5a3528;           /* weißer Text */
    border-color: #5a3528;	
  }
}





.upcoming_start {
  background: #B8A898;
  padding-top: 15px;
  padding-bottom: 20px;
  padding-left: 6vw;
  padding-right: 6vw;
  box-sizing: border-box;
  position: relative;
  color: #e9efe6;
  text-align: center;
  
}






/* WE LOVE - make Leo size equal to Rik and reduce gap */
.we-love {
  background: #e9efe6;
  padding-top: 80px;
  padding-bottom: 120px;
}

/* Grid */
.we-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;

  /* Wichtig für mittige Ausrichtung */
  align-items: start;
  position: relative;
}

/* LEFT + RIGHT block */
.we-name, 
.we-name-right {
  font-size: 68px;
  color: #5a3528;
  margin: 0;
}

.we-left .we-role {
  margin-top: 8px;
}

.we-role, 
.we-role-right {
  font-size: 18px;
  color: #5a3528;
  line-height: 1.28;
}

.we-photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
}

/* --------------------------- */
/* CENTER BLOCK OPTIMIERUNG    */
/* --------------------------- */


.we-center {
  padding-top: 115px; /* vorher 140px → jetzt höher & näher am Screenshot */
  text-align: center;
}

.we-heading {
  font-size: 46px; /* leicht kleiner, vorher 48px */
  color: #5a3528;
  margin: 0 0 16px 0;
}

.we-copy {
  font-size: 17px;  /* minimal kleiner, vorher 18px */
  line-height: 1.32;
  color: #5a3528;
  margin: 0 auto;
  max-width: 360px;
}







/* ---- MUSIC (centered ) ---- */
.music {
  background: #e8c7bf; /* your background color */
  color: #5a3528;
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%; 
  margin: 0 auto;       /* center horizontally */
  padding: 36px 48px;   /* top/bottom and side padding for breathing room */
  box-sizing: border-box;
}

/* keep the inner grid for layout, but no full-width pushing */
.music-inner {
  display: block;       /* keep vertical flow */
}

/* section title (large) */
.music .section-title{
  font-size: 92px;      /* as you wanted */
  color: #5a3528;
  margin: 0 0 18px 0;
  line-height: 0.95;
}

/* Grid row for the two columns (left text & right meta) */
/* Important: use gap and a constrained width container instead of space-between across the whole viewport */
.music-grid{
  display: grid;
  grid-template-columns: 1fr 320px; /* left flexible, right fixed column */
  gap: 36px;
  align-items: center;
  margin-top: 18px;
}

/* left large copy */
.music-large{
  font-size: 36px;
  color: #5a3528;
  line-height: 1.05;
}

/* right meta block */
.music-meta{
  font-size: 34px;
  color: #5a3528;
  text-align: right;
  line-height: 1.05;
}

/* genres line: keep it inside the centered wrap and allow linewrap */
.music-genres{
  margin-top: 10px;
  font-size: 16px;
  color: #5a3528;
  line-height: 1.25;
  max-width: 100%; /* will be constrained by .wrap */
  /* if you want it visually narrower, change max-width: 900px; */
}

/* responsiveness: stack columns on small screens */
@media (max-width: 900px) {
  .music .wrap { padding: 24px; }
  .music .section-title { font-size: 56px; }
  .music-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
  .music-meta { text-align: left; font-size: 20px; }
  .music-large { font-size: 28px; }
  .music-genres { font-size: 14px; }
}









/* ===========================
   SETS 
   =========================== */

.sets {
  background: #B8A898;
  color: #5a3528;
  padding-top: 80px;
  padding-bottom: 40px;
}

.sets .sec-title {
  font-size: 90px;
  margin: 0 0 20px;
  color: #5a3528;
}

.sets-inner.compact {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-top: 18px;
}

.set-art img {
  width: 360px;
  height: 360px;
  object-fit: cover;
}

.sets-info .what {
  font-size: 20px;
  color: #5a3528;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* BUTTON STYLE for Sets Section */
.hero-btn,
.soundcloud-btn,
.spotify-btn,
.contact-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 40px;

  /* NEW COLORS */
  color: #5a3528;                                  /* same color as section text */
  border: 2px solid #5a3528;                       /* visible border */
  background: transparent;

  text-decoration: none;
  margin-top: 10px;
  width: fit-content;
  font-size: 20px;
}




/* Globale Button-Basis */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 40px;
  border: 2px solid rgba(255,255,255,0.9);
  text-decoration: none;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: all 0.35s ease;
  text-align: center; /* wichtig */
  
}

/* Hover */
.btn:hover {
  background-color: rgba(255,255,255,0.15);
}



.soundcloud-btn:hover {
  background: #e8c7bf;
}









/* small spacing between buttons */
.spotify-btn {
  margin-top: 6px;
}

/* OPTIONAL: hover effect */

.spotify-btn:hover,
.hero-button:hover,
.btn:hover,
.contact-btn:hover 
.support-btn:hover {
  background: #B8A898;
  color: #fff;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: 0.9s ease-out;
}





/* TRACKS SECTION */
.tracks {
  background:#6f7260;
  color: #5a3528;
  padding:80px 0;
}

.tracks .section-title {
  font-size: 90px;
  margin-bottom: 18px;
}

/* Layout der Cards */
.tracks-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 18px;
}

/* Jede Karte */
.track-card {
  display: flex;
  gap: 18px;
  align-items: center;
  width: calc(50% - 18px);
  min-width: 260px;
}



.track-art {
  width: 360px; 
  height: 360px;
  flex-shrink: 0;
}

.track-art img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Schneidet die Bilder auf exakt dieselbe sichtbare Fläche zu */
  aspect-ratio: 1/1;
  display: block;
}




/* Text */
.what {
  font-size: 20px;
  color: #efecec;
  margin: 0;
}

/* Spotify Button */
.spotify-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 40px;
  border: 2px solid rgba(255,255,255,0.9);
  text-decoration: none;
  color: #fff;
}


.contact-btn {
  display: inline-block;
  text-align: center;
  padding: 12px 28px;
  border-radius: 40px;
  border: 2px solid rgba(255,255,255,0.9);
  text-decoration: none;
  color: #fff;

}





/* Spotify Button */
.support-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 40px;
  border: 2px solid #000000
  text-decoration: none;
  color: #fff;
  text-decoration: none;
  margin-top: 10px;
  width: fit-content;
  font-size: 20px;
  background: #000000;
}





/* Container oben rechts */
.top-right-buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 9999; /* über allem */
}

/* Gleicher Button-Stil wie listen-to-our-music */
.top-right-buttons .top-btn {
  /* falls listen-to-our-music besondere Styles hat, greift .btn bereits */
}

/* Optional: Falls du eine kleiner/größer Anpassung pro Button willst */
.top-right-buttons .top-btn {
  padding: 10px 18px;
}








/* MOBILE */
@media (max-width: 900px) {
  .track-card {
    width: 100%;
    flex-direction: row;
  }

  .track-art {
    width: 40vw;
    height: 40vw;
  }

  .track-art img {
    object-fit: cover;
  }
}






/* ===========================
   PROJECTS - final alignment fix
   =========================== */


.projects {
  position: relative;
  min-height: 105vh;
  overflow: hidden;
  padding-bottom: 100px;
  background-image: url("07_luft_lube_bw.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}


@media (min-width: 901px) {
  .hero,
  .projects {
    background-attachment: fixed;
  }
}
@media (max-width: 900px) {
  .hero,
  .projects {
    background-attachment: scroll;
  }
}



/* Grid: linke flexible Spalte + rechte fixe Spalte (schmaler, weiter links) */
.projects-inner {
  max-width: 1180px;               /* <- wichtig: insgesamt schmaler, so rückt Nav nach links */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  column-gap: 36px;                /* engerer Abstand zwischen title und nav */
  align-items: start;
  box-sizing: border-box;
  padding: 0 20px;
}

/* Linke Spalte (Headline) */
.projects-left {
  grid-column: 1 / 2;
  align-self: start;
}

/* Titel */
.projects .section-title {
  font-size: 120px;
  line-height: 0.9;
  margin: 0;
  color: #e6d5cc;
  z-index: 2;
}

/* Rechte Spalte: Nav */
.projects-nav {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 100px;
  justify-content: flex-start;
  align-items: end;                 /* sorgt für rechte Kante */
  box-sizing: border-box;
  width: 100%;
}

/* Links: füllen die Spalte, gleiche Breite, rechtsbündig */
.projects-nav a {
  font-size: 44px;
  font-weight: 300;
  text-decoration: none;
  color: #e6d5cc;
  /*white-space: nowrap;*/              /* kein Umbruch (außer last-child) */
  
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;

  letter-spacing: 0.6px;

  display: block;
  text-align: right;
  width: 100%;                      /* füllt exakt die rechte Spaltenbreite */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  align-self: flex-end;
}

/* letzter Link darf umbrechen, bleibt aber in derselben Spalte */
.projects-nav a:last-child {
  white-space: normal;
  line-height: 1.05;
  text-align: right;
  max-width: 100%;
}

/* kleiner hover */
.projects-nav a:hover {
  opacity: 0.75;
  transform: translateX(6px);
  transition: opacity .22s, transform .22s;
}

/* responsive: bei schmalen Screens untereinander */
@media (max-width: 980px) {
  .projects-inner {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
  .projects-nav {
    align-items: flex-start;
    text-align: right;
  }
  .projects-nav a { text-align: right; white-space: normal; font-size: 30px; }
  .projects .section-title { font-size: 64px; }
}









/* LABEL - swap image handled in HTML */
.label{background:#7CCD7C;padding-top:80px}
.label-title{font-size:86px;color:#efe8df;margin:0}
.label-gallery{display:flex;gap:28px;margin-top:28px;}
.label-gallery img{width:100%;height:320px;object-fit:cover}
/* Nur dieses Bild etwas nach unten verschieben */
.label-gallery img[src="07_recordbutton_l&l.jpg"] {
  margin-top: 16px;}
.label-gallery img[src="09_events.jpg"] {
  margin-top: 40px;   
}

.label-copy {color: #efe8df !important;font-size:22px;}
.card-caption {color: #efe8df !important;}



/* SUUUPAE - images + captions + texts */
.suupae{background:#d2c6bc;color:#efe8df;padding-top:80px;padding-bottom:80px}
.suupae-intro{font-size:22px;margin:6px auto 18px auto;text-align:left}
.suupae-grid.with-captions{display:flex;gap:18px;justify-content:center;margin-top:18px}
.suupae-grid figure{width:180px;text-align:center}
.suupae-grid img{width:100%;height:280px;object-fit:cover}
.suupae-grid figcaption{font-size:14px;margin-top:8px;color:#efe8df}
.suupae-note{text-align:center;margin-top:12px;color:#efe8df}
.melted-unterschriften {color: #efe8df !important;}
#suuupae .section-title {
  color: #efe8df;}


/* MELTED - added text included */
.melted{background:#7b7a7a;color:#efe8df;padding-top:80px;padding-bottom:80px}
.melted-lead{font-size:22px;max-width:900px;margin:0 auto 12px auto;text-align:center}
.melted-text{max-width:900px;margin:0 auto 18px auto;text-align:center}
.melt-grid{display:flex;gap:36px;justify-content:center;margin-top:18px}
.melt-grid img{width:280px;height:280px;object-fit:cover}
#melted .section-title {
  color: #efe8df;}




/* GRAPHIC - swapped images and text added */
.graphic{background:#6e5d6b;color:#efe8df;padding-top:80px;padding-bottom:80px}
.graphic-copy{margin:12px auto 18px auto;text-align:center;font-size:22px;}
#graphicdesign .section-title {
  color: #efe8df;}



  /* -------------------------------------------
     GRAPHIC
     ------------------------------------------- */

.graphic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 kleine Bilder */
  gap: 24px;
  margin-top: 36px;
}

/* kleine Bilder */
.graphic-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* breites Abschlussbild */
.graphic-wide {
  grid-column: 1 / -1;   /* nimmt die GANZE Grid-Breite ein */
  width: 100%;
  height: auto;
  object-fit: contain;  /* nichts abschneiden */
}


@media (max-width: 900px) {
  .graphic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* === ECSTATIC DANCE JOURNEYS === */

.ecstatic-section {
  background: #635d5e; /* exakt wie in deiner PDF/Vorlage */
  padding: 120px 0 100px;
  text-align: center;
}

.ecstatic-section .sec-title {
  font-size: 90px;       /* gleiche Größe wie "tracks." */
  color: #efe8df;
  margin-bottom: 40px;
  text-align: right;
}

.ecstatic-toptext {
  font-size: 22px;
  color: #efe8df;
  line-height: 1.35;
  margin-bottom: 50px;
}

.ecstatic-image-wrap {
  width: 100%;
  max-width: 1300px;     /* Breite wie auf Screenshot */
  margin: 0 auto;
}


.bummelzug {
  width: 100%;
  max-width: 1180px;
  margin: 40px auto;
}

.bummelzug img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}



.ecstatic-img {
  width: 100%;
  height: 550px;         /* exakt gleiche Höhe wie PDF */
  object-fit: cover;
  object-position: center 20%; /* Ausschnitt identisch */
  display: block;
}

.ecstatic-credit {
  text-align: left;
  width: 1300px;
  margin: 10px auto 0;
  color: #e6dfd6;
  font-size: 12px;
}




/* --- DJ EQUIPMENT SECTION --- */
#rental {
  background: #4d3657;
  width: 100%;
  position: relative;
  color: #efe8df;
}

#rental .sec-title {
    color: #e6dfd6; 
}




.upcoming {
  background: #d1bcd6;
  padding-top: 180px;
  padding-bottom: 180px;
  padding-left: 6vw;
  padding-right: 6vw;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  color: #efe8df;
  text-align: center;
}

.upcoming-title {
	color: #4d3657;
	font-size: 90px;
    line-height: 0.9;
    margin-bottom: 40px;
	position: center;
}






/* UPCOMING unchanged structure */
.bio-inner{display:flex;gap:36px;align-items:center;max-width:1100px;margin:28px auto}
.bio-img{width:520px;height:auto;object-fit:cover}
.bio-actions{display:flex;flex-direction:column;gap:18px}

  
.bio-title {
  font-size: 90px;
  line-height: 0.9;
  margin-bottom: 40px;
  color: #5a3528;
  position: center;
}
  
  
  
  
  
  /* ARTIST BIO — clean version */
.artist-bio {
  width: 100%;
  background: #b36a6a;
  color: #efe8df;
  padding: 120px 6vw;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.artist-bio .section-title {
  color: #efe8df;
  margin-bottom: 40px;
  text-align: center;
}

/* Layout */
.bio-inner {
  display: flex;
  gap: 36px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Image */
.bio-img {
  width: 520px;
  height: auto;
  object-fit: cover;
}

/* Action buttons (Spotify-Style) */
.bio-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Buttons im Spotify-Style */
.bio-actions .btn {
  display: inline-block;
  background: #efe8df;
  color: #b36a6a;
  padding: 14px 22px;
  border-radius: 90px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: 0.25s ease;
}

.bio-actions .btn:hover {
  background: #fff;
  transform: scale(1.04);
}

  
  


.contact-credit {
  position: absolute;
  left: 40px;
  bottom: 40px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}





.impressum {
  background: #e9efe6;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 6vw;
  padding-right: 6vw;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  text-align: center;
}

.impressum-title {
	color: #5a3528;
	font-size: 180px;
    line-height: 0.9;
    margin-bottom: 40px;
	position: center;
}
  
  
 
  




.section-block {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}





/* Buttons */
.contact-btn, .btn, .hero-button, .support-btn .spotify-btn{cursor:pointer}

/* Responsive tweaks */
@media (max-width:1000px){
  .we-inner{grid-template-columns:1fr;gap:20px}
  .projects-title{font-size:120px;padding-left:24px}
  .projects-pdf.large-bg{padding:140px 4vw 180px 4vw;min-height:600px}
  .melt-grid img{width:320px;height:320px}
  .single-img{max-width:100%;}
  section{padding:48px 5vw}
}







/* ---- UNIFIED SECTION TITLES (same size as 'tracks.') ---- */
.sec-title,
.section-title,
.we-heading,
.music-title,
.sets-title,
.tracks-title,
.projects-title,
.slowbar-title,
.suu-title,
.melted-title,
.graphic-title,
.ecstatic-title,
.rental-title{
  font-size: 90px;    /* ← gleiche Größe wie 'tracks' */
  line-height: 0.9;
  margin-bottom: 40px;
  color: #5a3528;
}





/* Scroll reveal basic animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Wort-für-Wort Fade-in */
.type-words span {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.type-words span.visible {
  opacity: 1;
  transform: translateY(0);
}

.type-words span {
  margin-right: 0.25em;
}

/* GLOBAL WRAPPER – gleiche Breite wie we love / music */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing:border-box;
}






/* ============================================================
   UNIVERSAL SECTION LAYOUT — matches PDF perfectly
   ============================================================ */

.std-section {
  padding: 80px 0;
  color: #efe9e2;
}

.std-section .wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.std-title {
  font-size: 90px;
  margin-bottom: 40px;
  line-height: 0.9;
  color: #efe9e2;
}

/* Background colors exactly like PDF */
#slowbar { background: #314e40; }
#suuupae { background: #6c8780; }
#melted { background: #928e91; }
#graphicdesign { background: #6d6173; }
#ecstatic { background: #736b78; }
#djequipment { background: #cd6839; width: 100%; position: relative; }
#bio { background: #b56663; }


/* Text blocks */
.std-text {
  font-size: 20px;
  line-height: 1.35;
  color: #e6d5cc;
}

/* Image styling based on PDF */
.std-img {
  width: 420px;
  height: 420px;
  object-fit: cover;
  object-position: center;
  border: 8px solid rgba(0,0,0,0.25);
}

/* FLEX LAYOUT */
.std-flex {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* If PDF shows image left/right → flexible controls */
.left-img .std-img { order: 0; }
.left-img .std-text { order: 1; }

.right-img .std-img { order: 1; }
.right-img .std-text { order: 0; }


.std-section .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease-out;
}

.std-section .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ==========================================
   RIGHT-ALIGN HEADERS AFTER PROJECTS SECTION
   ========================================== */

#slowbar .label-title,
#suuupae .section-title,
#melted .section-title,
#graphicdesign .section-title,
#ecstatic .sec-title,
#rental .sec-title {
  text-align: right;
}


/* ============================================================
   MOBILE + SMALL WINDOW RESPONSIVE FIXES (global)
   ============================================================ */

@media (max-width: 880px) {

  /* --- GLOBAL WRAP: weniger Seitenabstand --- */
  .wrap {
    padding: 0 16px;
  }

  /* --- GROSSE SECTION-TITEL KLEINER --- */
  .section-title,
  .sec-title {
    font-size: 48px !important;
    line-height: 1;
  }


  /* -------------------------------------------
     HERO
     ------------------------------------------- */
  .hero-title {
    font-size: 58px;
  }
  .hero-sub {
    font-size: 20px;
  }
  .hero-logo img {
    width: 80px;
  }


  /* -------------------------------------------
     WE LOVE — 3 Spalten → 1 Spalte
     ------------------------------------------- */
  .we-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .we-center {
    padding-top: 20px;
  }
  .we-photo {
    height: 320px;
  }
  .we-name, .we-name-right {
    font-size: 50px;
  }


  /* -------------------------------------------
     MUSIC – Grid → Stack
     ------------------------------------------- */
  .music-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .music-large { font-size: 28px; }
  .music-meta { font-size: 20px; }


  /* -------------------------------------------
     SETS
     ------------------------------------------- */
  .sets-inner.compact {
    flex-direction: column;
  }
  .set-art img {
    width: 250px;
    height: 250px;
  }





  /* -------------------------------------------
     PROJECTS – Navigation unter die Überschrift
     ------------------------------------------- */
  .projects-inner {
    grid-template-columns: 1fr 35% !important ;
    row-gap: 18px;
    text-align: left !important;
  }
  .projects-nav {
    align-items: flex-start !important;
  }
  .projects-nav a {
    text-align: left !important;
    white-space: normal !important;
    font-size: 26px !important;
  }


  /* -------------------------------------------
     LABEL (Slow Bar)
     ------------------------------------------- */
  .label-gallery {
    flex-direction: column;
  }
  .label-gallery img {
    height: 240px;
  }


  /* -------------------------------------------
     SUUUPAE
     ------------------------------------------- */
  .suupae-grid.with-captions {
    flex-wrap: wrap;
    justify-content: center;
  }
  .suupae-grid figure {
    width: 44%;
    min-width: 150px;
  }
  .suupae-grid img {
    height: 200px;
  }


  /* -------------------------------------------
     MELTED
     ------------------------------------------- */
  .melt-grid {
    flex-direction: column;
  }
  .melt-grid img {
    width: 240px;
    height: 240px;
  }




  /* -------------------------------------------
     ECSTATIC
     ------------------------------------------- */
  .ecstatic-img {
    height: 340px;
  }
  .ecstatic-toptext {
    font-size: 16px;
  }
  .ecstatic-section .sec-title {
    text-align: left !important;
  }


  /* -------------------------------------------
     RENTAL – Grid → Stack
     ------------------------------------------- */
  .rental-inner {
    grid-template-columns: 1fr;
  }



  /* -------------------------------------------
     BIO
     ------------------------------------------- */
  .bio-inner {
    flex-direction: column;
    text-align: center;
  }
  .bio-img {
    width: 100%;
    max-width: 350px;
  }


}



  /* -------------------------------------------
     CONTACT
     ------------------------------------------- */
	 
	 
/* --- CONTACT SECTION FULL BACKGROUND IMAGE --- */
.contact {
  background-image: url("end_portrait_credit_Yaroka_Fotografie.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  position: relative;
  padding: 300px 6vw;
  box-sizing: border-box;

  text-align: center;
}

/* Titel wie überall */
.contact .section-title {
  color: #efe8df;
  margin-bottom: 40px;
  
}

	 
	 
  .contact-mail {
    font-size: 18px;
    word-break: break-word;
  }




/* Content zentriert */
.contact-inner {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: center;
  align-items: center; 
  justify-content: center;
  gap: 24px;
}

/* Text */
.contact-text {
  font-size: 1.2rem;
  margin-bottom: 28px;
}




/* MOBILE OPTIMIERUNG */
@media (max-width: 768px) {

  .contact {
    padding: 150px 8vw;
	background-attachment: scroll; /* statt fixed */
	background-position: center 20%;
  }

  .contact-text {
    font-size: 1rem;
  }
}




.upcoming-text {
	font-size: 22px;
	color: #fff;
}






/* ============================================================
   RESPONSIVE FIX LEVEL 2 — Overflow-Killer
   ============================================================ */



/* --- GLOBAL: Overflow verhindern --- */
html, body {
  overflow-x: hidden;
}

/* --- Bilder niemals aus dem Bildschirm ragen lassen --- */
img {
  max-width: 100%;
  height: auto;
}

/* --- PROJECTS: Rechte Spalte schrumpfbar machen --- */
@media (max-width: 900px) {
  .projects-inner {
    grid-template-columns: 1fr minmax(200px, 420px) !important;
  }
  .projects-nav {
    width: 100% !important;
  }
}









/* --- SETS: Bild verkleinern --- */
@media (max-width: 900px) {
  .set-art img {
    width: 100% !important;
    height: auto !important;
    max-width: 280px;
  }
}

/* --- SUUUPAE: Bilder flexibel, ohne Überbreite --- */
@media (max-width: 900px) {
  .suupae-grid figure {
    width: 46% !important;
  }
}

/* --- LABEL GALLERY: Overflow fix --- */
@media (max-width: 900px) {
  .label-gallery {
    flex-direction: column !important;
    align-items: center;
  }
}

/* --- RENTAL: 2 → 1 Spalte --- */
@media (max-width: 900px) {
  .rental-inner {
    grid-template-columns: 1fr !important;
  }
}


/* ===========================
   PROJECTS — Mobile Fix: Kein Nach-rechts-Rutschen
   =========================== */
@media (max-width: 1100px) {
  .projects-inner {
    grid-template-columns: 1fr !important;  /* nur 1 Spalte */
  }

  .projects-nav {
    align-items: flex-start !important;     /* linksbündig */
    width: 100% !important;                 /* volle Breite */
    padding-top: 20px !important;
  }

  .projects-nav a {
    text-align: left !important;
    white-space: normal !important;         /* Zeilen dürfen umbrechen */
  }
}


/* ============================================================
   MOBILE OPTIMIZATION LEVEL 3 — Complete polish
   ============================================================ */

/* GLOBAL */
@media (max-width: 900px) {

  html, body {
    overflow-x: hidden;
  }

  section {
    padding: 48px 20px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Disable parallax bug on mobile */
  .hero-parallax-bg {
    background-attachment: scroll !important;
    height: 115% !important;
  }

  /* HERO text sizes */
  .hero-title { font-size: 62px; }
  .hero-sub { font-size: 20px; }
  .hero-logo img { width: 80px; }

  /* WE LOVE */
  .we-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .we-photo {
    height: auto;
  }
  .we-center { padding-top: 20px; }

  /* MUSIC */
  .music .section-title { font-size: 56px; }
  .music-large { font-size: 26px; }
  .music-meta { font-size: 22px; text-align: left; }
  .music-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* SETS */
  .sets-inner {
    flex-direction: column;
    text-align: center;
  }



  /* PROJECTS — fixed in detail above */
  .projects .section-title {
    font-size: 64px !important;
  }

  /* SUUUPAE */
  .suupae-grid {
    flex-wrap: wrap;
    justify-content: center;
  }
  .suupae-grid figure {
    width: 45% !important;
  }
  .suupae-intro { font-size: 22px; }

  /* MELTED */
  .melt-grid {
    flex-direction: column !important;
  }
  .melt-grid img {
    max-width: 300px !important;
  }


  /* ECSTATIC */
  .ecstatic-img {
    height: 300px !important;
  }
  .ecstatic-toptext { font-size: 16px; }

  /* RENTAL */
  .rental-inner {
    grid-template-columns: 1fr !important;
  }

  /* UPCOMING, BIO */
  .bio-inner {
    flex-direction: column;
    text-align: center;
  }
  .bio-img {
    max-width: 300px;
  }
}




/* Überschreibe versehentliches padding:0 */
#rental{
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  padding-left: 6vw !important;
  padding-right: 6vw !important;
  box-sizing: border-box;
}






/* oder spezifisch nur für rental und upcoming */
#rental {
  padding: 120px 6vw;    /* oben/unten + Seitenabstand */
}




  .rental-text {
    font-size: 22px;
	text-align: left;
  }







/* remove width restrictions from section-block if used */
.section-block {
  width: 100%;
  margin: 0;
  padding: 0;
}



#suuupae-session p,
#melted p,
#graphicdesign p,
#ecstatic p {
    text-align: left;
}



/* ----------------------------------------------------------
   FULL MOBILE OPTIMIZATION (OHNE DESIGNÄNDERUNG)
   ---------------------------------------------------------- */

/* GLOBAL MOBILE (bis 880px)
   — du hattest schon Basisregeln, jetzt erweitert & strukturiert
---------------------------------------------------------- */
@media (max-width: 880px) {

  /* Section padding global */
  section,
  .std-section {
    padding: 60px 5vw !important;
  }

  /* Headings */
  .hero-title { font-size: 60px; }
  .section-title,
  .sec-title { font-size: 60px; text-align: left; }

  .std-cat { font-size: 16px; }

  /* Images + Media */
  .std-img {
    width: 100%;
    max-width: 360px;
    height: auto;
  }

  .set-art img,
  .set-art-large {
    width: 100%;
    max-width: 360px;
    height: auto;
  }

  .track-art {
    width: 130px;
    height: auto;
  }

  /* Flex/Grids → 1 Column */
  .std-flex {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .music-grid,
  .projects-inner,
  .act-table dt,
  .act-table dd {
    grid-template-columns: 1fr;
  }


  /* Buttons smaller */
  .hero-button,
  .btn,
  .contact-btn,
  .support-btn {
    padding: 10px 22px;
    font-size: 16px;
  }


  /* Parallax Fix für Mobile */
  .hero-parallax-bg {
    background-attachment: scroll !important;
    height: auto;
  }

  /* Hero Height */
  .hero {
    height: 80vh;
  }
  .hero-center {
    top: 55%;
  }
  
  .hero-center .spotify-btn {
  margin-bottom: 40px; /* statt <br><br><br> */
}


  /* Artist Section */
  .we-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .we-name,
  .we-name-right {
    font-size: 42px;
    text-align: left;
  }

  .we-photo {
    height: auto;
    width: 100%;
    max-width: 360px;
  }

  /* Tracklist */
  .track {
    padding: 30px 20px;
    gap: 16px;
  }

  .track-content {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .track-duration {
    justify-self: start;
  }

  /* Buttons Top Right */
  .top-right-buttons {
    top: 12px;
    right: 12px;
  }
}


/* ----------------------------------------------------------
   SMALL MOBILE (bis 600px)
---------------------------------------------------------- */
@media (max-width: 600px) {

  /* Typography scaling */
  .hero-title { font-size: 44px; }
  .section-title,
  .sec-title { font-size: 42px; }
  .we-name,
  .we-name-right { font-size: 36px; }

  .music-large { font-size: 22px; }
  .std-text,
  .std-section-text { font-size: 16px; }

  /* Hero height more compact */
  .hero {
    height: 68vh;
  }



  /* Images */
  .std-img,
  .set-art img,
  .track-art,
  .we-photo {
    width: 80vw;
    max-width: 300px;
  }

  /* Flex/Grids */
  .std-flex {
    gap: 20px;
  }

  /* Hide or stack top-right buttons if needed */
  .top-right-buttons {
    flex-direction: row;
    gap: 8px;
  }
}


/* ----------------------------------------------------------
   VERY SMALL MOBILE (bis 480px)
---------------------------------------------------------- */
@media (max-width: 480px) {

  .hero-title { font-size: 38px; }

  .section-title,
  .sec-title { font-size: 34px; }

  .std-text { font-size: 15px; }

  .hero {
    height: 64vh;
  }
}










/* -----------------------------
   GLOBAL MOBILE RESET
   Verhindert verschobene Blöcke
------------------------------ */
@media (max-width: 900px) {

  /* Alles zentrieren */
  section, 
  .wrap,
  .contact-inner,
  .tracks-inner,
  .sets-inner,
  .upcoming-inner {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Überschriften immer zentriert */
  h1, h2, h3, h4, h5, h6 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Bilder zentrieren */
  img, 
  .track-art img,
  .set-art img,
  .we-photo img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Buttons immer zentrieren */
  a.btn,
  .spotify-btn,
  .set-btn,
  .contact-btn {
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Karten / Flex-Objekte zentrieren */
  .track-card,
  .set-card,
  .upcoming-card {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

}


@media (max-width: 900px) {
  .wrap {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
  }
}




/* ===========================
   MOBILE-FIXES (ONLY) - append to end of CSS
   =========================== */

@media (max-width: 900px) {

  /* ----------------------------
     TRACKS: left padding + smaller images
     ---------------------------- */
  /* Container bekommt 10px Padding (verhindert "kleben" am Rand) */
  .tracks,
  .tracks .wrap,
  .tracks-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Karten selbst ebenfalls etwas Abstand geben (falls einzelne Cards noch klemmen) */
  .track-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Bilder um 30% verkleinern: mobile default war 40vw → 70% davon = 28vw */
  .track-art {
    width: 28vw !important;
    height: 28vw !important;
    min-width: 80px; /* verhindert zu kleine Bilder */
    max-width: 160px; /* optionale Obergrenze für sehr kleine Viewports */
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* Optional: das img selbst als block und zentriert innerhalb der track-art (falls nötig) */
  .track-art img {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }


  /* ----------------------------
     PROJECTS: rechte Navigation - rechtsbündig mit 10px Abstand
     ---------------------------- */
  /* Stelle sicher, dass die Projekte-Nav rechtsbündig in der Spalte sitzt und nicht aus dem Viewport rutscht */
  .projects-nav {
    width: 100% !important;
    padding-right: 10px !important;   /* 10px Abstand zum rechten Rand */
    padding-left: 10px !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;  /* rechtsbündig in der Spalte */
  }

  /* die Links selbst: rechtsbündig, aber nicht überstehen */
  .projects-nav a {
    text-align: right !important;
    padding-right: 10px !important;    /* Abstand vom rechten Rand */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important; /* verhindert Überlaufen */
    word-break: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    font-size: 26px !important; /* mobile Schriftgröße, passt zur bestehenden Mobile-Rule */
  }

  /* Wenn du ausdrücklich willst, dass die Links immer exakt 10px vom Viewport-Rand bleiben,
     unabhängig von anderen Wraps, kannst du zusätzlich ein inneres Padding entfernen: */
  .projects-inner { padding-right: 0 !important; }

  /* ----------------------------
     UPCOMING: Titelgröße anpassen (gleich wie andere mobile Titles)
     ---------------------------- */
  .upcoming-title,
  .upcoming .section-title,
  .upcoming .sec-title {
    font-size: 48px !important; /* gleiche mobile Heading-Größe wie andere Sektionen */
    line-height: 1 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    text-align: center !important; /* falls du Überschriften zentriert auf Mobile willst */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Falls .bio-title / andere Title-Varianten in upcoming verwendet werden */
  .upcoming .bio-title { font-size: 48px !important; line-height:1 !important; }

  /* kleine Ergänzung: verhindert horizontales Scrollen durch zu breite Elemente */
  html, body {
    overflow-x: hidden !important;
  }
}

/* ======================================
   PROJECTS – ZICHTBARKEIT FIX
   ====================================== */
@media (max-width: 900px) {

  /* 1) Stellt sicher, dass nichts abgeschnitten wird */
  #projects,
  #projects .wrap,
  #projects .projects-inner {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: block !important; /* neutralisiert Flex-Probleme */
  }

  /* 2) Navigation ganz normal unterhalb des Titels anzeigen */
  #projects .projects-left,
  #projects .projects-nav {
    position: relative !important;
    transform: none !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* 3) Links wieder ins Layout erzwingen */
  #projects .projects-nav a {
    display: block !important;
  }
}



@media (max-width: 900px) {
.ecstatic-credit {
  font-size: 8px;
}
}


.graphic-mail{align-items:center !important; text-align:center !important;}



/* -------------------------------------
   GLOBAL SCROLL BUTTONS (Up / Down)
-------------------------------------- */

.scroll-buttons {
  position: fixed;
  right: 24px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 9999;
}

.scroll-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(240, 234, 232, 0.2);
  border: 2px solid rgba(255,255,255,0.9);
  color: #fff;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  backdrop-filter: blur(6px); /* leichter Glas-Effekt */
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Hover-Effekt wie deine Spotify-Buttons */
.scroll-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.1);
}

/* Mobile kleiner */
@media (max-width: 768px) {
  .scroll-buttons {
    right: 12px;
    bottom: 40px;
  }

  .scroll-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}



  
  .top-right-buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 12px;

  z-index: 999999 !important; /* über allem */
}

@media (max-width: 900px) {
  .hero::before,
  .hero-parallax-bg {
    z-index: -1 !important;
  }
}