:root {
  
  /* Color Palette 1 */
  --jetColor: #373737;
  --jasmineColor: #fce694;
  --mindarocolor: #f6feaa;
  --teaGreenColor: #c7dfc5;
  --columbiaBlueColor: #c1dbe3;

  /* Color Palette 2 */
  --sealBrownColor: #582F0E;
  --russetColor: #7F4F24;
  --rawUmberColor: #936639;
  --lionColor: #A68A64;
  --khakiColor: #B6AD90;
  --sageColor: #C2C5AA;
  --sage2Color: #A4AC86;
  --resedaGreenColor: #656D4A;
  --ebonyColor: #414833;
  --blackOliveColor: #333D29; 

  /* MAIN COLOR */
  --navbarColor: #212529;
  --backgroundColor: #1E1F22;

  /* STANDARD Palette*/
  --whiteColor: #ffffff;
  --blackColor: #000000;
  --grayColor: #808080;
  --darkGrayColor: #404040;
  --lightGrayColor: #c0c0c0;
  --redColor: #ff0000;
  --greenColor: #00ff00;
  --blueColor: #0000ff;
  --yellowColor: #ffff00;
  --cyanColor: #00ffff;
  --azureColor: #f0ffff;

}

html, body {
  scroll-padding-top: 85px;;
  scroll-behavior: smooth; 
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.14rem;
  font-weight: 400;
  color:var(--azureColor);
  background-color: var(--backgroundColor);
}

a {
  text-decoration: none;
}

p {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
}

section {
  overflow: hidden;
}

/* Navbar Styles */
.navbar {
  width: 100%;
  height: 85px;
  transition: background-color 0.3s ease;
}

.navbar.navbar-transparent {
  background-color: transparent;
  transition: background-color 0.3s ease; /* Sanfter Übergang bei Hintergrundänderung */
}

.navbar .bg-dark {
  background-color: var(--navbarColor) !important;
}

.nav-link:hover {
  cursor: pointer;
}

.navbar-collapse {
  width: 100%;
}

.navbar .container-fluid {
  width: 100%;
  padding: 0;
  margin: 0;
}

.navbar-brand {
  font-size: clamp(1rem, 3vw, 2rem) !important;
}

.nav-item {
  font-size: clamp(.8rem, 1vw, 1.25rem) !important;
}

.home_section{
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.home-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7);
}

.home-content {
  position: relative;
  z-index: 2;
}

.home-content h1 {
  font-size: clamp(2rem, 8vw, 7rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.home-content .lead {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: clamp(1.1rem, 3vw, 2rem) !important;
}

.salon_section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: #1E1F22;
  font-size: 1.1rem;
  line-height: 1.5;
}

.container-fluid {
  width: 100%;
}

.row {
  width: 100%;
}

.carousel {
  width: 100%;
  height: auto;
}

.carousel-item {
  width: 100%;
  height: clamp(400px, 70vh, 800px);
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.our_team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  color: var(--backgroundColor);
}

.our-team-headline-1 {
  font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--russetColor);
}

.our-team-headline-2 {
  font-size: clamp(.66rem, 2vw, 1rem) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: var(--russetColor);
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  width: auto;
  height: auto;
}

.card img {
  width: 35%;
  height: auto;
  object-fit: contain;
}

.card-title {
  font-size: clamp(.89rem, 1.5vw, 1.8rem) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.card-text {
  font-size: clamp(.66rem, 1vw, 1rem) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
}

.card-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  padding: 0px auto;
  font-size: clamp(.56rem, 1.4vw, 2rem) !important;
}

.price {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  color: var(--backgroundColor);
  margin-top: 8%;
}

.contact, .impressum {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}

.min100vh {
  min-height: 100vh;
}

#map {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 auto;
  width: 100%;
  height: 100%;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* COOKIE BANNER */
#cookieBanner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #333;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-align: center;
  padding: 10px;
  z-index: 1000;
  font-size: clamp(.8rem, 1vw, 1rem) !important;
}

#settingsIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 10px;
  bottom: 10px;
  color: var(--whiteColor);
  background-color: var(--blackOliveColor);
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  z-index: 1001;
}

/* remove underline */
.rm-underline {
  text-decoration: none;
}

/* Button style */
.btn-style{
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  color: var(--whiteColor);
  background-color: var(--blackOliveColor);
  cursor: pointer;
  font-size: clamp(0.5rem, 0.9vw, 0.9rem) !important;
}

.btn-style-default{
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  color: var(--whiteColor);
  background-color: var(--russetColor);
  cursor: pointer;
  font-size: clamp(0.5rem, 0.9vw, 0.9rem) !important;
}

/* Für Bildschirme bis 480px Breite */
@media (max-width: 480px) {
  .price {
    margin-top: 100px;
  }

  /* mhta = mobile hidden telefon adresse */
  .mhta {
    display: none !important;
  }

  /* mhoh = mobile hidden opening hours */
  .mhoh {
    display: none !important;
  }
}
@media (min-width: 480px) {
  body {
      font-size: clamp(12px, 2.5vw, 16px);
  }
  /* mhta = mobile hidden telefon adresse */
  .mhta {
    display: none !important;
  }

  /* mhoh = mobile hidden opening hours */
  .mhoh {
    display: none !important;
  }
}

/* Für Bildschirme ab 768px Breite */
@media (min-width: 768px) {
  body {
      font-size: clamp(14px, 2vw, 18px);
  }
}

/* Für Bildschirme ab 1024px Breite */
@media (min-width: 1024px) {
  body {
      font-size: clamp(16px, 1.5vw, 20px);
  }

  /* mhta = mobile hidden telefon adresse */
  .mhta {
    display: block !important;
  }
  
  /* mhoh = mobile hidden opening hours */
  .mhoh {
    display: block !important;
  }
}
/* Text Colors */
/* PALETT 1 */
.text-columbia-blue {
  color: var(--columbiaBlueColor);
}

.text-tea-green {
  color: var(--teaGreenColor);
}

.text-mindaro {
  color: var(--mindarocolor);
}

.text-jasmine {
  color: var(--jasmineColor);
}

.text-jet {
  color: var(--jetColor);
}

/* PALETT 2 */
.text-seal-brown {
  color: var(--sealBrownColor);
}

.text-russet {
  color: var(--russetColor);
}

.text-raw-umber {
  color: var(--rawUmberColor);
}

.text-lion {
  color: var(--lionColor);
}

.text-khaki {
  color: var(--khakiColor);
}

.text-sage {
  color: var(--sageColor);
}

.text-sage2 {
  color: var(--sage2Color);
}

.text-reseda-green {
  color: var(--resedaGreenColor);
}

.text-ebony {
  color: var(--ebonyColor);
}
.bg-ebony {
  background-color: var(--ebonyColor);
}

.text-black-olive {
  color: var(--blackOliveColor);
}

/* PALETT STANDARD*/
.text-white {
  color: var(--whiteColor);
}

/* TEXT SIZE */
.fs-7 {
  font-size: 0.7rem;
}

.fs-8 {
  font-size: 0.8rem;
}

.fs-9 {
  font-size: 0.9rem;
}

.fs-10 {
  font-size: 1rem;
}

.fs-11 {
  font-size: 1.1rem;
}

.fs-12 {
  font-size: 1.2rem;
}

.fs-13 {
  font-size: 1.3rem;
}

.fs-14 {
  font-size: 1.4rem;
}

.fs-15 {
  font-size: 1.5rem;
}