:root{
  --ink:#3B2A1A;
  --peach:#ffb885;
  --white:#ffffff;

  --videoRed:#3a0c10;
  --bookingRed:#880000;

  --fg:#ffffff;
  --muted:rgba(255,255,255,.80);

  --max:1120px;
  --navH:64px;
}

/* RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Rye', serif;

  /* ✅ global background image */
  background: url("parchment.jpg") center top / cover no-repeat;
  /* Alternative ohne fixed (besser für iOS, siehe Hinweis unten) */
  /* background: url("DEIN-HINTERGRUND.jpg") center top / cover no-repeat; */

  color:var(--fg);
  padding-top: var(--navH);
  overflow-x:hidden;
}
p{
  font-family: Helvetica, Arial, sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ================= NAV (FIXED – never scrolls away) ================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9998;
  height:var(--navH);

  background:rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-wrap{
  max-width:var(--max);
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
}
.brand{display:none}

/* text-only centered menu */
.nav{
  display:flex;
  gap:26px;
  align-items:center;
  justify-content:center;
}
.nav a,
.lang-btn{
  background:none;
  border:0;
  padding:0;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  font-size:14px;
}
.nav a:hover,
.lang-btn:hover{opacity:.75}
.nav a:active,
.lang-btn:active{opacity:.55}

.nav-toggle{display:none}

/* Nav Wrapper muss Referenz sein */
.nav-wrap{
  position: relative;
}

/* Language Switcher rechts fixieren */
.nav-lang{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: 6px;

  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
}

.nav-lang:hover{
  opacity: .75;
}

.nav-lang .flag{
  font-size: 16px;
  line-height: 1;
}

/* ================= Headings ================= */
h2, h3, .headline, .banner-text {
  color: #3B2A1A;
  text-align: center;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:calc(100vh - var(--navH));
  overflow:hidden; /* safety: prevents any overlap */
}

.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15));
}

/* IMPORTANT: hero__center should NOT have min-height */
.hero__center{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;

  /* bottom positioning */
  justify-content:flex-end;

  /* THIS keeps it inside the hero without growing it */
  height:calc(100vh - var(--navH));

  /* distance from bottom */
  padding-bottom:clamp(50px, 10vh, 120px);

  text-align:center;
}

/* COUNTRY FONT */
.hero__title{
  font-family:'Rye', serif;
  font-size:clamp(46px,7vw,96px);
  letter-spacing:.08em;
  margin:0;
}
.hero__subtitle{
  font-weight:700;
  margin:14px 0 26px;
}

