/*
Theme Name: Sunstain
Theme URI: https://sunstain.at
Author: Sunstain
Author URI: https://sunstain.at
Description: Individuelles Block-Theme fuer die Band Sunstain - Stoner Rock / Grunge Design. Enthaelt Hero mit Social-CTAs, About, New Music, Konzerttermine, News, Merch, Gallery mit Lightbox, Discography und ein Sticky-Ersatzmenue.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunstain
*/

/* ==============================================================
   SUNSTAIN – Facelift
   Fonts: Trade Winds (Headlines + Nav, grungy/distorted) + Barlow (Fließtext)
   Selbst gehostet unter assets/fonts/ – kein externer Google-Fonts-Request
   ============================================================== */
@font-face{
  font-family:'Barlow';
  src:url('assets/fonts/Barlow-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  src:url('assets/fonts/Barlow-Medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  src:url('assets/fonts/Barlow-SemiBold.woff') format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow';
  src:url('assets/fonts/Barlow-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Trade Winds';
  src:url('assets/fonts/TradeWinds-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ==============================================================
   Global colours, fonts & layout
   ============================================================== */
:root{
  /* Colours */
  --bg:          #000000;       /* page background */
  --fg:          #ece6d8;       /* default text colour */
  --accent:      #C15F3C;       /* orange accent (headlines) */
  --accent-dim:  #a73a11;       /* darker orange for hover */
  --rule:        #3a352a;       /* separator colour */

  /* Derived tones for depth without leaving the given palette */
  --panel:       #0c0b09;       /* slightly raised panel bg */
  --panel-2:     #141210;       /* deeper card bg (news / discography) */
  --wash:        rgba(193,95,60,0.08);   /* subtle accent tint for highlighted sections */
  --wash-strong: rgba(193,95,60,0.14);
  --overlay:     rgba(0,0,0,0.55);       /* image overlays */
  --overlay-strong: rgba(0,0,0,0.72);

  /* Fonts */
  --font-display: 'Trade Winds', 'Chiller', fantasy;   /* grungy / distorted poster feel */
  --font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif; /* body copy, nav, UI */

  /* Rhythm */
  --section-pad: clamp(3rem, 6vw, 6rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
}

/* ==============================================================
   Reset & helpers
   ============================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ color:var(--fg); }
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
img{ max-width:100%; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--accent);
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 1rem;
}
h1{ font-size:clamp(2.4rem,6vw,4.5rem); }
h2{ font-size:clamp(1.7rem,3.5vw,2.5rem); margin-bottom:1.5rem; }
h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); }
h4{ font-size:1.05rem; letter-spacing:.04em; }

p{ margin:0 0 1rem; max-width:70ch; }
.container p{ max-width:70ch; }

/* ==============================================================
   Full‑width container / section rhythm
   ============================================================== */
.container{
  width:100%;
  padding:var(--section-pad) 1.75rem;
  position:relative;
}
.container + .container{
  border-top:1px solid var(--rule);
}

/* Sections that get a colour lift ("farbig hervorgehoben") */
.panel-tint{
  background:
    linear-gradient(180deg, var(--wash) 0%, transparent 60%),
    var(--panel);
}

/* About schließt direkt an den Hero an und geht über die volle Breite */
#about.container{
  padding:0;
  border-top:none;
}

/* ==============================================================
   1. Header & logo
   (Markup liegt im WP-Theme-Header-Template, hier nur die Styles)
   ============================================================== */
header{
  padding:1.25rem 0;
  background:var(--bg);
  text-align:center;
  position:relative;
  border-bottom:none;
}
header .logo{
  display:block;
  margin:0 auto;
  padding-top:1.25rem;
  padding-bottom:.75rem;
}
header .logo img{
  display:block;
  max-width:320px;
  width:100%;
  height:auto;
  margin:0 auto;
}

/* ==============================================================
   2. Navigation
   ============================================================== */
.nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2rem;
  padding:1rem 0;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--rule);
}
.nav a{
  color:var(--fg);
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.1rem;
  letter-spacing:.02em;
  padding:.25rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* Burger-Icon (Header + Sticky-Footer teilen sich dieses Aussehen) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:2.4rem;
  height:2.4rem;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:4px;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:1.2rem;
  height:2px;
  background:var(--fg);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle:hover span{ background:var(--accent); }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

body.nav-open{ overflow:hidden; }

@media (max-width:780px){
  header{
    display:block;
    text-align:center;
    padding:1rem 1.25rem;
  }
  header .logo{ padding:0; margin:0; }
  header .logo img{ max-width:200px; margin:0 auto; }

  /* Burger-Button ist auf Mobile fix links oben positioniert und bleibt
     beim Scrollen als Overlay bestehen. Er dient gleichzeitig als Schließen-
     Button (X), wenn das Menü offen ist – deshalb höherer z-index als .nav. */
  .nav-toggle{
    display:flex;
    position:fixed;
    top:1rem;
    left:1rem;
    z-index:2100;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }

  .nav{
    position:fixed;
    inset:0;
    z-index:2000;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.25rem;
    padding:2rem;
    background:var(--bg);
    border-bottom:none;
    overflow-y:auto;
    transform:translateX(100%);
    opacity:0;
    visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s ease;
  }
  .nav.is-open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
  }
  .nav a{ font-size:1.6rem; }
}

/* ==============================================================
   3. Hero – full‑width image, poster‑style text overlay
   ============================================================== */
.hero{ position:relative; overflow:hidden; }
.hero img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(15%) contrast(1.05);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
.hero-text{
  position:absolute;
  bottom:2rem;
  left:1.75rem;
  right:1.75rem;
  color:var(--fg);
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,2rem);
  max-width:80%;
  border-left:4px solid var(--accent);
  padding-left:1rem;
  z-index:1;
}

/* Schwebendes Social-CTA-Overlay – bewusst kein "Standard-Button", sondern
   ein schmaler Streifen mit Icon-Kreisen, die beim Hover ihr Label ausklappen */
.hero-social{
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.9rem;
  padding:1.1rem .85rem;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-left:2px solid var(--accent);
  border-radius:6px 0 0 6px;
}
.hero-social a{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--fg);
}
.hero-social-label{
  display:inline-block;
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:max-width .25s ease, opacity .2s ease;
}
.hero-social a:hover .hero-social-label{
  max-width:180px;
  opacity:1;
}
.hero-social-icon{
  flex:0 0 auto;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  border:1px solid var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:rgba(0,0,0,.25);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.hero-social-icon svg{ width:1.15rem; height:1.15rem; }
.hero-social a:hover .hero-social-icon{
  background:var(--accent);
  color:#000;
  transform:scale(1.06);
}

@media (max-width:640px){
  .hero-social{
    top:1rem;
    right:1rem;
    bottom:auto;
    transform:none;
    flex-direction:row;
    border-left:none;
    border-radius:6px;
    padding:.5rem .6rem;
    gap:.6rem;
  }
  .hero-social-icon{ width:2.1rem; height:2.1rem; }
  .hero-social-label{ display:none; }
}

/* ==============================================================
   4. About – image overlay
   ============================================================== */
.about-hero{
  position:relative;
  overflow:hidden;
  height:500px;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;   /* Parallax */
}
.about-heading{
  position:absolute;
  top:1.5rem;
  left:1.75rem;
  margin:0;
  z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.about-hero .text-wrapper{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  text-align:center;
  background:var(--overlay-strong);
  overflow-y:auto;
}
.about-hero .text-wrapper p{
  max-width:60ch;
  margin:0 auto;
  font-size:1.1rem;
}
.about-hero .text-wrapper strong{ color:var(--accent); }

/* Parallax (background-attachment:fixed) ist auf iOS Safari unzuverlässig –
   dort wird auf normales Scroll-Verhalten zurückgefallen */
@supports (-webkit-touch-callout:none){
  .about-hero, .merch-hero{ background-attachment:scroll; }
}
@media (max-width:768px){
  .about-hero{
    background-attachment:scroll;
    height:auto;
    min-height:480px;
  }
  .merch-hero{
    background-attachment:scroll;
    height:280px;
  }
  .about-heading{
    font-size:1.3rem;
    top:1.25rem;
    left:1.25rem;
    right:1.25rem;
  }
  .about-hero .text-wrapper{
    align-items:flex-start;
    padding:5.5rem 1.25rem 2rem;
  }
}

/* ==============================================================
   5. Shows / Gig history
   ============================================================== */
.shows-inner{
  max-width:1000px;
  margin:0 auto;
}

.gig-history{ margin-top:1.5rem; }

.shows-inner h3{ margin-top:3rem; }

.gig-header{
  margin-bottom:1.5rem;
  color:rgba(236,230,216,.65);
  font-size:.9rem;
}
.gig-header .tally{ color:var(--accent); font-weight:600; }

/* Upcoming block – the highlighted / colour‑lifted section */
.upcoming-block{
  background:linear-gradient(180deg, var(--wash-strong) 0%, var(--panel) 100%);
  border:1px solid var(--accent-dim);
  border-radius:4px;
  padding:1.75rem clamp(1.25rem,3vw,2.5rem);
}
.upcoming-block .year-label{
  color:var(--accent);
  font-family:var(--font-display);
  letter-spacing:.06em;
  font-size:1rem;
  margin-bottom:1rem;
}

.year-block{ margin-bottom:2.5rem; }
.year-block:last-child{ margin-bottom:0; }
.year-label{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:1.3rem;
  letter-spacing:.03em;
  margin-bottom:.75rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--rule);
}

.show-list{ list-style:none; margin:0; padding:0; }
.show{
  display:grid;
  grid-template-columns:2rem 6.5rem 1fr 8.5rem;
  column-gap:1rem;
  row-gap:.35rem;
  align-items:center;
  padding:.9rem 0;
  border-bottom:1px solid var(--rule);
}
.show:last-child{ border-bottom:none; }
.show-marker{
  grid-column:1; grid-row:1;
  justify-self:center;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent);
}
.show-num{
  grid-column:1; grid-row:1;
  font-family:var(--font-display);
  color:rgba(193,95,60,.55);
  font-size:.85rem;
}
.show-date{
  grid-column:2; grid-row:1;
  color:var(--accent);
  font-weight:600;
  font-size:.9rem;
}
.show-main{
  grid-column:3; grid-row:1;
  font-weight:600;
  color:var(--fg);
}
.show-main .country{
  color:rgba(236,230,216,.55);
  font-weight:400;
  font-size:.8rem;
  margin-left:.4rem;
}
.show-main .first-badge{
  display:inline-block;
  margin-left:.6rem;
  padding:.1rem .5rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#000;
  background:var(--accent);
  border-radius:2px;
  vertical-align:middle;
}
/* "with Bandname" richtet sich exakt am show-main aus, statt unter dem Datum zu stehen */
.lineup{
  grid-column:3; grid-row:2;
  width:auto;
  font-size:.88rem;
  color:rgba(236,230,216,.7);
}
.lineup-label{
  color:var(--accent);
  font-style:normal;
  margin-right:.3rem;
}
.actions{
  grid-column:4; grid-row:1;
  justify-self:stretch;
}
/* Ticket-Button & Info-Badge sind immer exakt gleich breit (füllen die Actions-Spalte) und aligned */
.ticket-btn{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  padding:.5rem .5rem;
  border:1px solid var(--accent);
  border-radius:3px;
  color:var(--accent);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.03em;
  transition:background .2s ease, color .2s ease;
}
.ticket-btn:hover{
  background:var(--accent);
  color:#000;
}
.info-badge{
  font-size:.85rem;
  color:rgba(236,230,216,.55);
}
.info-badge.outline-badge{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  padding:.5rem .5rem;
  border:1px solid rgba(236,230,216,.35);
  border-radius:3px;
  font-weight:600;
  font-style:normal;
  letter-spacing:.03em;
}

