/*
Theme Name: Verein OnePager
Version: 1.0
Text Domain: verein-onepager
*/

/** BASICS & FONTS **/

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', -apple-system, sans-serif;
  font-size: 20px;
  color: #333;
}

/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v25-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v25-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v25-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v25-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/lato-v25-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/** COLORS **/

  :root {
  --bfs_brombeere: #c2508d;
  --bfs_lila_1: #9374b0;
  --bfs_lila_2: #839cc7;
  --bfs_hellblau: #81c1d2;
  --bfs_tuerkis: #83c8b9;
  --bfs_tuerkis_50: #c1e3dc;
  --bfs_gruen_1: #8ac58d;
  --bfs_gruen_2: #adcb6e;
  --bfs_gelb1: #dbd666;
   --bfs_gelb2: /*#fcffda*/ #fbfae7;

  --bfs_grau_1: #f5f5f5;
  --bfs_grau_2: #d5d5d5;;
  --bfs_grau_3: #6c6c6c;

 
  } 

.brombeere {background-color: var(--bfs_brombeere);}
.lila1 {background-color: var(--bfs_lila_1);}
.lila2 {background-color: var(--bfs_lila_2);}
.hellblau {background-color: var(--bfs_hellblau);}
.tuerkis {background-color: var(--bfs_tuerkis);}
.tuerkis_50 {background-color: var(--bfs_tuerkis_50);}
.gruen1 {background-color: var(--bfs_gruen_1);}
.gruen2 {background-color: var(--bfs_gruen_2);}
.gelb1{background-color: var(--bfs_gelb1);}
.gelb2 {background-color: var(--bfs_gelb2);}
.grau1 {background-color: var(--bfs_grau_1);}
.grau2 {background-color: var(--bfs_grau_2);}
.grau3 {background-color: var(--bfs_grau_3);}




/*
.dark-gray {background-color: #6c6c6c; }
.warm-gray { background-color: #d5d5d5; }
.warm-lightgray { background-color: #f5f5f5; }
.col1 { background-color: #98cebc; }
.col2 { background-color: #95ced7; }
.coltest { background-color: #b9e4eb; }
.lightblue { background-color: #a8ddd3; }
*/



/** NAVBAR **/

#navbar { transition: all 0.3s ease; }
#navbar .nav-link,
#navbar .navbar-brand { color: var(--bs-heading-color); }

#navbar a.nav-link:hover {
  color: var(--bfs_brombeere) !important;
}



#navbar.scrolled {
  background: white;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
#navbar.scrolled .nav-link,
#navbar.scrolled .navbar-brand {
  color: black !important;
}

.icon {
  visibility: hidden;
  transition-duration: 0.2s;
}
#navbar.scrolled .icon { visibility: visible; }

.icon:hover {
  transform: rotate(30deg);
  transition-duration: 0.3s;
}

.nav-link.active {
  color: #5c9d3a !important;
  font-weight: 600;
}

.navbar-toggler-icon {
  filter: invert(0);
}

#navbar.scrolled .navbar-toggler-icon {
  filter: invert(0);
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: white;
    padding: 20px;
    border-radius: 0 0 10px 10px;
  }
  .nav-link {
    color: black !important;
    font-size: 18px;
    padding: 10px 0;
  }
}

/** HERO **/

.hero {
  color: white;
  padding: 100px 0;
  text-align: center;
}

.hero-container {
  background-image: var(--hero-bgimg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/** SECTION **/

.section {
  padding: 80px 0;
  scroll-margin-top: 100px;
}

.section-title small {
  text-transform: uppercase;
  color: #cc6699;
}

/** CARDS **/

.card-hover {
  transition: 0.3s;
  border: none;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card p {
  font-size: 17px;
  padding: 5px 0px 10px 0px;
}

.icon-box {
  width: 100%;
  height: 140px;

  background: white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border-bottom: 1px dotted lightgray;
  padding-bottom: 10px;
}

.card-title {
  font-weight: 600;;
}

.card-city {
  font-style: italic;
  color: #636262;
}

.icon-box img {
  max-height: 120px;
  width: auto;
  max-width: 100%;
}

/** FOOTER **/

footer {
  padding: 40px 0;
}

.scroll-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #636363;
  color: #fff;
  cursor: pointer;
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  transition-duration: 0.1s;
}

.scroll-to-top:hover {
  background: #cc6699;
  transform: scale(1.2);
  transition-duration: 0.3s;
} 

.scroll-to-top.is-visible {
  display: flex;
}

.scroll-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-typo {
  color: white;
  font-size: 16px;
}

.footer-typo a {
  color: white;
  font-size: 16px;
  text-decoration: underline;
  transition: 0.1s;
}

.footer-typo a:hover {
  color: #cc6699;
  text-decoration: none;
}

/** Contact **/

.contact-left img {
  /*border: 1px solid pink;*/
  width: auto;
  max-width: 400px;
}

.contact-right{
  
}