.hero__buttons{display:flex;gap:14px;margin-bottom:18px}
.btn{
  padding:12px 22px;
  border-radius:999px;
  border:1px solid #fff;
  background:transparent;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.btn:hover{opacity:.8}
.btn:active{opacity:.6}

/* Socials WHITE */
.social{display:flex;gap:12px;justify-content:center}
.social__btn{
  width:44px;height:44px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:grid;
  place-items:center;
}
.social__btn:hover{opacity:.85}

/* ================= SECTIONS ================= */
.section{
  padding:80px 0;
  /* alle Sections transparent -> Hintergrundbild scheint durch */
  background: transparent;
}

.section__head{
  text-align:center;
}

/* Titles */
.section__title{
  font-family:'Rye', serif;
  font-size:clamp(30px,4vw,52px);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.section__lead{opacity:.8}

/* VIDEO */

.section--video .section__head p {
  color: #000000;
  text-align: center;
}

.video{
  max-width:900px;
  margin:18px auto 0;
  background:transparent;
  border:0;
}
.video iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:0;
}

/* ABOUT – spacing only, no visual box */

.section--about .slide-body {
  color: #000000 !important;
  font-weight: 400;
}

.section--about-peach .container,
.section--about-black .container{
  padding-top: clamp(40px, 6vw, 70px);
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 20px; /* <- das zieht Booking hoch */
}


.slide-panel.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

/* ================= BANDSINTOWN TRANSPARENCY ================= */
.bandsintown-widget,
.bandsintown-widget * {
  color: #000000 !important;
  background-color: transparent !important;
}

/* ================= SLIDE PANELS (FULL-WIDTH SLIDE OVERLAY) ================= */
.slide-panel{
  position:fixed;
  z-index:9999;
  top:var(--navH);
  left:0;
  width:100vw;
  height:calc(100vh - var(--navH));

  border:0;
  border-radius:0;
  box-shadow:none;

  padding:60px 18px 60px;

  opacity:0;
  pointer-events:none;

  transition:transform .45s ease, opacity .20s ease;
}

.slide-panel--left{
  background:var(--peach);
  color:#111;
  transform:translateX(-110%);
}
.slide-panel--right{
  background:#000;
  color:#000;
  transform:translateX(110%);
}

.slide-panel.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

/* ===== LAYOUT INSIDE OVERLAY ===== */
.slide-inner{
  max-width:var(--max);
  height:100%;
  margin:0 auto;

  display:grid;
  gap:60px;
  align-items:center;
}

/* GELB: Text links, Foto rechts */
.slide-panel--left .slide-inner{
  grid-template-columns:1fr 520px;
}

/* SCHWARZ: Foto links, Text rechts */
.slide-panel--right .slide-inner{
  grid-template-columns:520px 1fr;
}

/* media */
.slide-media{
  display:flex;
  justify-content:center;
}
.slide-media img{
  width:min(420px, 90%);
  aspect-ratio:1/1;
  object-fit:cover;
  background:#fff;
  padding:18px 18px 44px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}

/* titles/text */
.slide-title{
  margin:0 0 18px;
  font-family:'Rye', serif;
  font-size:clamp(34px,4vw,64px);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.slide-body{
  margin:0;
  font-weight:400;
  line-height:1.7;
  font-size:18px;
  max-width:62ch;
}

/* ================= ARROWS (NO X) ================= */
/* base button */
.slide-close{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:72px;
  height:72px;

  border:0;
  background:transparent;
  cursor:pointer;

  /* hide any "✕" text inside button */
  color:transparent;
  font-size:0;
  line-height:0;

  display:grid;
  place-items:center;
  opacity:.95;
}
.slide-close:hover{opacity:.75}
.slide-close:active{opacity:.55}

/* GELB: arrow on the RIGHT, pointing RIGHT */
.slide-panel--left .slide-close{
  right:32px;
  left:auto;
}
.slide-panel--left .slide-close::before{
  content:"→";
  color:#111;
  font-size:44px;
  line-height:1;
}

/* SCHWARZ: arrow on the LEFT, pointing LEFT */
.slide-panel--right .slide-close{
  left:32px;
  right:auto;
}
.slide-panel--right .slide-close::before{
  content:"←";
  color:#000;
  font-size:44px;
  line-height:1;
}

/* ensure NO socials/actions show in overlay */
.slide-actions,
.slide-panel .social{
  display:none !important;
}

/* mobile */
@media(max-width:900px){
  .slide-inner{grid-template-columns:1fr !important; gap:30px; align-items:start;}
  .slide-panel{padding:32px 18px; overflow:auto;}
  .slide-close{
    top:auto;
    bottom:18px;
    transform:none;
  }
  .slide-panel--left .slide-close{right:18px;}
  .slide-panel--right .slide-close{left:18px;}
}


/* LEFT panel → arrow points right */
.slide-panel--left .slide-close::before{
  content:"→";
}

/* RIGHT panel → arrow points left */
.slide-panel--right .slide-close::before{
  content:"←";
}

.slide-inner{
  max-width:var(--max);
  height:100%;
  margin:0 auto;

  display:grid;
  grid-template-columns:520px 1fr;
  gap:60px;
  align-items:start;
}

.slide-media{
  display:flex;
  justify-content:center;
}
.slide-media img{
  width:min(420px, 90%);
  aspect-ratio:1/1;
  object-fit:cover;
  background:#fff;
  padding:18px 18px 44px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}

.slide-title{
  margin:0 0 18px;
  font-family:'Rye', serif;
  font-size:clamp(34px,4vw,64px);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.slide-body{
  margin:0;
  font: weight 400;
  line-height:1.7;
  font-size:18px;
  max-width:62ch;
}

/* ensure NO socials/actions show in overlay */
.slide-actions,
.slide-panel .social{
  display:none !important;
}
/* ================= BOOKING / CONTACT ================= */

.contact-simple{
  display:flex;
  justify-content:center;
  margin-top:32px;
}

/* BOOKING/CONTACT – Abstand nach oben reduzieren */
#contact{
  padding-top:20px;
}

#contact .section__head{ text-align:center; }

#contact .section__title{ color: var(--ink); }

/* Buttons im #contact-Bereich (Index + Sunny&Jack) wie Bandsintown */
#contact .btn,
#contact .btn--contact{
  display:inline-block;
  padding:14px 26px;

  background: var(--ink);
  border:1px solid var(--ink);
  border-radius:2px;

  color:#fff !important;               /* Text immer weiß */
  text-decoration:none !important;

  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;                  /* Desktop: eine Zeile */
}

/* Hover: invertiert wie Bandsintown */
#contact .btn:hover,
/* Hover wie Bandsintown: nur leicht abdunkeln */
.btn--contact:hover{
  opacity: 0.85;
}


/* Umbruch nur auf Mobile (dein <span class="mobile-break"> ) */
.mobile-break{ display:none; }

@media (max-width:600px){
  #contact .btn,
  #contact .btn--contact{
    white-space:normal;
    width:min(420px, 92vw);
  }
  .mobile-break{
    display:block;   /* erzwingt Zeilenumbruch */
    height:0;
  }
}