/* Upcoming Dates: kein Aufzählungspunkt vor dem Datum -> eine Spalte weniger */
.upcoming-block .show{
  grid-template-columns:6.5rem 1fr 8.5rem;
}
.upcoming-block .show-date{ grid-column:1; }
.upcoming-block .show-main{ grid-column:2; }
.upcoming-block .lineup{ grid-column:2; }
.upcoming-block .actions{ grid-column:3; }

@media (max-width:640px){
  .show,
  .upcoming-block .show{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
    padding:1rem 0;
  }
  .show-marker{ display:none; }
  .lineup,
  .upcoming-block .lineup{ width:100%; }
  .actions,
  .upcoming-block .actions{
    align-self:flex-start;
    width:auto;
    min-width:9rem;
    max-width:10rem;
    margin-top:.35rem;
  }
}

details{ margin-top:2rem; }
details summary{
  cursor:pointer;
  font-family:var(--font-display);
  color:var(--fg);
  letter-spacing:.04em;
  padding:.9rem 1.25rem;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:3px;
  transition:border-color .2s ease, color .2s ease;
}
details summary:hover{ color:var(--accent); border-color:var(--accent-dim); }
details[open] summary{ color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0; }
details > div.gig-history{
  border:1px solid var(--rule);
  border-top:none;
  padding:1.75rem clamp(1rem,3vw,2rem);
  border-radius:0 0 3px 3px;
}

