/* =========================================================
   ines lacroix — style.css
   Clean, image-forward design. Restraint everywhere except
   the hero image itself.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  /* --- Color tokens --- */
  --color-bg:        #FAF9F6;
  --color-ink:       #1A1917;
  --color-greige:    #6B6560;
  --color-hairline:  #DDD9D2;
  --color-accent:    #A98E5D;
  --color-gold:      #C6A038;
  --color-overlay:   rgba(26, 25, 23, 0.45);

  /* --- Type tokens ---
     Gill Sans Nova is a licensed Monotype font and is not
     web-safe. We reference it first so that if licensed
     webfont files are added later (see /css/fonts/), they
     take over automatically. Jost is the closest free
     geometric-sans stand-in in the meantime. */
  --font-nav:   'Gill Sans Nova Light', 'Gill Sans MT', 'Gill Sans', 'Jost', sans-serif;
  --font-body:  'Gill Sans Nova Light', 'Gill Sans MT', 'Gill Sans', 'Jost', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;

  /* --- Layout tokens --- */
  --nav-height: 84px;
  --max-width: 1400px;
  --gutter: clamp(24px, 5vw, 80px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Navigation
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border: none;
}

/* Unterseiten ohne Vollbild-Hintergrund: dezenter, halbtransparenter
   Untergrund, damit das Menü beim Scrollen lesbar bleibt. */
.site-header:not(.nav-overlay) {
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: saturate(140%) blur(6px);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.main-nav {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
}

/* Über einem Vollbild-Foto (Startseite): dezenter Aufhellungs-Schatten
   für Lesbarkeit, unabhängig vom jeweiligen Bildinhalt. */
.nav-overlay .main-nav a,
.nav-overlay .nav-toggle span {
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.6);
}

.nav-overlay .nav-toggle span {
  box-shadow: 0 1px 10px rgba(255, 255, 255, 0.85);
}

.main-nav a {
  font-family: var(--font-nav);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-bottom: 6px;
  position: relative;
  white-space: nowrap;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transition: right 0.35s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.active::after {
  right: 0;
}

.main-nav a:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

.main-nav .nav-instagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--color-gold);
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   Hero (Startseite)
   ========================================================= */

/* Vollflächiges Bild: volle Breite, keine Beschneidung.
   Die Seite wächst mit der tatsächlichen Bildhöhe und ist
   bei Bedarf scrollbar, damit das komplette Foto sichtbar ist. */
.hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #EFEDE7;
}

.hero-portrait {
  position: relative;
  width: 100%;
  opacity: 0;
  animation: heroReveal 1.4s ease forwards;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-portrait .placeholder-note {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-greige);
}

@keyframes heroReveal {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait { animation: none; opacity: 1; }
}

/* =========================================================
   Generic page content (Unterseiten)
   ========================================================= */

.page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 88px) var(--gutter) clamp(80px, 10vh, 120px);
}

/* Für Seiten ohne vorangestelltes Vollbild (Aktuelles, Repertoire, ...):
   zusätzlicher Abstand, damit der fest positionierte Menübalken den
   Text nicht überdeckt. */
.page-content.with-nav-offset {
  padding-top: calc(var(--nav-height) + clamp(40px, 6vh, 80px));
}

/* Text liegt direkt auf dem Vollbild, unterlegt mit einer
   transparenten, leicht geweichzeichneten Fläche für Lesbarkeit.
   Läuft der Text länger als das Bild, setzt er sich nahtlos auf dem
   Seitenhintergrund fort (gleicher Farbton, nur ohne Bild dahinter). */
.page-content.overlay-box {
  position: absolute;
  left: 50%;
  top: clamp(120px, 22vh, 220px);
  transform: translateX(-50%);
  width: min(1080px, 92vw);
  max-width: 1080px;
  background: rgba(250, 249, 246, 0.38);
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  padding: clamp(28px, 5vw, 56px);
  z-index: 5;
}

.programme-entry {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.programme-entry:last-child {
  margin-bottom: 0;
}

.programme-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-ink);
  margin: 0 0 8px;
}

.programme-details {
  font-family: var(--font-nav);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--color-greige);
  margin: 0;
}

.page-title {
  font-family: var(--font-nav);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-greige);
  margin: 0 0 40px;
}

.page-content p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-ink);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  border: none;
  padding: 26px var(--gutter);
}

/* Auf der Startseite liegt der Footer transparent über dem Vollbild. */
.footer-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: transparent;
}

.footer-overlay .footer-links a,
.footer-overlay .footer-instagram,
.footer-overlay .footer-copy {
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.6);
}

.footer-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-copy {
  margin-left: 8px;
}

.footer-copy a {
  color: inherit;
  opacity: 0.7;
}

.footer-copy a:hover {
  opacity: 1;
  color: var(--color-gold);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-links a {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold);
}

.footer-instagram svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  transition: stroke 0.25s ease;
}

.footer-instagram:hover,
.footer-instagram:hover svg {
  color: var(--color-accent);
}

.footer-copy {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-greige);
}

/* =========================================================
   Cookie consent
   ========================================================= */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 22px var(--gutter);
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 640px;
}

.cookie-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--color-bg);
  background: transparent;
  color: var(--color-bg);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.cookie-btn.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.cookie-btn:hover {
  background: var(--color-bg);
  color: var(--color-ink);
}

.cookie-btn.primary:hover {
  background: transparent;
  color: var(--color-bg);
}

/* =========================================================
   Responsive / Mobile
   ========================================================= */

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 40px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav a {
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-hairline);
    font-size: 0.9rem;
  }

  .hero-portrait {
    width: 100%;
  }

  .footer-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cookie-banner-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-actions {
    justify-content: flex-end;
  }
}