/* Alle Elemente können (und sollen) verändert werden. */
html{

  --color1: #3857C7;
  --color1a: hsl(226.99, 56.08%, 50%);
  --color2: #D173AF;
  --color2a: hsl(321.7, 50.54%, 50%);
  --color3: #6B4A37;
  --color4: #FFEBFE;
  --color5: #000;
  --color6: #fff;
  --bg-color-body: white;
  --bg-color-darker: rgba(230,230,230,1);

  font-family: Haylard-Display-Regular, Balto-Book, Arial, Helvetica, sans-serif;

  --global-border-radios: 5px;
  
}

body {
  color: var(--color5);
  background-color: var(--bg-color-darker);
}

header{
  background: var(--color1);
  padding: 1.3em 0em 0.85em 0em;
  position: relative;
}

header::before{
  content: '';
  width: 100%;
  height: 7vw;
  max-height: 85px;
  top: 100%;
  position: absolute;
  z-index: 10;
  background: linear-gradient(to bottom right, var(--color1) 49%, transparent 50%);
  pointer-events: none;
}

main::before{
  content: '';
  height: clamp(110px, 12vw, 200px);
  position: absolute;
  z-index: -20;
  top: clamp(-200px, -12vw, -110px);
  pointer-events: none;
  background-color: var(--bg-color-body);
}

.website-logo{
  position: relative;
  width: 8em;
}

.website-logo a{
  position: absolute;
  top: -2.1rem;
  z-index: 20;
}

.website-name-logo{
  height: 8rem;
  background-color: white;
  padding: 0.85em;
  border-radius: 200px;
}

nav{
  margin-left: auto;
  margin-right: auto;
  max-width: 1350px;
}

nav ul {
  font-weight: bold;
}

nav ul a{
  background: white;
  border-radius: 300px;
  margin: 0;
  font-size: 1.04rem;
  padding: 0.67em 1.1em;
}

nav ul a:hover{
  background: linear-gradient(to bottom, var(--color2) 60%, var(--color2a) 110%);
  color: white;
  text-decoration: none;
}

nav ul li {
  margin: 0;
  padding: 0;
}

nav ul li a:hover{
  color: white;
  text-decoration: none;
}


.navbar-toggler {
  border-color: #eee !important;
}

.navbar-toggler:hover {
  border-color: white !important;
  background: var(--color2);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; 
}


.btn{
  background: linear-gradient(to right bottom, var(--color1a) 50%, var(--color2) 100%);

  border: white 1px solid;
  color: white;
  border-radius: 200px;
  padding: 0.5em 1em;
}

.btn:hover{
  background: linear-gradient(to bottom, var(--color2) 60%, var(--color2a) 110%);
  border: white 1px solid;
  color: white;
}

.btn-outline-success:focus,
.btn:focus,
button.btn:focus {
border: 1px solid red !important;
}

.btn svg{
  transform: translate(0px, -1px);
}



.btn-outline-success{
  height: 3rem;
  aspect-ratio: 1/1;
  border-radius: 300px;
}

.form-inline{
  width: 33%;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-flow: row;
  gap: 1em;
  height: 100%;
}

.form-control{
  border: 1px solid white;
  background-color: white;
  color: #444;
  width: auto;
  height: 3rem;
  min-width: 100%;
  border-radius: 300px;
  padding-left: 1.5rem;
  font-family: Haylard-Display-Medium;
  font-size: 1.1rem;
  border: 3px solid white;

  transition: 100ms;
}

.form-control:hover{
  border: 3px solid var(--color2);
  transition: 100ms;
}

.form-control:focus{
  border: 3px solid var(--color2);
  transition: 100ms;
}

.website-logo img{
  z-index: 20;
}

.website-logo img:hover{
	animation: logo-hover 0.4s forwards;
	animation-delay: 0.1s;
}

@keyframes logo-hover{
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(7deg);
	}
}

main{
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color-body);
  padding-bottom: 4.2em;
  margin-top: clamp(150px, 15vw, 170px);
  position: relative;
}

#carousel-div{
  display: flex;
  align-items: stretch;
}

#carouselExampleControls {
  margin-bottom: 3.375rem;
}

#myCarousel{
  --carousel-width: 1000px;
  max-width: var(--carousel-width);
}

.header-image-item{
  position: relative;
  width: 100%; 
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: auto; 

}

.header-image-item img {
  object-fit: cover; 
  aspect-ratio: 16 / 9;
  
}

.header-image-item p{
  position: absolute;
  bottom: -0.6em;
  left: 1em;
  color: #ddd;
  font-size: 0.8em;
  text-shadow: #777 1px 1px 1px;
}
.header-image-item a{
  color: #ddd;
}

.carousel-inner{
  display: flex;
  align-items: center;
  height: 100%;
}

