/* ===========================================
   NORDSTERN – CUSTOM (GLOBAL)
   Zentrale Typografie + Hero + Subnav
   =========================================== */

/* -------------------------------------------
   0) Fonts – global
   ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --font-headline: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --gold: #ffe7ad;
  --header-height: 72px;
}

/* -------------------------------------------
   1) Globale Typografie
   ------------------------------------------- */

body{
  font-family: var(--font-body);
  line-height: 1.65;
}

/* H1 – Markenstimme */
h1{
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* Hero-H1 */
.hero h1{
  font-size: clamp(40px, 6vw, 72px);
  color: var(--gold);
  margin: 0 0 12px;
  text-align: center;
}

/* H2 – Struktur */
h2{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--gold);
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 0 14px;
}

/* H3 – Unterstruktur */
h3{
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 8px;
  text-align: center;
}

/* -------------------------------------------
   2) Hero-Zentrierung
   ------------------------------------------- */

.hero-wrap--noimage{
  display: block;
}

.hero-copy--center{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-kicker{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.95;
  text-align: center;
}

.hero-sub{
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 auto;
  opacity: 0.95;
  text-align: center;
}

/* -------------------------------------------
   3) Subnav – global
   ------------------------------------------- */

.subnav{
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 900;
  background: rgba(31,92,99,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 10px 0 12px;
}

.subnav .subnav-wrap{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.subnav .subnav-link{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  font-size:0.92rem;
  line-height:1;
  border:1px solid rgba(255,255,255,0.22);
  opacity:0.95;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.subnav .subnav-link:hover{
  transform: translateY(-1px);
  border-color:rgba(255,231,173,0.32);
  background:rgba(255,231,173,0.08);
}

.subnav .subnav-link[aria-current="page"],
.subnav .subnav-link.active{
  border-color:rgba(255,231,173,0.52);
  background:rgba(255,231,173,0.14);
}


/* Utility: falls eine Zwischenüberschrift (noch) kein h2/h3 ist */
.heading-gold{
  color: var(--gold);
}