@font-face { font-family: "Bickleys"; src: url(fonts/Bickley_Regular.ttf); }

:root {
  --main-color:#c3a895;            /* Beige Hintergrund für Abschnitte 1–5 */
  --light-color:#ffffff;            /* Weißer Hintergrund für Abschnitt 6 (Kontakt) und Body */
  --divider-color:rgba(0,0,0,0.12); /* Basiswert – als Fallback */
  --menu-icon-color:#000000;        /* Wird nicht mehr genutzt, Icon ist jetzt immer weiß */
  --text-dark:#222222;              /* Textfarbe für weißen Hintergrund */
  --text-on-main:#ffffff;           /* Text auf beige (#c3a895) */
  --page-max:1300px;
  --section-padding:100px;
}

* { box-sizing:border-box; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:"Arial Unicode MS",sans-serif;
  color:var(--text-dark);
  background:var(--light-color);
  overflow-x:hidden;
}

::selection { background:rgba(0,0,0,.18); color:#fff; }

/* ===== Menü-Button (immer weiß, sichtbar auf Weiß durch Schatten) ===== */
.menu-toggle {
  position:fixed; top:20px; right:20px;
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  width:30px; height:22px; z-index:1002; transition:opacity .3s;
}
.menu-toggle:hover { opacity:.85; }

.menu-toggle span {
  display:block; height:3px; width:100%;
  background:#ffffff;                 /* Immer weiß */
  border-radius:3px;
  box-shadow:0 0 2px rgba(0,0,0,0.6); /* Sichtbarkeit auf weißem Bereich */
  transition:all .3s ease;
}

/* Geöffnetes Menü: Linien bleiben weiß, Schatten weg für cleanen Look */
.menu-toggle.active span {
  background:#ffffff;
  box-shadow:none;
}
.menu-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px); }

/* ===== Overlay ===== */
.menu-overlay {
  position:fixed; inset:0;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:1000;
}
.menu-overlay.active { opacity:1; visibility:visible; }

/* ===== Navigation ===== */
nav {
  position:fixed; top:0; right:-250px; width:250px; height:100%;
  background:var(--main-color); transition:right .3s ease;
  display:flex; flex-direction:column; align-items:center; padding-top:80px;
  z-index:1001; box-shadow:-2px 0 8px rgba(0,0,0,.15);
}
nav.active { right:0; }
nav ul { list-style:none; padding:0; margin:0; width:100%; }
nav ul li { width:100%; text-align:center; margin:15px 0; }
nav ul li a {
  text-decoration:none; color:#fff;               /* bessere Lesbarkeit auf beige */
  font-size:18px; display:block; padding:10px 0;
  transition:background .2s,color .2s;
}
nav ul li a:hover { background:rgba(255,255,255,.18); } /* heller Hover */

/* ===== Sektionen (mit Verlauf-Trennlinie) ===== */
section {
  padding:var(--section-padding) 10%;
  display:flex; justify-content:center; align-items:center; text-align:center;
  background:var(--main-color);           /* Standard-Hintergrund: beige */
  color:var(--text-on-main);              /* Standard-Text: weiß */
  border-bottom:1px solid transparent;
  border-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.24), rgba(0,0,0,0)) 1;
}

.section-inner { width:100%; max-width:var(--page-max); margin:0 auto; }

/* Einheitliche Bereichs-Titel */
section h1 {
  font-size: clamp(28px, 3.2vw, 46px);
  margin: 0 0 42px 0;
  line-height: 1.15;
  letter-spacing: .003em;
}

/* dezent: Akzentstrich unter Titeln (außer Home, hat eigenes) */
section:not(#section1) h1 {
  position: relative;
}
section:not(#section1) h1::after {
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; width:64px; height:2px;
  background: rgba(255,255,255,.35);  /* weißlicher Akzent auf Beige */
  border-radius: 2px;
}