.carousel-item{
  height: clamp(350px, 47.46vw, 475px);
  max-height: calc(0.4746 * var(--carousel-width));
  position: relative;
  min-height: 100%;
}

.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.5) 10%, rgba(0, 0, 0, 0) 30%);
  z-index: 5; 
  pointer-events: none;
}

.carousel-item img{
  display: block;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.carousel-item h2{
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 0.85em;
  margin-bottom: 0.675em;
  color: white;
  font-size: clamp(1.7rem, 4.2vw, 2.35rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  z-index: 10;
  text-align: left;
  max-width: 83%;
}

.carousel-control-prev:hover{
  background: linear-gradient(to right, rgba(30, 30, 30, 0.2) 10%, rgba(0, 0, 0, 0) 100%);
}
.carousel-control-next:hover{
  background: linear-gradient(to left, rgba(30, 30, 30, 0.2) 10%, rgba(0, 0, 0, 0) 100%);
}

#carousel-text{
  flex: 1;
  padding: 2.5rem;
  background: linear-gradient(to right bottom, var(--color1) 50%, var(--color2) 105%);
  color: white;

  display: flex;
  flex-flow: column;
  justify-content: center;
}

#carousel-text p{
  font-size: 1.0rem;
}

#carousel-text h1{
  text-align: left;
  color: white;
  background: linear-gradient(to bottom, var(--color2) 70%, var(--color2a) 110%);
  padding: 0.15em 1.35em 0.25em 0.5em;
  font-size: 2.1rem;
  margin-bottom: 0.42em;
  width: fit-content; 
}

#btn-carousel-text{
  font-size: 0.93rem;
  margin-top: 0.5rem;
  background-color: white;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 10px;
  width: fit-content;
}

#btn-carousel-text:hover{
  color: white;
  background: linear-gradient(to bottom, var(--color2) 70%, var(--color2a) 110%);

}


.grid-section{
  padding: 5.75em 2.5em;
}

.grid-section h1{
  color: #D173AF;
  text-align: left;
  margin-bottom: 0.85em;
}

.myGrid{
  display: grid;
  gap: 1.0em;
}

.myGridItem {
  text-align: center;
  background-color: #3857C7;
  color: white;
  border-radius: 15px;
  padding: 2.2em 1.7em;
  transform: scale(1);
  transition: transform 0.1s ease-in-out;
}

.myGridItem:hover{
	transform: scale(1.03);
}

.myGridItem p {
  font-size: 1rem;
}

.myGridItem h2{
  font-size: 1.7rem;
}

.regular-container{
  border-top: 1px solid #D173AF;
  border-bottom: 1px solid #D173AF;
  background-color: white;
  padding: 6.5em clamp(2.5em, 2.5em, 2.5em);
  text-align: left;
}

.regular-container h1{
  text-align: left;
  color: #D173AF;
  font-size: 1.7em;
  margin-bottom: 0.42em;
  font-size: 2.4rem;
}


.regular-container p{
  font-size: 1.25rem;
  line-height: 1.7rem;
  
}

.article-container{
  padding: 2em clamp(2.5em, 6vw, 10em);
  border: none;
}

.article-container p{
  font-weight: normal;
}

.article-container p br{
  margin-bottom: 1em;
}

.article-container p.ki-disclaimer{
  font-size: 1em;
}

.quellen-div{
  display: flex;
  flex-flow: row;
  width: fit-content;
  gap: 0.5em;
}


.card {
  margin: 2.5em 2.5em;
  padding: 2em;
}

footer {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color-body);
  padding: 2.5em;
}

.footer-list{
  list-style: none;
  display: flex;
  gap: 1em;
}

footer p a{
  font-size: 1rem;
}

h1 {
  text-align: center;
  font-size: 2.3rem;
}

audio{
  margin-left: auto; 
  width: 80%;
}

ul.list-all-articles{
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 1em;
  padding: 0;
}
ul.list-all-articles a:hover{
  text-decoration: none;
}
ul.list-all-articles a{
  color: white;
  padding: 1.1em;
  display: block;
}
  
ul.list-all-articles li{
  color: white;
  background: var(--color2);
  width: fit-content;

}

ul.list-all-articles li:hover{
  text-decoration: none;
  background-color: var(--color3);
}

.stylized-text{
  background: linear-gradient(to bottom, var(--color2) 60%, var(--color2a) 110%);
  color: white;
  font-weight: bold;
  padding: 0 0.2em;
  border-radius: 5px;
}

/* ---- S E A R C H   R E S U L T S -----*/
.results-wrapper{
  display: flex;
  flex-flow: column;
  gap: 2em;
}

.results-wrapper a:hover{
  text-decoration: none;
}

.results-wrapper a:hover .search-result-header{
  color: var(--color2);
}

.results-wrapper a:hover .search-result-text{
  color: #111;
}

