/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.row{
  margin-right: 0 !important;
}

a{
  text-decoration: none;
}

.mobile-disabled{
  display: none;
}

.mobile-enabled{
  display: block;
}

.disabled{
  display: none;
}

.tr{
  text-align: right;
  padding-right: 24px;
}

/* Individual Spacer */

/* CI */
h1{
  font-size: 56px;
  position: relative;
  z-index: 1;
  font-family: 'Roboto', sans-serif;
  color: #3C3C3C;
}

h4{
  font-size: 24px;
  font-family: Roboto, sans-serif;
}

p{
  font-size: 18px;
  font-family: 'Barlow Condensed', sans-serif;
}

.hb{
  font-weight: 600;
}

hr{
  border: 2px solid #5a2306;
}

.header-underline{
  margin-bottom: 32px;
  height: 50px;
  position: relative;
  z-index: 0;
  background: #ffb389;
  width: 100%;
  margin-top: -40px;
}

.header-underline-secondary{
  margin-bottom: 32px;
  height: 50px;
  position: relative;
  z-index: 0;
  background: #7FB283;
  width: 100%;
  margin-top: -40px;
}

.bu-small{
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.35);
  box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.35);
}

.color-inverted{
  background-color: white;
  color: #BF4C0C;
}
.color-inverted:hover{
  background-color: #172E08;
  color: white;
}

/*=======================*/


#navbar{
  transition: background-color 0.3s;
  position: sticky;
  top: 0px;
  padding: 8px;
  display: none;
  z-index: 201;
}

.scrolled{
  background-color: white;
  opacity: 1;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.35);
  box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.35);
}


.navbarul {
  text-align: center;
  margin-top: 16px;
}

.navbarli {
  display: inline-block;
  padding: 8px;
  font-size: 22px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.navbarli:hover{
  cursor: pointer;
}

.burgermenu{
  font-size: 32px;
  background-color: #BF4C0C;
  color: white;
  padding: 16px;
  border-radius: 8px;
  position: fixed;
  z-index: 100;
  top: 3%;
  right: 3%;
  transition: background 1.0s ease;
}

.scrolled-mobile{
  background: #172D09;
  transition: background 1.0s ease;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
}

#closingIcon{
  font-size: 32px;
  margin-top: 16px;
}

#mobileMenuAreaOpposite{
  width: 50%;
  float: left;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 200;
  left: 0;
}

.mobileMenuArea {
  width: 50%;
  float: right;
  background: white;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 200;
  right: -50%; /* Menü außerhalb des Bildschirms */
  transition: right 0.3s ease; /* Übergangsanimation */
}

/* Zustand des Menüs (sichtbar) */
.mobileMenuArea.open {
  right: 0; /* Menü in den sichtbaren Bereich verschieben */
}

.mobileMenuArea.close{
  right: -50%;
}

.mobileMenuContent > ul > li{
  list-style-type: none;
  text-align: right;
  margin-right: 32px;
  margin-top: 16px;
  font-size: 24px;
  font-weight: 500;
}

#hero {
  background: url("../assets/hero-svg/heroimage.svg") rgba(191, 76, 12, 0.2);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  margin-top: -100px;
}

#welcome{
  border-top: 16px #BF4C0C solid;
  transition: border-top-color 0.4s ease;
}

#logobox{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#logo {
  width: 50%;
}

.button-big{
  padding: 32px 48px;
  border-radius: 8px;
}
.button-small{
  padding: 16px 32px;
  border-radius: 8px;
}
.icon-first{
  padding-right: 8px;
}
.icon-last{
  padding-left: 8px;
}

.box-left{
  padding: 32px 64px;
  width: 100%;
}

#bildbox_ausschreibungen{
  background-position: left;
  background-size: cover;
  background-attachment: fixed;
  height: auto;
  background-repeat: no-repeat;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}


.accordion {
  width: 100%;
  padding: 16px;
  overflow: hidden;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #BF4C0C;
  padding: 10px 20px;
  cursor: pointer;
}

