/*
Theme Name: Leipzig Life
Theme URI: https://leipziglifemusic.de
Author: Leipzig Life
Description: Individuelles Theme fuer das unabhaengige Musiklabel Leipzig Life aus Leipzig und Umgebung.
Version: 1.0
*/

:root{
  --paper:#FBF8F3;
  --surface:#F1E2CE;
  --ink:#1F3A5A;
  --ink-soft:#5B7089;
  --orange:#CE6A2E;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.5;
}

/* Seitenweite Navigation */
.site-nav{
  background:var(--ink); padding:14px 24px; display:flex; gap:28px;
  justify-content:center; align-items:center; flex-wrap:wrap;
}
.site-nav a{
  font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:500;
  color:#D9CFC0; text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent;
}
.site-nav a:hover{color:#FBF8F3;}
.site-nav a.active{color:#FBF8F3; border-bottom-color:var(--orange);}

/* hero: Buehnenlicht-Wash -- gruen oben, orange unten, blau/violett seitlich */
.hero{
  position:relative; overflow:hidden; text-align:center;
  padding:88px 28px 110px;
  background:#0A0D12;
}
.hero-green{
  position:absolute; left:20%; top:-10%; width:900px; height:700px; pointer-events:none;
  background:radial-gradient(circle, rgba(46,204,113,0.55) 0%, rgba(46,204,113,0.18) 45%, transparent 72%);
  filter:blur(55px); mix-blend-mode:screen;
}
.hero-orange{
  position:absolute; left:55%; bottom:-15%; width:1000px; height:750px; pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,122,26,0.6) 0%, rgba(255,122,26,0.2) 45%, transparent 72%);
  filter:blur(55px); mix-blend-mode:screen;
}
.hero-violet{
  position:absolute; right:-10%; top:20%; width:600px; height:600px; pointer-events:none;
  background:radial-gradient(circle, rgba(139,92,246,0.45) 0%, transparent 70%);
  filter:blur(50px); mix-blend-mode:screen;
}
.hero-blue{
  position:absolute; left:-12%; top:45%; width:550px; height:550px; pointer-events:none;
  background:radial-gradient(circle, rgba(59,130,246,0.4) 0%, transparent 70%);
  filter:blur(50px); mix-blend-mode:screen;
}
.hero-fade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 68%, var(--paper) 100%);
}
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-glow{
  position:absolute; left:50%; top:10%; width:520px; height:520px; pointer-events:none;
  transform:translate(-50%,-25%);
  background:radial-gradient(circle, rgba(255,208,145,0.32) 0%, rgba(206,106,46,0.16) 35%, transparent 70%);
  filter:blur(45px); mix-blend-mode:screen;
}
.hero-inner{position:relative; z-index:5; max-width:560px; margin:0 auto;}