/* ==============================================================
   6. News – WordPress Query-Block Cards
   Letzte 6 Beiträge, 3 Spalten / 2 Reihen, nur Bild + Titel + Teaser,
   ganze Card klickbar, "READ MORE" erscheint beim Hover.
   ============================================================== */
.news-inner{
  max-width:1000px;
  margin:0 auto;
}
#news .wp-block-post-template,
#news .news-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:1rem;
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
}
#news .wp-block-post{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--rule);
  border-radius:5px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
#news .wp-block-post:hover{
  transform:translateY(-3px);
  border-color:var(--accent-dim);
}
#news .wp-block-post-featured-image{ margin:0; }
#news .wp-block-post-featured-image img{
  width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
  display:block;
}
#news .wp-block-post-title{
  font-family:var(--font-display);
  font-size:.95rem !important;
  text-transform:none;
  letter-spacing:0;
  line-height:1.3;
  padding:.75rem .85rem 0;
  margin:0;
}
#news .wp-block-post-title a{
  color:var(--fg);
}
/* Ganze Card klickbar über den Titel-Link */
#news .wp-block-post-title a::after{
  content:"";
  position:absolute;
  inset:0;
}
#news .wp-block-post-excerpt{
  padding:.4rem .85rem 1.1rem;
  font-size:.78rem;
  line-height:1.45;
  color:rgba(236,230,216,.7);
}
#news .wp-block-post-excerpt p{ margin:0; max-width:none; }
/* Datum / Autor ausblenden, falls das Theme sie trotzdem mit ausgibt */
#news .wp-block-post-date,
#news .wp-block-post-author{ display:none !important; }

