@charset "UTF-8";
/* CSS Document */

.container-vereinsintro {
  display: flex;
  flex-wrap: wrap;
}

.vereinsintro-text {
  flex: 1;
  order: 1;
  font-size: 1.13em;
	line-height: 1.5em;
  margin: -40px 30px 0 0;
	
}

.vereinsintro-text h2{
	font-size: 1.5em;
	line-height: 0.8em;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.vereinsintro-text h1{
	font-size: 3em;
	font-weight: 900;
	line-height: 0.8em;
	font-family: 'Roboto Slab', serif;
	margin: 0.6em 0 0 0;
}

.vereinsintro-text{
	font-weight: 400;
}


.vereinsintro-image {
  flex: 1;
  order: 2;	
}

.vereinsintro-image img{
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  border-radius: 15px;
}

.vereinsleitung{
	font-family: 'Roboto Slab', serif;
	font-size: 3em;
	font-weight: 800;
	line-height: 0.9em;
	text-transform: uppercase;
	text-align: center;
	margin-top: 24px;
	margin-bottom: 12px;
	/* color: #003B01; */
	color: #FFFFFF;
}

.verein_container{
	display: grid;
    grid-template-columns: repeat(3, 1fr); /* Hier definieren wir 4 Spalten mit gleicher Breite */
    grid-gap: 2%; /* Abstand zwischen den Elementen */
	margin-bottom: 220px;
}

.vereinstapete {
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(182,182,182,1) 100%);
	padding: 25px 0 1px 0;
	border-radius: 15px;
}

.vereinstapete p {
	color: #FFFFFF;
	margin: 0 0 25px 0;
}


.verein_card{
	padding: auto;
}

.verein_name{
	font-size: 1.2em;
	text-align: center;
	margin: 12px 0 6px 0;
	color: #424242;
}

.verein_funktion{
	font-size: 0.9em;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-weight: 900;
	text-transform: uppercase;
	background: #FFFFFF;
    border-radius: 10px;
	box-shadow: 10px 5px 20px #CCCCCC;
	width: 216px;
	margin: 0 auto;
}

.intro .verein_photo{
	height: 200px;
	width: 200px;
	position: relative;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	border:#FFFFFF solid 14px;
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



.timeline {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px 0;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #003D13;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.tlcontainer {
  padding: 15px 30px;
  position: relative;
  background: inherit;
  width: 50%;
}

.tlcontainer.left {
  left: 0;
}

.tlcontainer.right {
  left: 50%;
}

.tlcontainer::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  top: calc(50% - 4px);
  right: -4px;
  background: #003d13;
  border: 0px solid #003D13;
  border-radius: 4px;
  z-index: 1;
}

.tlcontainer.right::after {
  left: -4px;
}

.tlcontainer::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 2px;
  top: calc(50% - 1px);
  right: 4px;
  background: #003D13;
  z-index: 1;
}

.tlcontainer.right::before {
  left: 0px;
}

.tlcontainer .date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 26px);
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
  color: #acaa94;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}

.tlcontainer.left .date {
  right: -100px;
}

.tlcontainer.right .date {
  left: -100px;
}

.tlcontainer .icon {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 9px 0;
  top: calc(50% - 10px);
  background: #003d13;
  border: 0px solid #003D13;
  border-radius: 40px;
  text-align: center;
  font-size: 18px;
  color: #003D13;
  z-index: 1;
}

.tlcontainer.left .icon {
  right: 56px;
}

.tlcontainer.right .icon {
  left: 56px;
}

.tlcontainer .content {
  padding: 30px 90px 30px 30px;
  background: #FFFFFF;
/* background: linear-gradient(138deg, rgba(241,255,227,1) 0%, rgba(201,223,183,1) 100%); */
  position: relative;
  border-radius: 0 500px 500px 0;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	
}

.tlcontainer.right .content {
  padding: 30px 30px 30px 90px;
  border-radius: 500px 0 0 500px;
}

.tlcontainer .content h2 {
  margin: 0 0 10px 0;
  font-size: 1.3em;
  font-weight: 600;
  color: #003D13;
  font-family: 'Roboto Slab', serif;
}

.tlcontainer .content p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: #4D4D4D;
}

@media (max-width: 767.98px) {
	
	.verein_card{
		margin: 0 auto;

	}
	
	.verein_name{
		font-size: 14px;
	}
	
	.verein_funktion{
		font-size: 12px;
	}
	
.container-vereinsintro{
		margin: 0px;
	}	
  .vereinsintro-text,
  .vereinsintro-image {
    flex: 0 0 100%;
  }
  .vereinsintro-text {
    order: 2;
	padding: 0 12px;
	margin-top: -60px;
	flex: 0 0 100%;
  }
	
.vereinsintro-text h1{
    font-size: 2em;
	font-weight: 900;
	margin: 24px 0 0 24px;
  }	
	
.vereinsintro-text h2{
    font-size: 1.3em;
	margin-left: 0px;
  }		
	
  .vereinsintro-image {
    order: 1;
  }
	
	.verein_card,
	.verein_name,
	.verein_funktion{
		width: 180px;
	}	
	
	
	
  .timeline::after {
    left: 90px;
  }

  .tlcontainer {
    width: 100%;
    padding-left: 120px;
    padding-right: -0px;
  }

  .tlcontainer.right {
    left: 0%;
  }

  .tlcontainer.left::after, 
  .tlcontainer.right::after {
    left: 86px;
  }

  .tlcontainer.left::before,
  .tlcontainer.right::before {
    left: 86px;
    border-color: transparent #006E51 transparent transparent;
  }

  .tlcontainer.left .date,
  .tlcontainer.right .date {
    right: auto;
    left: 15px;
  }

  .tlcontainer.left .icon,
  .tlcontainer.right .icon {
    right: auto;
    left: 146px;
  }

  .tlcontainer.left .content,
  .tlcontainer.right .content {
    padding: 30px 0px 30px 55px;
    border-radius: 10px 0 0 10px;
  }

	
.tlcontainer .content p {
  font-size: 14px;
}	

.tlcontainer .content h2 {
  font-size: 16px;
}	
}

@media screen and (max-width: 700px) {
 
	
	
.verein_container {
    grid-template-columns: repeat(3, 1fr);
	margin-bottom: 360px;
  }
	
.verein_card{
	padding: auto;
}
	
.vereinsleitung{
	font-size: 2em;
	margin: 24px;
	color: #FFFFFF;
	}
	
	
.vereinsintro-image img{
	border-radius: 0px;
	}	


	
}

@media screen and (max-width: 1100px) {
	
.container-vereinsintro {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}	
	
  .verein_container {
    grid-template-columns: repeat(2, 1fr);
	  margin-bottom: 360px;
  }
	
.intro .verein_photo{
	height: 120px;
	width: 120px;
	position: relative;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
	
}
	
.vereinsintro-text {
  margin: 0;
}
	
		
	
	.intro .verein_photo{
	border:#FFFFFF solid 8px;
}
	
.vereinsintro-image img{
	border-radius: 0px;
	}	
	.vereinstapete {
		border-radius: 0px;
	}	

}

.tlcontainer .date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 20px);
  text-align: center;
  font-size: 1.9em;
  font-weight: bold;
  color: #acaa94;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}