/*
Theme Name: Brass up'n Dörp
Theme URI: https://brassupndoerp.de
Author: Brass up'n Dörp
Description: Festival-Theme mit den Original-Markenfarben aus dem Logo (Petrolgrün / Gold). Vollbild-Video-Hero, Save-the-Date-Startseite, eigene Unterseiten für Line-up, Tickets, Rückblick, Team und Info.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bupd
*/

:root{
  --green-deep:#134343;
  --green-mid:#1d5a5a;
  --green-darker:#0a2b2b;
  --bg-main:#0c3137;
  --gold:#c9a62b;
  --gold-light:#e0c669;
  --rust:#a83f2b;
  --paper:#f4ecd8;
  --paper-dim:#cfe3e0;
  --line:rgba(244,236,216,0.14);
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-main);
  color:var(--paper);
  font-family:'Work Sans', sans-serif;
  line-height:1.55;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:0.92;
  margin:0;
}
.mono{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:600;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
::selection{background:var(--gold); color:var(--green-deep);}
:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}

.bunting{width:100%; height:34px; overflow:hidden; line-height:0;}
.bunting svg{width:100%; height:100%; display:block;}

:root{
  --sidenav-width:220px;
  --bottombar-height:76px;
}

/* Linke Sidebar-Navigation (Desktop): fest stehend, gleichmäßig über die Höhe verteilt */
.site-sidenav{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidenav-width);
  background:rgba(10,43,43,0.97);
  border-right:1px solid var(--line);
  overflow-y:auto;
  z-index:55;
  display:flex;
  align-items:stretch;
}

.nav-icon{display:inline-flex; color:var(--gold); flex-shrink:0;}
.nav-icon svg{width:20px; height:20px; display:block;}

/* Desktop: vollständige Liste */
.nav-desktop{
  display:flex; flex-direction:column; justify-content:space-evenly;
  flex:1;
  list-style:none; margin:0; padding:36px 0;
}
.nav-desktop a{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:14px 28px;
  font-size:15px; font-weight:700;
  letter-spacing:0.01em;
  color:var(--paper-dim);
  border-left:3px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
}
.nav-desktop a:hover{color:var(--gold-light); background:rgba(201,166,43,0.06);}
.nav-desktop li.current-menu-item a{color:var(--gold-light); border-left-color:var(--gold);}
.nav-desktop li.current-menu-item .nav-icon{color:var(--gold-light);}

/* Mobile: standardmäßig ausgeblendet, greift erst in der Media Query unten */
.mobile-nav-wrap{display:none;}

/* Hauptinhalt + Footer: Platz für die Sidebar links freihalten */
.site-main, .partner-strip, .site-footer{margin-left:var(--sidenav-width);}


@media (max-width:860px){
  :root{ --sidenav-width:0px; }
  .site-main{padding-bottom:calc(var(--bottombar-height) + 12px);}
  .site-footer{padding-bottom:calc(var(--bottombar-height) + 20px);}

  .site-sidenav{
    position:fixed;
    top:auto !important; left:0; right:0; bottom:0;
    width:100%; height:var(--bottombar-height);
    border-right:none; border-top:1px solid var(--line);
    overflow:visible;
    display:block;
  }

  .nav-desktop{display:none;}
  .mobile-nav-wrap{display:block; position:relative; height:100%;}

  /* Untere Leiste: nur die 4 Haupt-Reiter + Mehr-Button */
  .nav-mobile{
    display:flex; flex-direction:row; width:100%; height:var(--bottombar-height);
    list-style:none; margin:0; padding:0;
  }
  .nav-mobile li{flex:1 1 0; display:flex;}
  .nav-mobile a, .nav-mobile .nav-more-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    padding:6px 4px;
    font-family:inherit; font-size:12px; font-weight:700;
    color:var(--paper-dim);
    background:none; border:none; border-top:3px solid transparent;
    cursor:pointer; white-space:nowrap;
  }
  .nav-mobile li.current-menu-item a{color:var(--gold-light); border-top-color:var(--gold);}
  .nav-mobile li.current-menu-item .nav-icon{color:var(--gold-light);}
  .nav-mobile .nav-icon svg{width:23px; height:23px;}

  /* "Mehr"-Panel: klappt über der Leiste auf */
  .nav-more-panel{
    display:none;
    position:fixed; left:0; right:0; bottom:var(--bottombar-height);
    background:rgba(10,43,43,0.98);
    border-top:1px solid var(--line);
    z-index:56;
  }
  .nav-more-panel.open{display:block;}
  .nav-more-list{list-style:none; margin:0; padding:8px 0;}
  .nav-more-list a{
    display:flex; align-items:center; gap:16px;
    padding:14px 24px;
    font-size:14.5px; font-weight:600;
    color:var(--paper-dim);
  }
  .nav-more-list li.current-menu-item a{color:var(--gold-light);}
  .nav-more-list li.current-menu-item .nav-icon{color:var(--gold-light);}
  .nav-more-list .nav-icon svg{width:19px; height:19px;}
}