/* =============== CONTACT FORM (GRID LAYOUT) =============== */

#contact form#form{
  max-width: 860px;
  margin: 32px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #3B2A1A;
}

/* Überschrift */
#contact form#form h2{
  margin: 0 0 28px;
  text-align: center;
  font-family: 'Rye', serif;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: .08em;
  color: #3B2A1A;
}

/* Labels */
#contact form#form label{
  display:block;
  margin: 18px 0 8px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #3B2A1A;
}

#contact form#form em{
  color:#880000;
  font-style:normal;
  margin-left:6px;
}

/* Inputs + Selects */
#contact form#form input[type="text"],
#contact form#form input[type="email"],
#contact form#form input[type="tel"],
#contact form#form select{
  width:100%;
  height:44px;
  padding:10px 12px;

  background: rgba(255,255,255,.45);   /* leicht transparent */
  border:1px solid rgba(59,42,26,.45);
  border-radius:4px;

  font-family: Helvetica, Arial, sans-serif;
  font-size:15px;
  color:#3B2A1A;
  outline:none;
}

#contact form#form input::placeholder{
  color: rgba(59,42,26,.55);
}

#contact form#form input:focus,
#contact form#form select:focus{
  background: rgba(255,255,255,.60);
  border-color:#3B2A1A;
  box-shadow:0 0 0 2px rgba(59,42,26,.18);
}

/* ===== Grid Rows ===== */
#contact form#form .zoho-row{
  display:grid;
  width:100%;
  gap:16px;
  align-items:end;
  margin-bottom: 18px;
}

#contact form#form .zoho-row--2{
  grid-template-columns: 1fr 1fr; /* | field | field | */
}

/* | date | HH | MM | */
#contact form#form .zoho-row--datetime{
  grid-template-columns: 1.6fr 0.7fr 0.7fr;
}

/* Button */
#contact form#form button[type="submit"]{
  margin: 30px auto 0;
  display:block;
  padding:14px 32px;
  border-radius:2px;
  background:#3B2A1A;
  border:0;

  color:#fff !important; /* weiß */
  font-family: Helvetica, Arial, sans-serif;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;

  cursor:pointer;
}

#contact form#form button[type="submit"]:hover{opacity:.85}
#contact form#form button[type="submit"]:active{opacity:.7}

/* Zoho Mobile: alles untereinander */
@media (max-width:720px){

  /* Name + Playtime + Budget untereinander */
  #contact form#form .zoho-row--2{
    grid-template-columns: 1fr;
  }

  /* Datum | HH | MM → auf Mobile:
     Datum volle Breite
     HH + MM nebeneinander */
  #contact form#form .zoho-row--datetime{
    grid-template-columns: 1fr 1fr;
  }

  /* Datum-Feld über beide Spalten */
  #contact form#form .zoho-row--datetime input[name="DateTime_date"]{
    grid-column: 1 / -1;
  }
}