/* ===== HOME (optimiert, Bickleys beibehalten) ===== */
#section1 {
  border-bottom:1px solid transparent; /* Verlaufslinie zwischen Bereich 1 & 2 */
  border-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.24), rgba(0,0,0,0)) 1;
  padding-top:clamp(90px, 12vh, 160px);
  padding-bottom:clamp(70px, 10vh, 120px);
}
#section1 .section-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(24px, 6vw, 64px);
  row-gap:clamp(16px,4vw,32px);
  text-align:left;
}
#section1 .text-area { max-width:65ch; }
#section1 .text-area h1 {
  font-family:"Bickleys";
  font-size:clamp(48px, 7vw, 80px);
  letter-spacing:-0.01em;
  line-height:1.03;
  position:relative;
  margin-bottom:0.6em;
}
#section1 .text-area h1::after {
  content:"";
  position:absolute; left:0; bottom:-0.5em;
  width:56px; height:3px;
  background:rgba(255,255,255,.5);  /* Akzent passend zur weißen Schrift */
  border-radius:2px;
}
#section1 .text-area h2 {
  font-size:clamp(20px,2.4vw,32px);
  letter-spacing:0.01em; opacity:.96;
  margin-bottom:1.2em; font-weight:400;
}
#section1 .text-area p {
  font-size:clamp(16px,1.1vw,19px);
  line-height:1.75; opacity:.98;
}
#section1 .image-area { display:flex; justify-content:center; align-items:center; }
#section1 .image-area img {
  max-width:100%; height:auto;
  max-height:min(600px,75vh);
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 3px 16px rgba(0,0,0,.12);
}
@media (min-width:1400px){ #section1 .section-inner{ max-width:1400px; } }
@media (max-width:600px){
  #section1 .text-area h2{ margin-bottom:1.1em; }
  #section1 .text-area p{ line-height:1.8; }
}

/* ===== GALERIE – GLOBAL ===== */
.gallery {
  display:grid; gap:20px; justify-items:center; width:100%;
}
.gallery img {
  width:100%; height:auto; object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.65); /* dunkler Rand für Kontrast */
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery img:hover {
  transform:scale(1.03);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

/* ===== DISCOGRAPHIE ===== */
#section2 .section-inner {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:40px;
}
#section2 .section-inner > h1 { width:100%; }

/* Kleinere Bereichstitel für 2–5 */
#section2 h1, #section3 h1, #section4 h1, #section5 h1 {
  font-size: clamp(22px, 2.3vw, 32px); /* verkleinert */
  margin-bottom: 36px;
}

/* Untertitel in Galeriesektionen – weiße Schrift auf beige */
.gallery-section {
  flex:1 1 45%; max-width:600px;
  display:flex; flex-direction:column; align-items:center;
}
.gallery-section h2 {
  color:#fff;
  font-size: clamp(18px, 2.0vw, 26px);
  margin: 0 0 22px 0; font-weight:500; letter-spacing:.005em;
}
#section2 .gallery {
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,auto);
  justify-items:stretch;
}
@media (max-width:800px){
  #section2 .section-inner{ flex-direction:column; align-items:center; }
  #section2 .gallery-section{ width:100%; max-width:700px; }
}

/* ===== NOTEN ===== */
#section3 .gallery {
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,auto);
}
#section3 .gallery img { height:410px; }
@media (max-width:1100px){ #section3 .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){ #section3 .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ #section3 .gallery{ grid-template-columns:1fr; } }

/* ===== VIDEOS ===== */
#section4 .gallery { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
#section4 .gallery img { height:280px; }

/* ===== GROSSE GALERIE ===== */
#section5 .large-image {
  display:block; width:100%; max-width:1000px; margin:0 auto;
  border-radius:12px; border:none; box-shadow:none; transition:none;
}

/* ===== KONTAKT – bleibt weiß, dunkler Text ===== */
#section6 {
  background:var(--light-color);
  color:var(--text-dark);
  border-bottom:1px solid transparent;
  border-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.24), rgba(0,0,0,0)) 1;
}
#section6 .section-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px, 6vw, 64px);
  align-items:center;
  text-align:left;
}
#section6 .image-area { display:flex; justify-content:center; align-items:center; }
#section6 .image-area img {
  width:100%; max-width:500px; height:auto;
  border-radius:10px; border:none; box-shadow:none; transition:none;
}
#section6 .text-area { color:var(--text-dark); }
#section6 h1 { margin-bottom:30px; }
#section6 p { font-size:1.2em; line-height:1.8; }

/* ===== FOOTER ===== */
footer {
  background: var(--main-color);
  color: var(--text-on-main);
  text-align: center;
  padding: 30px 10%;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.24), rgba(0,0,0,0)) 1;
}
footer a {
  color: var(--text-on-main);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease, opacity 0.3s ease, text-decoration-color .3s ease;
}
footer a:hover {
  opacity: 0.85;
  text-decoration: underline;
}
footer p {
  margin: 0;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  #section1 .section-inner,
  #section6 .section-inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  #section6 .text-area{ margin-top:30px; }
  #section1 .image-area img, #section6 .image-area img{ width:90%; }
}