.hero{
  position:relative; padding:100px 24px 72px; min-height:600px;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--green-deep);
}
.hero-video,.hero-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(19,67,67,0.55) 0%, rgba(19,67,67,0.78) 55%, var(--bg-main) 100%),
    radial-gradient(ellipse at 20% -10%, rgba(201,166,43,0.20), transparent 55%);
}
.hero-inner{position:relative; z-index:2; max-width:1120px; margin:0 auto; width:100%;}

.hero-social{
  position:absolute; top:24px; right:24px; z-index:3;
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:14px; align-items:center;
}
.hero-social a{color:var(--paper-dim); transition:color .2s ease, transform .2s ease; display:inline-flex; flex:0 0 auto;}
.hero-social a:hover{color:var(--gold); transform:translateY(-2px);}
.hero-social svg{width:22px; height:22px; display:block; flex-shrink:0;}
@media (max-width:640px){
  .hero-social{top:16px; right:16px; gap:12px;}
  .hero-social svg{width:19px; height:19px;}
}

.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--gold-light); font-size:13px; margin-bottom:22px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold);}
h1.display{font-size:clamp(48px,9vw,116px); color:var(--paper);}
h1.display em{font-style:normal; color:var(--gold); -webkit-text-stroke:1px var(--gold-light);}
.hero-sub{max-width:520px; font-size:clamp(16px,1.6vw,19px); color:var(--paper-dim); margin:26px 0 36px;}
.cta-row{display:flex; flex-wrap:wrap; gap:14px;}
.btn{display:inline-block; padding:14px 28px; font-weight:700; font-size:15px; border:2px solid transparent; border-radius:var(--radius); transition:.2s;}
.btn-primary{background:var(--gold); color:var(--green-deep);}
.btn-primary:hover{transform:translateY(-2px); background:var(--gold-light);}
.btn-ghost{border-color:var(--paper-dim); color:var(--paper);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px);}

.savedate{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  border:2px solid var(--gold); padding:18px 26px; margin-top:28px;
  background:rgba(19,67,67,0.4);
}
.savedate .mono{color:var(--gold-light); font-size:11px; margin-bottom:6px;}
.savedate .date{font-family:'Anton'; font-size:clamp(26px,3.4vw,38px); color:var(--paper);}
.savedate-big{padding:26px 36px; border-width:3px;}
.savedate-big .date{font-size:clamp(40px,7vw,84px);}
.savedate-msg{margin-top:14px; font-size:clamp(15px,1.5vw,18px); color:var(--paper-dim); max-width:44ch;}

.infostrip{background:var(--gold); color:var(--green-deep);}
.infostrip .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.infostrip-slim{grid-template-columns:repeat(3,1fr) !important;}
.infostrip .cell{padding:22px 20px; border-left:1px dashed rgba(19,67,67,0.35);}
.infostrip .cell:first-child{border-left:none;}
.infostrip .label{font-size:11px; margin-bottom:6px;}
.infostrip .value{font-family:'Anton'; font-size:clamp(18px,2vw,24px);}
@media (max-width:760px){ .infostrip .wrap, .infostrip-slim{grid-template-columns:1fr !important;} }

.anreise-map{width:100%; aspect-ratio:16/9; border:1px solid var(--line); overflow:hidden;}
.anreise-map iframe{width:100%; height:100%; border:0; filter:grayscale(0.15) contrast(1.05);}