.wordmark{
  font-family:'Fraunces', serif; font-weight:700; font-size:clamp(42px,9vw,68px);
  line-height:1.05; margin-bottom:30px; letter-spacing:0.3px;
  background:radial-gradient(circle at 50% 25%, #FFF3DD 0%, #F5B778 32%, #CE6A2E 66%, #A8501F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 44px rgba(245,183,120,0.35);
}
.wordmark em{font-style:italic; font-weight:600;}

.street-rule{
  height:2px; width:160px; margin:0 auto 34px;
  background-image:repeating-linear-gradient(to right, #F0B87E 0 12px, transparent 12px 22px);
  opacity:0.75;
}

.tagline{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:22px; line-height:1.3; color:#EDE6DA; max-width:400px; margin:0 auto;
}
.tagline .accent{color:var(--orange); font-style:normal;}

/* content */
.wrap{max-width:600px; margin:0 auto; padding:64px 28px 44px;}

.section{margin-bottom:52px;}
.section-label{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
  border-bottom:2px solid var(--ink); display:inline-block;
  padding-bottom:5px; margin-bottom:26px; color:var(--ink);
}

/* Kuenstler-Grid (Startseite) */
.artists-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
.artist-card{
  position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  background:var(--surface); display:block;
}
.artist-card img{width:100%; height:100%; object-fit:cover; display:block;}
.artist-card .scrim{
  position:absolute; inset:auto 0 0 0; height:60%;
  background:linear-gradient(to top, rgba(10,20,32,0.82), transparent);
}
.artist-card .name{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:23px; color:#FBF8F3;
}
.more-link{
  display:inline-block; color:var(--orange); font-weight:700; font-size:14px;
  text-decoration:none; border-bottom:2px solid var(--orange);
}

.avatar{
  width:72px; height:72px; border-radius:50%; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar.orange{background:var(--orange); color:var(--paper);}
.avatar.blue{background:var(--ink); color:var(--paper);}
.avatar.neutral{background:var(--surface); color:var(--ink);}

.session-row{display:flex; align-items:center; gap:18px;}
.session-name{font-family:'Fraunces', serif; font-weight:600; font-style:italic; font-size:22px;}
.session-date{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);
  background:var(--surface); padding:5px 10px; margin-left:auto; border-radius:3px;
}

.kontakt-link{
  color:var(--orange); font-weight:700; font-size:15px; text-decoration:none;
  border-bottom:2px solid var(--orange);
}

footer{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); margin-top:24px;}

.legal-footer{
  text-align:center; padding:24px 20px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:var(--ink-soft); display:flex; justify-content:center; gap:20px;
}
.legal-footer a{color:var(--ink-soft); text-decoration:underline;}

/* Eintreten-Screen */
.enter-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, #16304B 0%, #0A1420 70%);
  transition:opacity 0.7s ease, visibility 0.7s ease;
}
.enter-overlay.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.enter-inner{text-align:center; padding:0 24px;}
.enter-word{
  font-family:'Fraunces', serif; font-weight:700; font-size:clamp(32px,7vw,50px);
  line-height:1.05; margin-bottom:8px;
  background:radial-gradient(circle at 50% 25%, #FFF3DD 0%, #F5B778 32%, #CE6A2E 66%, #A8501F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.enter-word em{font-style:italic; font-weight:600;}
.enter-hint{font-size:13px; color:#9FB0C2; margin-bottom:34px;}
.enter-btn{
  display:inline-flex; align-items:center; gap:10px; padding:13px 30px; border-radius:30px;
  border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.06); color:#F1E7DA;
  font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:500; cursor:pointer;
  backdrop-filter:blur(6px);
}
.enter-btn:hover{background:rgba(255,255,255,0.14);}
.enter-btn svg{width:14px; height:14px;}

.sound-toggle{
  position:fixed; right:20px; bottom:20px; z-index:50; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  display:none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.sound-toggle svg{width:18px; height:18px;}

/* Kuenstler-Einzelseite */
.artist-photo{max-width:100%; max-height:460px; width:auto; height:auto; display:block; margin:0 auto 20px; border-radius:6px;}

.track{
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--surface);
}
.track:last-child{border-bottom:none;}
.track-num{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft); width:20px; flex-shrink:0;}
.track-title{font-family:'Fraunces', serif; font-weight:600; font-style:italic; font-size:18px; flex:1;}
.track audio{height:32px; max-width:200px;}

.links-list{display:flex; flex-wrap:wrap; gap:12px;}
.links-list a{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink);
  background:var(--surface); padding:6px 14px; border-radius:20px; text-decoration:none;
}
.links-list a:hover{background:var(--orange); color:var(--paper);}