.accordion-title {
  font-size: 18px;
  color: #333;
}

.accordion-icon {
  font-size: 18px;
  color: #333;
  transition: transform 0.2s ease;
}

.accordion-content {
  display: none;
  padding: 20px;
  background-color: #fff;
}

.accordion-line {
  height: 2px;
  background-color: #BF4C0C;
  margin: 0;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-header.active + .accordion-content {
  display: block;
}

.accordion-content > span > i{
  padding-right: 8px;
}

#section_rahmenprogramm_top{
  background: url('../assets/rahmenprogramm/bgrahmenprogramm.svg');
  background-position: center;
  background-attachment: scroll;
  background-size: cover;
  height: 920px;
}

#section_rahmenprogramm_bottom{
  background: #235B30;
}

.cardelem{
  width: 375px;
  height: 350px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: white;
  margin: 32px;
  border-radius: 8px;
}

.hinweis{
  font-size: 18px;
  background: #F4F4F4;
  padding: 24px;
  border-radius: 8px;
  margin-top: -32px;
}

.hinweis-mobile{
  font-size: 24px;
  background: #F4F4F4;
  padding: 24px;
  border-radius: 8px;
  width: 100%;
}

.eintrag{
  width: 100%;
  border-radius: 24px;
  text-align: center;
  padding: 32px;
  font-size: 24px;
  color: white;
  margin-bottom: 16px;
}
#footer-content{
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer-link > a {
  color: white;
}

.br-100{
  border: 4px solid rgba(72, 181, 127, 0.45);
}

/* Media Queries */
@media (min-width: 576px){
  #bildbox_ausschreibungen{
    background: url('../assets/images/Bild_16.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: auto;
    background-repeat: no-repeat;
  }

  .desktop-only{
    display: none;
  }

  #hero{
    background-attachment: fixed;
    height: 100vh;
    background-position: left;
  }

  #logo{
    width: 90%;
  }

  #section_rahmenprogramm_top{
    margin-top: -320px;
  }

  .header-special{
    padding-top: 576px;
    color: white !important;
    font-size: 64px !important;
  }

  #section_ausschreibungen{
    flex-direction: column-reverse;
  }

  #bildbox_ausschreibungen{
    height: 500px;
    width: 100%;
  }

  .box-right{
    height: 500px;
  }

  #schwimmenMapMobile{
    background: url('../assets/maps/Schwimmen.jpg') rgba(191, 76, 12, 0.37);
    background-blend-mode: multiply;
    height: 435px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
  }
  #laufenMapMobile{
    background: url('../assets/maps/Laufen.jpg') rgba(191, 76, 12, 0.37);
    background-blend-mode: multiply;
    height: 435px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
  }
  #radMapMobile{
    background: url('../assets/maps/Radfahren.jpg') rgba(191, 76, 12, 0.37);
    background-blend-mode: multiply;
    height: 435px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: auto;
  }

}

/* Media Queries */

@media (max-width: 992px){
  #section_rahmenprogramm_bottom{
    margin-top: -128px;
  }
}