/* Dunkles Overlay + "READ MORE"-Button beim Hover */
#news .wp-block-post::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition:background .25s ease;
  pointer-events:none;
  z-index:1;
}
#news .wp-block-post:hover::before{ background:var(--overlay-strong); }
#news .wp-block-post::after{
  content:"READ MORE";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:var(--accent);
  color:#000;
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.06em;
  padding:.65rem 1.4rem;
  border-radius:3px;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:2;
  white-space:nowrap;
}
#news .wp-block-post:hover::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

@media (prefers-reduced-motion: reduce){
  #news .wp-block-post,
  #news .wp-block-post::before,
  #news .wp-block-post::after{ transition:none; }
}

/* ==============================================================
   7. Music / Streaming
   ============================================================== */
.music-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  align-items:stretch;
  gap:var(--gap);
  margin-top:1.25rem;
}
.video-wrapper{
  border-radius:4px;
  overflow:hidden;
}
.video-wrapper iframe{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  display:block;
  border:0;
}

.stream-buttons{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  justify-content:center;
}
.stream-btn{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.75rem 1.15rem;
  border:1px solid var(--accent);
  border-radius:4px;
  color:var(--fg);
  font-weight:600;
  font-size:.95rem;
  transition:background .2s ease, color .2s ease;
}
.stream-btn svg{
  flex:0 0 20px;
  color:var(--accent);
  transition:color .2s ease;
}
.stream-btn:hover{ background:var(--accent); color:#000; }
.stream-btn:hover svg{ color:#000; }

@media (max-width:800px){
  .music-layout{ grid-template-columns:1fr; }
}

/* ==============================================================
   8. Merch – Teaser‑Bild, dunkles Overlay, "BUY NOW"
   ============================================================== */
.merch-hero{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  display:block;
  margin-top:1rem;
  height:500px;
  max-height:500px;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;   /* Parallax, wie About-Section */
}
.merch-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.merch-hero .buy-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--accent);
  color:#000;
  padding:.8rem 2rem;
  border-radius:4px;
  font-family:var(--font-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:background .2s ease, transform .2s ease;
}
.merch-hero:hover .buy-btn{
  background:var(--accent-dim);
  transform:translate(-50%,-50%) scale(1.04);
}

/* ==============================================================
   9. Gallery – Masonry (CSS Columns)
   ============================================================== */
.gallery{
  margin-top:1.5rem;
  column-count:3;
  column-gap:var(--gap);
}
.gallery img{
  width:100%;
  display:block;
  margin-bottom:var(--gap);
  border-radius:4px;
  break-inside:avoid;
  filter:grayscale(10%);
  transition:filter .2s ease;
}
.gallery img:hover{ filter:grayscale(0%); }

@media (max-width:900px){ .gallery{ column-count:2; } }
@media (max-width:560px){ .gallery{ column-count:1; } }

.gallery img{ cursor:zoom-in; }

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1000;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:90vw;
  max-height:85vh;
  border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  padding:.5rem .8rem;
  border-radius:4px;
  transition:background .2s ease, color .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background:var(--accent); color:#000; }
.lightbox-close{ top:1.5rem; right:1.5rem; }
.lightbox-prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.5rem; top:50%; transform:translateY(-50%); }