section{padding:88px 0;}
.section-alt{background:var(--green-mid);}
.section-head{margin-bottom:48px;}
.section-head p{max-width:900px;}
.section-head .mono{color:var(--gold); font-size:12px; margin-bottom:14px; display:block;}
.section-head h2{font-size:clamp(30px,4.5vw,50px);}
.section-head p{color:var(--paper-dim); margin-top:16px; font-size:16px; max-width:56ch;}

/* Scroll-Reveal: Elemente blenden sanft ein, sobald sie ins Blickfeld scrollen.
   Ohne JavaScript bleibt alles normal sichtbar (progressive enhancement). */
.reveal{transition:opacity .7s ease, transform .7s ease;}
.reveal.pre-reveal{opacity:0; transform:translateY(28px);}
.reveal.pre-reveal.is-visible{opacity:1; transform:translateY(0);}

.teaser-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.teaser-card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--bg-main); padding:32px 24px;
  text-decoration:none; color:inherit;
  transition:background .25s, transform .25s ease, box-shadow .25s ease;
  position:relative; z-index:1;
}
.teaser-card:hover{background:var(--green-mid); transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.28); z-index:2;}
.teaser-card:hover .link{color:var(--gold-light);}
.teaser-card .mono{color:var(--gold); font-size:11px; margin-bottom:14px;}
.teaser-card h3{font-size:22px; margin-bottom:10px;}
.teaser-card p{color:var(--paper-dim); font-size:14px; margin:0 0 16px;}
.teaser-card .link{color:var(--gold-light); font-size:13px; font-weight:700; margin-top:auto; padding-top:4px; transition:transform .25s ease;}
.teaser-card:hover .link{transform:translateX(4px);}
@media (max-width:900px){ .teaser-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .teaser-grid{grid-template-columns:1fr;} }

.lineup-grid{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.act{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--bg-main); padding:20px 26px;
  text-decoration:none; color:inherit;
  transition:background .25s, transform .25s ease, box-shadow .25s ease;
  position:relative; z-index:1;
}
.act:hover{background:var(--green-mid); transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,0.28); z-index:2;}
.act-info{min-width:0;}
.act .mono{color:var(--gold); font-size:11px; margin-bottom:8px;}
.act h3{font-size:22px; margin:0;}
.act-info p{color:var(--paper-dim); font-size:14px; margin:8px 0 0;}
.act-photo{
  width:88px; height:88px; flex-shrink:0;
  background:var(--green-mid); border:1px solid var(--line); overflow:hidden;
}
.act-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.act-placeholder{cursor:default;}
.act-placeholder:hover{background:var(--bg-main); transform:none; box-shadow:none;}
@media (max-width:560px){
  .act{padding:16px 18px; gap:14px;}
  .act h3{font-size:18px;}
  .act-photo{width:64px; height:64px;}
}

.act-detail-photo{aspect-ratio:4/3; background:var(--green-mid); border:1px solid var(--line); overflow:hidden;}
.act-detail-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* Team-Mitglieder: Einzelfoto (hochkant 4:5) + Name/Zuständigkeit im goldenen Rahmen */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:56px;}
.team-member{
  border:2px solid var(--gold);
  background:rgba(19,67,67,0.4);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-member:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.28);}
.team-member .photo{aspect-ratio:4/5; background:var(--green-mid); overflow:hidden;}
.team-member .photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.team-member:hover .photo img{transform:scale(1.06);}
.team-member .info{padding:16px 18px;}
.team-member h3{font-size:16px; text-transform:none; font-family:'Work Sans'; font-weight:700; margin:0;}
.team-member .role{color:var(--gold-light); font-size:11.5px; margin-top:4px;}
@media (max-width:860px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .team-grid{grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto;} }

.team-photo{margin-top:8px;}
.team-photo img{width:100%; height:auto; display:block; border:1px solid var(--line);}
.team-photo-placeholder{
  aspect-ratio:16/9; background:var(--green-mid); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.team-photo-placeholder .mono{color:var(--paper-dim); font-size:12px;}

.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.gallery-grid .g-item{
  aspect-ratio:4/3; background:var(--green-mid); border:1px solid var(--line); overflow:hidden;
  transition:box-shadow .25s ease; padding:0; cursor:pointer; display:block; width:100%;
}
.gallery-grid .g-item:hover{box-shadow:0 14px 28px rgba(0,0,0,0.28);}
.gallery-grid .g-item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease; display:block;}
.gallery-grid .g-item:hover img{transform:scale(1.08);}
@media (max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }

