/* ============================================================
   NEUN WELTEN — Design-System & Startseiten-Styles
   Wird ueber functions.php (neunwelten_enqueue_assets) geladen.
   ============================================================ */

:root{
  /* Grundflaechen */
  --nw-void:      #0B0E0C;
  --nw-bark:      #141815;
  --nw-moss:      #1E241F;

  /* Schrift */
  --nw-bone:      #EDEAE3;
  --nw-mist:      #A8AFA6;
  --nw-ash:       #6E7570;

  /* Akzent */
  --nw-amber:     #B07D3E;
  --nw-amber-lit: #D3A063;

  /* Hilfslinien */
  --nw-rule:      rgba(237,234,227,.12);

  /* Schrift-Familien */
  --nw-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --nw-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Masse */
  --nw-measure: 1100px;
  --nw-gutter:  clamp(1.25rem, 5vw, 3rem);
  --nw-section: clamp(4.5rem, 11vw, 9rem);
}

/* Reset nur innerhalb unserer eigenen Klassen, um das Eltern-Theme
   ausserhalb der neuen Startseite nicht zu beeinflussen. */
body.home *, body.home *::before, body.home *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body.home{
  margin:0;
  background:var(--nw-void);
  color:var(--nw-mist);
  font-family:var(--nw-sans);
  font-size:1.0625rem;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.home h1, body.home h2, body.home h3{
  font-family:var(--nw-serif);
  color:var(--nw-bone);
  font-weight:400;
  line-height:1.15;
  margin:0;
}
body.home h1{ font-size:clamp(2.6rem,9vw,5.25rem); }
body.home h2{ font-size:clamp(1.9rem,4.5vw,3rem); }
body.home h3{ font-size:clamp(1.2rem,2.4vw,1.55rem); }

body.home p{ margin:0 0 1.25em; max-width:62ch; }
body.home p:last-child{ margin-bottom:0; }

body.home a{ color:var(--nw-amber); text-decoration:none; transition:color .25s ease; }
body.home a:hover{ color:var(--nw-amber-lit); }

body.home :focus-visible{
  outline:2px solid var(--nw-amber-lit);
  outline-offset:3px;
}

.nw-skip{
  position:absolute; left:-9999px;
  background:var(--nw-bone); color:var(--nw-void);
  padding:.75rem 1.25rem; z-index:999;
}
.nw-skip:focus{ left:1rem; top:1rem; }

.nw-wrap{
  width:100%;
  max-width:var(--nw-measure);
  margin-inline:auto;
  padding-inline:var(--nw-gutter);
}

/* ---------- Navigation ---------------------------------- */
.nw-nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.15rem var(--nw-gutter);
  background:transparent;
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nw-nav[data-stuck="true"]{
  background:rgba(11,14,12,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--nw-rule);
}
.nw-nav__mark{
  display:block;
  font-family:var(--nw-serif);
  font-size:1.0625rem;
  letter-spacing:.2em;
  color:var(--nw-bone);
  opacity:0;
  transition:opacity .4s ease;
}
.nw-nav[data-stuck="true"] .nw-nav__mark{ opacity:1; }

/* Logo in der Navigation: feste, kleine Hoehe, egal welches
   Seitenverhaeltnis das hochgeladene Bild hat. !important, weil
   GeneratePress selbst eine .custom-logo-Regel mitbringt, die sonst
   je nach Ladereihenfolge gewinnen kann. */
.nw-nav__mark img{
  display:block !important;
  height:32px !important;
  width:auto !important;
  max-height:32px !important;
  max-width:none !important;
}
.nw-nav__links{
  display:flex; gap:clamp(1rem,3vw,2.25rem);
  list-style:none; margin:0; padding:0;
  font-size:.875rem;
}
.nw-nav__links a{ color:var(--nw-mist); }
.nw-nav__links a:hover{ color:var(--nw-bone); }
@media (max-width:640px){
  .nw-nav__mark{ display:none; }
  .nw-nav{ justify-content:center; }
  .nw-nav__links{ font-size:.8125rem; }
}

/* ---------- Hero ----------------------------------------- */
.nw-hero{
  position:relative;
  min-height:92svh;
  display:grid; place-items:center;
  text-align:center;
  padding:8rem var(--nw-gutter) 5rem;
  overflow:hidden;
}
.nw-hero__art{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.nw-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(11,14,12,.55) 0%,
    rgba(11,14,12,.22) 42%,
    rgba(11,14,12,.98) 100%);
}
.nw-hero__inner{ position:relative; z-index:2; }
.nw-hero__title{ letter-spacing:.16em; text-indent:.16em; }