.results-wrapper a:hover .search-result{
  border: 1px solid var(--color2);
}

.search-result{
  max-width: 700px;
  display: flex;
  flex-flow: column;
  border: 1px solid var(--color3);
  padding: 0.8rem;
  border-radius: 5px;
}

.search-result-header{
  font-weight: bold;
  color: var(--color1);
  font-size: 1.1rem;
  margin-bottom: 0.1rem;

}

.search-result-text{
  color: grey;
}

/* ---- G E N E R I C S ---- */

h1, h2, h3, h4, h5 {
  font-family: Haylard-Display-Medium, Balto-Medium, Arial, Helvetica, sans-serif;
}

a{
  color: var(--color2);
}

p{  
  font-size: large;

}


/* ----- F O N T S ----- */
@font-face{
  font-family: Balto-Book;
  src: url(assets/Balto-Book.ttf);
  font-weight: normal;
}

@font-face{
  font-family: Balto-Light;
  src: url(assets/Balto-Light.ttf);
  font-weight: 100;
}

@font-face{
  font-family: Balto-Medium;
  src: url(assets/Balto-Medium.ttf);
  font-weight: bold;
}

@font-face{
  font-family: Haylard-Display-Regular;
  src: url("assets/Haylard_Display_Regular.otf");
  font-weight: normal;
}

@font-face{
  font-family: Haylard-Display-Medium;
  src: url("assets/Haylard_Display_Medium.otf");
  font-weight: bold;
}

/* --------- M E D I A   Q U E R Y ------------------------------------------------------*/

@media screen and (max-width:640px){ /*M O B I L E mobile*/
	footer,
  body,
  main,
  main::before {
		width: 100%;
		--global-border-radius: 0px;
		--header-padding: var(--main-space);
		}

  #myCarousel{
    margin-top: -1.25em;
  }

  main{margin-top: 7.5rem}

  header{
    padding: 0em 0em 0.0em 0em; 
  }

  .website-logo{
    position: relative;
    width: 5em;
    margin-top: 1.85em;
  }
  
  .website-logo a{
    position: absolute;
    top: -2.1rem;
    z-index: 20;
  }
  
  .website-name-logo{
    height: 7rem;
    padding: 0.85em;
    border-radius: 200px;
  }


  .navbar-toggler{
    transform: scale(0.9);
  }

  .form-inline{
  gap: 0.0em;
  font-size: 0.2rem;
  }

  .form-control{
    font-size: 1rem;
    transform: scale(0.9);

  }

  .btn-outline-success{
    transform: scale(0.9);

  }

  .regular-container,
  .grid-section{
    padding-left: 2rem;
    padding-right: 2rem;
  }  


}


@media screen and (min-width:640px){ /*T A B L E T */
	nav,
  footer,
  main,
  main::before{
		width: 100%;
	}
	
	div.myGrid{
	grid-template-columns: 1fr 1fr;
	}

}

@media screen and (max-width:990px){
	html{
	}

  #carousel-div{
   flex-flow: column; 
  }

  #carousel-text{
    padding-top: calc(6em - 5vw);
    padding-bottom: calc(6em - 5vw);
  }

  #navbarMenu{
    width: 100%;
  }
  nav ul{
    margin-top: 4em;
    width: 100%;
    flex-direction: column;
    align-items: end; 
    padding: 0;
    background: white;
    border-radius: 10px;
  }

  nav ul li{
    width: 100%;
    text-align: center;
    border-radius: 0;
  }
  
  nav ul li a {
    display: block; 
    border-radius: 0;
    padding: 0.4em 0.7em;

  }

  nav ul li a:hover{
    background: var(--color2);
  }
  .form-inline{
    width: 40%;
    margin-right: auto;
    transform: translate(-1rem);
    font-size: 1rem;

  }

  footer ul{
    flex-flow: column;
  }

  .card{
    padding: 0em;
  }

  .quellen-div{
    flex-flow: column;
    width: fit-content;
  }

  .quellen-div a{
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    text-align: left;
    justify-content: start;
  }
}

@media screen and (min-width:990px){ /*D E S K T O P*/
  body {
		/*width: 70%;*/
    width: 100%;
		}

  nav,
  footer,
  main,
  main::before{
    min-width: 973px;
    max-width: 1350px;
  }
	
	div.myGrid{
	grid-template-columns: 1fr 1fr 1fr;
	}

  #carousel-div{
    flex-flow: row;
  }

  #myCarousel{
    width: 65%;
  }

}

@media screen and (min-width:1830px) {
	body {
		/*width: 1281px;*/
	}
}

.form-control{
  max-width: 180px;
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar-toggler {
  margin: 0;
  padding: 0.5rem;
}

.navbar-collapse {
  flex-grow: 0;
  justify-content: flex-end;
}

.form-inline {
  margin-left: auto;
}