/* css styles */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,500;1,600&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

body {
  font-family: 'Montserrat', sans-serif;
  padding-top: 50px;
}

section {
  scroll-margin-top: 50px;
}

/* NAVBAR ÜBER HERO */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;  /* Bootstrap-Empfehlung */
  font-size: 1.25rem;
  background-color: rgba(255, 255, 255, 0);
  /* background-color: rgba(191, 137, 103, 0.4); /* hell & transparent */
  padding-top: 0rem;
  padding-bottom: 0rem;
  backdrop-filter: none;  /* reset blur */
  transition: background-color 180ms ease, backdrop-filter 180ms ease;
}

.navbar li.nav-item a.nav-link span {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease, font-weight 0.2s ease, text-decoration 0.2s ease;
}

/* Hover-Effekt: Text hebt sich ab */
.navbar li.nav-item a.nav-link:hover span {
  font-weight: 600; /* oder bold */
  text-decoration: underline; /* oder 'overline' für subtilen Effekt */
}

/* Aktiver Link (Bootstrap setzt .active auf den <a>-Tag) */
.navbar li.nav-item a.nav-link.active span {
  font-weight: 700; /* noch stärker */
  text-decoration: underline;
}

.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);       /* optional: leichter Blur für Lesbarkeit */
}

.navbar.scrolled li.nav-item a.nav-link span {
  color: rgba(0, 0, 0, 0.8) !important;
}

.navbar.scrolled .nav-link:hover span,
.navbar.scrolled .nav-link:focus-visible span,
.navbar.scrolled .nav-link.active span {
  color: rgba(0, 0, 0, 1);
}

/* Nav-Link-Höhe für ALLE Expand-Breakpoints fixieren */
.navbar-expand-sm .navbar-nav .nav-link,
.navbar-expand-md .navbar-nav .nav-link,
.navbar-expand-lg .navbar-nav .nav-link,
.navbar-expand-xl .navbar-nav .nav-link,
.navbar-expand-xxl .navbar-nav .nav-link {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  line-height: 1.2;
}

/* 1) Die zusammenklappbare Navbar (Bootstrap Collapse) mittig ausrichten */
.navbar .navbar-collapse {
  justify-content: center;   /* verteilt den Inhalt mittig */
}

/* 2) Sicherstellen, dass die Menüelemente in einer Reihe bleiben */
.navbar .navbar-nav {
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

.navbar .container,
.navbar .container-fluid {
  display: flex;
  justify-content: center;
}

/* Nutze Garamon Font für Navbar und Header L2 */
/* Navbar-Links & Brand */
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600; /* passe nach Geschmack an: 400–600 */
}

/* Level-2 Überschriften */
h2,
.h2,
h2.anchored {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
}

/* Optional: Abschnittstitel im Inhaltsbereich, falls Quarto andere Klassen setzt */
.section h2 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 600;
}

/* HERO SECTION */
/* FULL-BLEED HERO */
.hero-fullbleed {
  position: relative;
  width: 100vw;
  margin-top: -45px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /*height: 35vh;*/
  height: 35vh;
  overflow: hidden;
  background-image: url("images/20250316_naturenoise_Philharmonie.jpg");
  background-size: cover;
  background-position: center 15%;
}

@media (min-width: 992px) {
  .hero-fullbleed {
    height: 50vh;  
  }
}

@media (min-width: 1440px) {
  .hero-fullbleed {
    height: 65vh;  
  }
}

/* define icon row */
.icon-row {
  display: flex;
  justify-content: center;  /* horizontal zentriert */
  gap: 2rem;                /* Abstand zwischen Icons */
  margin: 2rem 0;
}

.icon-row i {
  font-size: 4rem;          /* gewünschte Größe */
  line-height: 1;
}

.icon-row a {
  color: inherit;
  text-decoration: none;
}

.icon-row a:hover {
  opacity: 0.8;
}


/* define video row */
/* Container für die zwei Videos */
.video-row {
  display: flex;
  flex-direction: column;       /* mobil: untereinander */
  align-items: center;          /* mobil: zentriert */
  gap: 0.5em;                  /* Abstand zwischen den Videos */
  margin: 1rem 0;
}
.video {
  width: 320px;
  height: 180px;
}

/* Ab "breit": nebeneinander; links-/rechtsbündig */
@media (min-width: 992px) {     /* lg-Breakpoint, passend zu Bootstrap/Quarto */
  .video-row {
    flex-direction: row;        /* nebeneinander */
    align-items: flex-start;    /* an der Oberkante ausrichten */
    justify-content: space-between; /* eines ganz links, eines ganz rechts */
  }
  .video-left  { margin-left: 0.5em;  margin-right: auto; }
  .video-right { margin-right: 0.5em; margin-left:  auto; }
}