@media (max-width:600px){
  .lightbox-prev, .lightbox-next{ padding:.4rem .6rem; font-size:1.1rem; }
  .lightbox-close{ top:1rem; right:1rem; }
}

/* ==============================================================
   10. Discography
   ============================================================== */
.discography-inner{
  max-width:1000px;
  margin:0 auto;
}
.discography{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.5rem;
}
.discography .album{
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:.65rem;
  transition:border-color .2s ease;
}
.discography .album:hover{ border-color:var(--accent-dim); }
.discography .album img{
  width:100%;
  border-radius:3px;
  margin-bottom:.6rem;
}
.discography .album h4{ color:var(--accent); font-size:.85rem; margin-bottom:.2rem; letter-spacing:.01em; }
.discography .album p{ font-size:.7rem; color:rgba(236,230,216,.65); margin-bottom:.15rem; }

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

/* ==============================================================
   11. Music‑Videos
   ============================================================== */
.videos-inner{
  max-width:1000px;
  margin:0 auto;
}
.video-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:1.5rem;
}
.video-list iframe{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  border-radius:4px;
  border:0;
  display:block;
}
.video-hidden{ display:none !important; }

.show-all-wrapper{
  text-align:center;
  margin-top:2rem;
}
.show-all-btn{
  display:inline-block;
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.04em;
  padding:.7rem 1.75rem;
  border-radius:4px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.show-all-btn:hover{ background:var(--accent); color:#000; }

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

/* ==============================================================
   Footer & social icons
   ============================================================== */
.site-footer{
  background:#0a0a0a;
  color:var(--fg);
  padding:3.5rem 1.5rem;
  border-top:1px solid var(--rule);
}
.footer-inner{
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.footer-copyright{
  margin:0 0 1.75rem;
  font-size:.9rem;
  letter-spacing:.02em;
  color:rgba(236,230,216,.6);
}
.footer-social{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  padding:0;
  margin:0;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  border:1px solid var(--rule);
  color:var(--fg);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-3px);
}
.footer-social svg{
  width:1.2rem;
  height:1.2rem;
  fill:currentColor;
}

/* ==============================================================
   Sticky Ersatz-Menü (erscheint, sobald der Header aus dem Viewport ist)
   ============================================================== */
.sticky-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:998;
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--accent-dim);
  padding:.6rem 1.25rem;
  transform:translateY(100%);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  pointer-events:none;
}
.sticky-nav.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.sticky-nav-links{
  flex:1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
}
.sticky-nav a{
  color:var(--fg);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:.02em;
  transition:color .2s ease;
}
.sticky-nav-links a:hover{ color:var(--accent); }
.sticky-nav-top{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  border:1px solid var(--accent);
  color:var(--accent);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.sticky-nav-top svg{ width:1rem; height:1rem; }
.sticky-nav-top:hover{
  background:var(--accent);
  color:#000;
  transform:translateY(-2px);
}

@media (max-width:780px){
  .sticky-nav-links{ display:none; }
  .sticky-nav{ justify-content:center; }
}

/* ==============================================================
   Responsive tweaks
   ============================================================== */
@media (max-width:700px){
  #news .wp-block-post-template,
  #news .news-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .hero-text{ font-size:1.2rem; }
  .container{ padding:2.5rem 1.25rem; }
}

/* ==============================================================
   Single-Post-Template (News-Beiträge)
   ============================================================== */

/* Hero mit Beitragsbild als Parallax-Hintergrund, gleiche Höhe wie
   die About-Section auf der Startseite. Das <img> aus dem
   post-featured-image-Block bleibt für Barrierefreiheit im DOM,
   wird aber unsichtbar geschaltet – assets/main.js liest daraus die
   Bild-URL aus und setzt sie als CSS-Hintergrund (nötig, weil das
   Beitragsbild dynamisch ist und Templates kein PHP ausführen). */
.single-hero{
  position:relative;
  height:500px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  border-bottom:1px solid var(--rule);
}
.single-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  pointer-events:none;
  z-index:1;
}
.single-hero .wp-block-post-featured-image{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
}
.single-hero .wp-block-post-featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.single-hero h1.wp-block-post-title{
  position:relative;
  z-index:2;
  margin:0;
  max-width:70%;
  text-align:center;
  font-size:clamp(1.4rem,3vw,2.2rem);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

@supports (-webkit-touch-callout:none){
  .single-hero{ background-attachment:scroll; }
}
@media (max-width:768px){
  .single-hero{ background-attachment:scroll; height:340px; }
  .single-hero h1.wp-block-post-title{ max-width:88%; }
}

/* Beitragstext beginnt direkt unter dem Hero */
.single-content{
  max-width:760px;
  margin:0 auto;
  padding:2rem 1.75rem var(--section-pad);
}
.single-content img{
  width:100%;
  height:auto;
  border-radius:6px;
  margin-bottom:2rem;
  display:block;
}
.single-content .wp-block-post-content p{
  max-width:70ch;
  color:var(--fg);
}
.single-content .wp-block-post-content a{
  text-decoration:underline;
}

/* ==============================================================
   Generische Unterseiten (Impress, Data Privacy & Cookies, Contact)
   ============================================================== */
.page-wrap{
  max-width:760px;
  margin:0 auto;
  padding:var(--section-pad) 1.75rem;
}
.page-wrap h1{ margin-bottom:1.5rem; }
.page-wrap h2{ font-size:1.4rem; margin-top:2.5rem; }
.page-wrap h3{ margin-top:1.75rem; }
.page-wrap p,
.page-wrap li{
  max-width:70ch;
  color:var(--fg);
}
.page-wrap ul{ padding-left:1.25rem; }
.page-wrap a{ text-decoration:underline; }
.page-wrap .lead{
  font-size:1.1rem;
  color:var(--fg);
  margin-bottom:2rem;
  text-transform:none;
}

/* Kontaktformular */
.contact-form{
  --cf-accent:      var(--accent, #C15F3C);
  --cf-fg:          var(--fg, #ece6d8);
  --cf-rule:        var(--rule, #3a352a);
  --cf-font-body:   var(--font-body, 'Barlow', 'Helvetica Neue', Arial, sans-serif);

  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:600px;
  margin-top:2rem;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.form-row label{
  font-size:.85rem;
  letter-spacing:.03em;
  color:color-mix(in srgb, var(--cf-fg) 75%, transparent);
}
.form-row input,
.form-row textarea{
  background:#0c0b09;
  border:1px solid var(--cf-rule);
  border-radius:4px;
  padding:.65rem .85rem;
  color:var(--cf-fg);
  font-family:var(--cf-font-body);
  font-size:.95rem;
  resize:vertical;
}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--cf-accent);
}
.contact-submit{
  align-self:flex-start;
  background:transparent;
  border:1px solid var(--cf-accent);
  color:var(--cf-accent);
  padding:.6rem 1.75rem;
  border-radius:3px;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.contact-submit:hover{ background:var(--cf-accent); color:#000; }
.contact-submit:disabled{ opacity:.6; cursor:default; }
.form-status{
  font-size:.9rem;
  color:var(--cf-accent);
  min-height:1.2em;
  margin:0;
}

/* ==============================================================
   Footer: Legal-Links unter den Social-Icons + Platz zum Sticky-Menü
   ============================================================== */
.site-footer{ padding-bottom:7rem; }
.footer-legal{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.4rem 1.25rem;
  padding:0;
  margin:1.75rem 0 0;
}
.footer-legal a{
  color:rgba(236,230,216,.6);
  font-size:.82rem;
  letter-spacing:.02em;
  transition:color .2s ease;
}
.footer-legal a:hover{ color:var(--accent); }