.concert{
  display:flex; align-items:baseline; gap:16px; padding:10px 0;
  border-bottom:1px solid var(--surface);
}
.concert:last-child{border-bottom:none;}
.concert-date{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft); width:90px; flex-shrink:0;}
.concert-ort{font-size:15px; color:var(--ink);}
.session-poster{
  width:100%; max-width:340px; display:block; margin:0 auto 24px;
  border-radius:6px; box-shadow:0 8px 24px rgba(31,58,90,0.18);
}
.listen-poster{
  width:64px; height:64px; border-radius:6px; object-fit:cover;
  margin:0 auto 14px; display:block; box-shadow:0 4px 14px rgba(31,58,90,0.2);
}
.listen-banner{
  position:relative; border-radius:10px; overflow:hidden;
  min-height:220px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-color:var(--ink);
  padding:26px;
}
.listen-banner::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,32,0.1) 0%, rgba(10,20,32,0.88) 100%);
}
.listen-banner-content{position:relative; z-index:2; width:100%; text-align:center;}
.listen-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:1px; color:var(--orange); margin-bottom:8px; font-weight:500;
}
.listen-title{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:24px; color:#FBF8F3; line-height:1.3;
}
.session-header{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.session-icon{width:88px; height:88px; border-radius:6px; object-fit:cover; flex-shrink:0; box-shadow:0 2px 8px rgba(31,58,90,0.15);}
/* Listen-now-Banner v2: unbeschnittenes Poster, mehr Text, klickbar */
.listen-banner{
  position:relative; display:block; border-radius:10px; overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--ink);
  text-decoration:none; color:inherit;
  padding:30px 22px;
  margin-bottom:8px;
}
.listen-banner::before{
  content:''; position:absolute; inset:-20px;
  background:inherit; background-size:cover; background-position:center;
  filter:blur(26px) brightness(0.5); transform:scale(1.15);
  z-index:0;
}
.listen-banner-poster{
  position:relative; z-index:1; max-width:100%; max-height:220px; width:auto; height:auto;
  display:block; margin:0 auto 20px; border-radius:6px; box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.listen-banner-content{position:relative; z-index:1; text-align:center;}
.listen-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:1px; color:var(--orange); margin-bottom:8px; font-weight:500;
}
.listen-title{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:22px; color:#FBF8F3; line-height:1.3; margin-bottom:10px;
}
.listen-desc{
  font-size:14px; color:#D9CFC0; max-width:400px; margin:0 auto 12px; line-height:1.55;
}
.listen-tracks{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:#9FB0C2;
}
.player-list{display:flex; flex-direction:column; gap:4px;}
.track-player{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--surface);}
.track-player:last-child{border-bottom:none;}
.track-play-btn{
  width:40px; height:40px; border-radius:50%; border:none; flex-shrink:0;
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.15s ease;
}
.track-play-btn:hover{background:var(--orange);}
.track-play-btn svg{width:16px; height:16px;}
.track-body{flex:1; min-width:0;}
.track-heading{display:flex; align-items:baseline; gap:10px; margin-bottom:6px;}
.track-heading .track-num{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
.track-heading .track-title{font-family:'Fraunces', serif; font-weight:600; font-style:italic; font-size:16px; color:var(--ink);}
.track-scrubber{display:flex; align-items:center; gap:10px;}
.track-progress{flex:1; height:4px; background:var(--surface); border-radius:2px; cursor:pointer; position:relative;}
.track-progress-fill{height:100%; width:0%; background:var(--orange); border-radius:2px;}
.track-time{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); flex-shrink:0; white-space:nowrap;}
/* Redesign: Navigation im Markenstil statt steriler Balken */
.site-nav{
  background:var(--ink); padding:18px 24px; display:flex; gap:32px;
  justify-content:center; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid rgba(245,183,120,0.25);
}
.site-nav a{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:15px;
  color:#D9CFC0; text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent;
  letter-spacing:0.3px;
}
.site-nav a:hover{color:#FBF8F3;}
.site-nav a.active{color:var(--orange); border-bottom-color:var(--orange);}

/* Wordmark: genug Platz fuer Nachkommastriche (g), nichts wird mehr abgeschnitten */
.wordmark{
  line-height:1.2 !important;
  padding-bottom:8px;
}

/* Hero fuellt beim Ankommen den kompletten Bildschirm */
.hero{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}

/* Sanftes Einblenden der Inhalte beim Scrollen */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
/* Eintreten-Tagline staerker hervorheben */
.enter-tagline{
  font-family:'Fraunces', serif; font-style:italic; font-weight:700;
  font-size:24px; color:#FFF8EF; margin-bottom:30px;
  text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.enter-tagline .accent{
  color:var(--orange); font-style:normal;
  text-shadow:0 0 20px rgba(206,106,46,0.55);
}
/* Eintreten-Schriftzug: Nachkommastriche (g, p, f) nicht mehr abschneiden */
.enter-word{
  line-height:1.25 !important;
  padding-bottom:10px;
}
/* Seitenzahlen-Navigation auf der Kuenstler-Uebersicht */
.pagination .nav-links{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:12px;}
.pagination .page-numbers{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink);
  padding:8px 14px; border:1px solid var(--surface); border-radius:4px; text-decoration:none;
}
.pagination .page-numbers.current{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pagination .page-numbers.dots{border:none;}