/* Lightbox */
.bupd-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,20,20,0.96);
  display:none;
  align-items:center; justify-content:center;
}
.bupd-lightbox.open{display:flex;}
.bupd-lightbox-img{
  max-width:88vw; max-height:82vh; object-fit:contain;
  border:1px solid var(--line);
  user-select:none;
}
.bupd-lightbox-caption{
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:var(--paper-dim); font-size:13px; padding:0 60px;
}
.bupd-lightbox-close{
  position:absolute; top:18px; right:20px;
  background:none; border:none; color:var(--paper); font-size:34px; line-height:1;
  cursor:pointer; padding:6px 12px; transition:color .2s ease;
}
.bupd-lightbox-close:hover{color:var(--gold);}
.bupd-lightbox-prev, .bupd-lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--paper); font-size:32px;
  cursor:pointer; padding:10px 16px; transition:color .2s ease;
}
.bupd-lightbox-prev{left:6px;}
.bupd-lightbox-next{right:6px;}
.bupd-lightbox-prev:hover, .bupd-lightbox-next:hover{color:var(--gold);}
@media (max-width:640px){
  .bupd-lightbox-close{font-size:28px; top:10px; right:10px;}
  .bupd-lightbox-prev, .bupd-lightbox-next{font-size:24px; padding:8px 10px;}
  .bupd-lightbox-caption{font-size:12px; padding:0 44px;}
}

.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.info-card{border:1px solid var(--line); padding:28px; transition:border-color .25s ease, transform .25s ease;}
.info-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.info-card h3{font-size:19px; color:var(--gold-light); margin-bottom:10px; text-transform:none; font-family:'Work Sans'; font-weight:700;}
.info-card p{color:var(--paper-dim); font-size:15px; margin:0;}
@media (max-width:760px){ .info-grid{grid-template-columns:1fr;} }

.partner-strip{padding:56px 0 32px; border-top:1px solid var(--line);}
.partner-strip .mono{color:var(--gold); font-size:11px; margin-bottom:20px; display:block; text-align:center;}
.partner-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.partner-slot{
  flex:0 1 150px; height:88px;
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper-dim); font-size:12px; text-align:center; padding:10px;
}
.partner-slot img{
  max-height:60px; width:auto; margin:auto;
  filter:grayscale(1) sepia(1) hue-rotate(100deg) saturate(2.4) brightness(0.85);
  transition:filter .3s ease;
}
.partner-slot:hover img{filter:none;}

.partner-slot-cta{
  text-decoration:none; flex-direction:column; gap:4px;
  border-style:solid; border-color:var(--gold);
  color:var(--gold-light); font-size:11.5px; line-height:1.4;
  transition:background .2s ease, transform .2s ease;
}
.partner-slot-cta .mono{margin:0 0 4px; color:var(--gold);}
.partner-slot-cta:hover{background:rgba(201,166,43,0.08); transform:translateY(-2px);}

.site-footer{background:var(--green-darker); padding:0 0 32px; color:var(--paper-dim); font-size:14px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:32px 0 28px;}
.footer-social{display:flex; flex-direction:row; flex-wrap:nowrap; gap:16px; align-items:center;}
.footer-social a{color:var(--paper-dim); transition:color .2s ease, transform .2s ease; display:inline-flex; flex:0 0 auto;}
.footer-social a:hover{color:var(--gold); transform:translateY(-2px);}
.footer-social svg{width:20px; height:20px; display:block; flex-shrink:0;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; list-style:none; margin:0; padding:0;}
.footer-links a:hover{color:var(--gold-light);}
.footer-bottom{border-top:1px solid var(--line); padding-top:20px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.entry-content{color:var(--paper-dim);}
.entry-content h2,.entry-content h3{color:var(--paper); margin-top:32px; margin-bottom:12px;}
.entry-content p{margin-bottom:16px;}
.page-hero{padding:64px 24px 40px; border-bottom:1px solid var(--line);}
.page-hero .mono{color:var(--gold); font-size:12px; margin-bottom:12px; display:block;}
.page-hero h1{font-size:clamp(32px,6vw,64px);}