/* ===== CONTACT: iPhone horizontal overflow fix (mobile only) ===== */
@media (max-width: 600px){
  #contact{
    overflow-x: clip; /* besser als hidden auf iOS */
  }

  #contact form#form{
    max-width: 100%;
  }

  /* Inputs/Selects dürfen NIE über den Container hinaus */
  #contact form#form input,
  #contact form#form select,
  #contact form#form button{
    max-width: 100%;
  }
}

/* CONTACT: Gutter links/rechts wie Container (auch mobil) */
#contact form#form{
  width: min(860px, 100%);
  margin: 32px auto 0;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

/* auf kleinen Screens etwas weniger */
@media (max-width: 600px){
  #contact form#form{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ===== iOS SAFE FIX: Contact Content Gutter ===== */
@media (max-width: 600px){

  #contact.section{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Form wieder voll breit innerhalb der Section */
  #contact form#form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* ================= FOOTER ================= */

.footer{
  background:#000;
  border-top:1px solid rgba(255,255,255,.2);
  padding:24px 0;
  font-family: Helvetica, Arial, sans-serif;
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  opacity:.75;
}

/* Footer rechtsbündig + niemals umbrechen */
.footer__links{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}

.footer__links a{
  white-space:nowrap;
  flex-shrink:0;
}

/* Footer-Hover: NUR Unterstrich, keine Box, kein Shift */
.footer__links a:hover{
  background:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;

  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,0.45);
}

/* ================= TOP ARROW ================= */

.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  width:44px;height:44px;
  border-radius:50%;
  background:#000;
  border:1px solid #fff;
  color:#fff;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  z-index:9997;
}
.to-top.is-visible{opacity:1;pointer-events:auto}

/* ================= LINK HOVER (GLOBAL) ================= */

a{
  text-decoration:none;
  text-underline-offset:0.18em;
  text-decoration-thickness:2px;
}
a:hover{ text-decoration:underline; }

/* NAV: weißer Unterstrich */
.nav a:hover{ text-decoration-color:#ffffff; }

/* ✅ Wichtig: Das “Box/Highlight”-Hover gilt NUR für NAV (nicht Footer!) */
.nav a:hover{
  background: rgba(255,255,255,0.08);
  border-radius:6px;
  padding:2px 6px;
  margin:-2px -6px;
}

/* ================= LEGAL PAGES: LINKS (Impressum/Datenschutz) ================= */

/* Impressum (Section braucht id="impressum") */
#impressum{
  padding-left:18px;
  padding-right:18px;
  color:var(--ink);
}
#impressum h2,
#impressum h3,
#impressum p,
#impressum li{
  text-align:left !important;
  color:var(--ink) !important;
}
#impressum a{
  color:var(--ink) !important;
  text-decoration:underline;
}

/* Datenschutz (Section braucht id="datenschutz") */
#datenschutz{
  padding-left:18px;
  padding-right:18px;
  color:var(--ink);
}
#datenschutz h2,
#datenschutz h3,
#datenschutz p,
#datenschutz li{
  text-align:left !important;
  color:var(--ink) !important;
}
#datenschutz a{
  color:var(--ink) !important;
  text-decoration:underline;
}

/* ================= MOBILE NAV + FOOTER ================= */

@media (max-width:900px){

  /* Burger anzeigen */
  .nav-toggle{
    display:block;
    position:absolute;
    right:18px;
    background:none;
    border:0;
    cursor:pointer;

    padding:10px;
    border-radius:10px;
    background: rgba(0,0,0,.35); /* Badge für Sichtbarkeit */
  }

  .nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:#fff;
    margin:5px 0;
  }

  /* Header transparent über dem Bild */
  .site-header{
    background:transparent;
    backdrop-filter:none;
    border-bottom:0;
  }

  /* Menü-Panel */
  .nav{
    position:fixed;
    top:var(--navH);
    left:0;
    right:0;

    background:#000;            /* Menü darf schwarz sein */
    flex-direction:column;
    gap:20px;
    padding:24px 0;

    transform:translateY(-120%);
    transition:transform .35s ease;
  }

  .nav.nav--open{ transform:translateY(0); }

  .nav-lang{
    margin-left:0;
    padding-top:12px;
  }
}

@media (max-width:600px){
  .footer{
    padding:28px 0;
  }

  .footer__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }

  .footer__links{
    align-items:flex-end;
    text-align:right;
  }
}