@media (min-width: 992px){
  .mobile-disabled{
    display: block;
  }

  #hero{
    background-attachment: fixed;
    height: 99vh;
  }

  #section_rahmenprogramm_top{
    margin-top: -256px;
  }

  .header-special{
    padding-top: 520px;
    color: white !important;
    font-size: 104px !important;
  }

  .mobile-enabled{
    display: none;
  }
  #mobilenav{
    display: none;
  }
  #navbar{
    display: block;
  }
  .box-left{
    padding: 32px 64px;
    width: 55%;
    border-right: 16px white solid;
  }

  #section_ausschreibungen{
    flex-direction: row;
  }

  #bildbox_ausschreibungen{
    height: auto;
    background-attachment: scroll;
    width: 45%;
  }

  .box-left{
    padding: 32px 64px;
    border-right: 16px white solid;
    width: 65%;
  }

  .map-container{
    height: 800px;
    width: 100%;
  }

  .map-controls{
    width: 45%;
    height: 100%;
    background: rgba(255, 255, 255, 0.76);
    overflow-x: auto;
    padding-bottom: 32px;
    float: right;
  }

  #controlArea{
    position: sticky;
    top: 0;
    padding-bottom: 16px;
    background: white;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
  }

  #areaToClick{
    float: left;
    position: relative;
    z-index: 200;
    height: 100%;
    width: 55%;
  }

  #schwimmen, #laufen, #radfahren, #alle, #closeControls{
    padding: 8px 16px;
    background: #172E08;
    margin-top: 16px;
    color: white;
    margin-right: 4px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
  }

  #closeControls{
    margin-right: 8px;
  }

  #alle{
    margin-left: 8px;
  }

  #closeControls, #showMapControls{
    cursor: pointer;
  }

  #map-container:has(#schwimmen:hover){
    background-image: url('../assets/maps/Schwimmen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#laufen:hover){
    background-image: url('../assets/maps/Laufen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#radfahren:hover){
    background-image: url('../assets/maps/Radfahren.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#alle:hover){
    background-image: url('../assets/maps/AlleStrecken.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  .bg-run{
    background-image: url('../assets/maps/Laufen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-bike{
    background-image: url('../assets/maps/Radfahren.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-swim{
    background-image: url('../assets/maps/Schwimmen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-default{
    background-image: url('../assets/maps/AlleStrecken.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  .text-box{
    padding: 32px;
    width: 90%;
    height: fit-content;
    background: #f6f6f6;
    border-radius: 8px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.16);
  }

  .icon-size-m{
    width: 80px;
    height: 80px;
  }

  #controlButtons > div > i{
    display: none;
  }

}

@media (min-width: 1000px){

  .map-container{
    height: 800px;
    width: 100%;
  }
}

@media (min-width: 1200px){
  #controlButtons > div > i{
    display: inline;
  }
}

@media (min-width: 1190px){
  .map-container{
    height: 1000px;
    width: 100%;
  }
}

@media (min-width: 1400px){
  .header-special{
    padding-top: 450px;
    color: white !important;
    font-size: 128px !important;
  }

  .mobile-disabled{
    display: block;
  }

  .disable-992{
    display: block;
  }

  #logo{
    width: 55%;
  }

  #bildbox_ausschreibungen{
    background-position: left;
    background-size: cover;
    background-attachment: scroll;
    height: auto;
    background-repeat: no-repeat;
  }


  .map-container{
    height: 1200px;
    width: 100%;
  }

  .map-controls{
    width: 45%;
    height: 100%;
    background: rgba(255, 255, 255, 0.76);
    float: right;
  }

  #areaToClick{
    float: left;
    height: 100%;
    position: relative;
    z-index: 200;
    width: 55%;
  }

  #schwimmen, #laufen, #radfahren, #alle, #closeControls{
    padding: 8px 16px;
    margin-right: 16px;
    font-size: 16px;
    background: #172E08;
    color: white;
    border-radius: 8px;
  }

  #schwimmen, #laufen, #radfahren, #alle > i{
    display: block;
  }

  #alle{
    margin-left: 32px;
  }

  #map-container:has(#schwimmen:hover){
    background-image: url('../assets/maps/Schwimmen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#laufen:hover){
    background-image: url('../assets/maps/Laufen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#radfahren:hover){
    background-image: url('../assets/maps/Radfahren.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  #map-container:has(#alle:hover){
    background-image: url('../assets/maps/AlleStrecken.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }

  .bg-run{
    background-image: url('../assets/maps/Laufen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-bike{
    background-image: url('../assets/maps/Radfahren.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-swim{
    background-image: url('../assets/maps/Schwimmen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
  .bg-default{
    background-image: url('../assets/maps/AlleStrecken.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
  }
}