/* Logo im Hero. Breite ueber clamp() begrenzen, damit ein sehr breit
   angelegtes Logo auf Desktop nicht die ganze Seite einnimmt, aber auf
   Mobil trotzdem gut lesbar bleibt. !important aus demselben Grund wie
   beim Nav-Logo: GeneratePress bringt eine eigene .custom-logo-Regel
   mit (meist eine max-height), die sonst Vorrang haben kann. */
.nw-hero__logo img{
  display:block !important;
  width:clamp(220px, 32vw, 420px) !important;
  height:auto !important;
  max-height:none !important;
  max-width:none !important;
  margin-inline:auto;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
/* H1 bleibt im Markup für SEO/Screenreader, ist aber unsichtbar,
   sobald ein Logo vorhanden ist. */
.nw-hero__logo h1{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.nw-hero__sub{
  margin:1.5rem auto 0;
  max-width:34ch;
  font-size:clamp(.9rem,2vw,1.0625rem);
  color:var(--nw-mist);
}
.nw-hero__actions{
  margin-top:2.75rem;
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:center;
}
.nw-hero__scroll{
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--nw-ash);
}

/* ---------- Buttons --------------------------------------- */
.nw-btn{
  display:inline-block;
  font-family:var(--nw-sans);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.9rem 2.25rem;
  border:1px solid var(--nw-amber);
  color:var(--nw-amber);
  background:transparent;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nw-btn:hover{
  background:var(--nw-amber);
  border-color:var(--nw-amber);
  color:var(--nw-void);
}
.nw-btn--quiet{ border-color:var(--nw-rule); color:var(--nw-bone); }
.nw-btn--quiet:hover{ background:transparent; border-color:var(--nw-bone); color:var(--nw-bone); }

/* ---------- Sektionen -------------------------------------- */
.nw-section{ padding-block:var(--nw-section); }
.nw-section--bark{ background:var(--nw-bark); }

.nw-statement{ text-align:center; padding-block:clamp(5rem,13vw,10rem); }
.nw-statement p{
  font-family:var(--nw-serif);
  font-style:italic;
  font-size:clamp(1.45rem,3.4vw,2.2rem);
  line-height:1.5;
  color:var(--nw-bone);
  max-width:26ch;
  margin-inline:auto;
}

.nw-head{ margin-bottom:3.5rem; }
.nw-head p{ margin-top:1rem; color:var(--nw-mist); }

/* ---------- Latest release ---------------------------------- */
.nw-release{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:820px){ .nw-release{ grid-template-columns:1fr; } }
.nw-cover{
  aspect-ratio:1;
  width:100%;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  background:
    radial-gradient(120% 90% at 30% 15%, #33423F 0%, transparent 60%),
    linear-gradient(200deg, #1B2422 0%, #0D1210 55%, #050807 100%);
  display:grid; place-items:center;
  color:var(--nw-ash);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}
.nw-release__year{
  font-size:.8125rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--nw-ash);
  margin-bottom:.9rem;
}
.nw-release__body{ margin-top:1.5rem; }
.nw-listen{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  list-style:none; margin:2rem 0 0; padding:0;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nw-player{
  margin-top:2.25rem;
  border:1px solid var(--nw-rule);
  background:var(--nw-void);
  min-height:120px;
  display:grid; place-items:center;
  text-align:center;
  padding:1.5rem;
  color:var(--nw-ash);
  font-size:.8125rem;
}

/* ---------- Diskografie -------------------------------------- */
.nw-disc{ list-style:none; margin:0; padding:0; }
.nw-disc__row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2rem);
  align-items:center;
  padding:1.6rem 1rem;
  margin-inline:-1rem;
  border-top:1px solid var(--nw-rule);
  transition:background .3s ease;
}
.nw-disc__row:last-child{ border-bottom:1px solid var(--nw-rule); }
.nw-disc__row:hover{ background:var(--nw-moss); }
.nw-disc__thumb{ aspect-ratio:1; width:100%; background:linear-gradient(200deg,#26302C,#0A0E0C); }
.nw-disc__row:nth-child(2) .nw-disc__thumb{ background:linear-gradient(160deg,#2C2A22,#0B0E0C); }
.nw-disc__row:nth-child(3) .nw-disc__thumb{ background:linear-gradient(220deg,#1F2A2E,#080B0C); }
.nw-disc__row:nth-child(4) .nw-disc__thumb{ background:linear-gradient(140deg,#2A2320,#0B0E0C); }
.nw-disc__row:nth-child(5) .nw-disc__thumb{ background:linear-gradient(190deg,#212B24,#070A08); }
.nw-disc__title{
  font-family:var(--nw-serif);
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  color:var(--nw-bone);
  display:block;
}
.nw-disc__note{ margin:.35rem 0 0; font-size:.9375rem; color:var(--nw-mist); max-width:48ch; }
.nw-disc__year{ font-variant-numeric:tabular-nums; font-size:.875rem; letter-spacing:.1em; color:var(--nw-ash); }
@media (max-width:640px){
  .nw-disc__row{ grid-template-columns:56px minmax(0,1fr); }
  .nw-disc__year{ grid-column:2; margin-top:.25rem; }
}

/* ---------- About ---------------------------------------------- */
.nw-about{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:820px){ .nw-about{ grid-template-columns:1fr; } }
.nw-portrait{
  aspect-ratio:4/5;
  background:
    radial-gradient(90% 70% at 60% 25%, #2A332E 0%, transparent 65%),
    linear-gradient(180deg,#171D1A,#090C0A);
  display:grid; place-items:center;
  color:var(--nw-ash);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}
.nw-about__more{ margin-top:2rem; }

/* ---------- Live ------------------------------------------------ */
.nw-live__empty{ border:1px solid var(--nw-rule); padding:clamp(2.5rem,7vw,4.5rem); text-align:center; }
.nw-live__empty p{ margin-inline:auto; }
.nw-show{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding:1.4rem 0;
  border-top:1px solid var(--nw-rule);
}
.nw-show__date{ font-variant-numeric:tabular-nums; color:var(--nw-bone); font-size:.9375rem; letter-spacing:.08em; }
.nw-show__venue{ color:var(--nw-mist); }

/* ---------- Newsletter -------------------------------------------- */
.nw-signup{ max-width:34rem; }
.nw-form{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-end; margin-top:2.25rem; }
.nw-form label{
  display:block;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--nw-ash);
  margin-bottom:.4rem;
}
.nw-form__field{ flex:1 1 16rem; }
.nw-form input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--nw-rule);
  color:var(--nw-bone);
  font-family:var(--nw-sans);
  font-size:1rem;
  padding:.85rem 0;
}
.nw-form input::placeholder{ color:var(--nw-ash); }
.nw-form input:focus{ outline:none; border-bottom-color:var(--nw-amber); }
.nw-fineprint{ margin-top:1.5rem; font-size:.8125rem; color:var(--nw-ash); }

/* ---------- Footer ------------------------------------------------- */
.nw-footer{ border-top:1px solid var(--nw-rule); padding-block:3.5rem; font-size:.875rem; background:var(--nw-void); }
.nw-footer__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:2.5rem; }
.nw-footer h3{
  font-family:var(--nw-sans);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--nw-ash);
  margin-bottom:1rem;
}
.nw-footer ul{ list-style:none; margin:0; padding:0; }
.nw-footer li{ margin-bottom:.5rem; }
.nw-footer a{ color:var(--nw-mist); }
.nw-footer a:hover{ color:var(--nw-bone); }
.nw-footer__base{
  margin-top:3rem;
  padding-top:1.75rem;
  border-top:1px solid var(--nw-rule);
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  color:var(--nw-ash);
  font-size:.8125rem;
}

/* ---------- Motion --------------------------------------------------- */
.nw-fog{ animation:nw-drift 48s linear infinite; transform-origin:center; }
.nw-fog--slow{ animation-duration:74s; animation-direction:reverse; }
@keyframes nw-drift{
  from{ transform:translateX(-4%); }
  50% { transform:translateX(4%); }
  to  { transform:translateX(-4%); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .nw-fog{ animation:none; }
  body.home *{ transition-duration:.01ms !important; }
}