:root {
  --gray-warm: #5a5a5a;   /* Beispielwerte, bitte anpassen */
  --brown-dark: #4a3728;
  --brown-medium: #8d735b;
  --creme: #F5F0EC99; /* Cremefarbenes Overlay */
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--gray-warm);
  background-color: var(--creme);
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.08em;
  color: var(--brown-medium) !important;
}

section { 
  padding: 6rem 2rem;
}

button {
  background-color: transparent;
  border: 1.5px solid var(--brown-medium);
  color: var(--brown-dark);
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--brown-medium);
  color: #fff;
}

footer {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.08em;
  color: var(--brown-medium);
}


.navbar {
  background-color: transparent !important; /* Farbe für den gesamten Navbar-Hintergrund */
}

.navbar .nav-link,
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover,
.navbar .dropdown-item {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.08em;
  color: var(--brown-dark);
  background-color: transparent; /* NICHT mehr auf Links setzen! */
}

.hero-section .btn:hover {
  background-color: var(--brown-medium);
  color: #fff;
  transition: all 1.3s ease;
}