@font-face {
  font-family: "AcherusGrotesque-Regular";
  src: url('../Fonts/AcherusGrotesqueRegular/font.woff2') format('woff2'), url('../Fonts/AcherusGrotesqueRegular/font.woff') format('woff');
}

@font-face {
  font-family: "AcherusGrotesque-Semibold";
  src: url('../Fonts/AcherusGrotesqueSemibold/font.woff2') format('woff2'), url('../Fonts/AcherusGrotesqueSemibold/font.woff') format('woff');
}

@font-face {
  font-family: "AcherusGrotesque-Bold";
  src: url('../Fonts/AcherusGrotesqueBold/font.woff2') format('woff2'), url('../Fonts/AcherusGrotesqueBold/font.woff') format('woff');
}

@font-face {
  font-family: "AcherusGrotesque-Light";
  src: url('../Fonts/AcherusGrotesqueLight/font.woff2') format('woff2'), url('../Fonts/AcherusGrotesqueLight/font.woff') format('woff');
}

body {
	font-family: AcherusGrotesque-Light;
}

:root{
    --bs-primary-rgb: 175, 202, 11;
	--bs-secondary-rgb: 0, 146, 207;
	--bme-green: #afca0b;	
	--bme-blue: #0092cf;
	--bme-red: #ec6726;
}

#kopfbild {
    background-color: lightgray;
}

#inhalt {
    background-color: white;
}

.kopfzeile-hintergrundbild {
    background-size: cover;
    background-position: center;
    height: 60vh;
}

a {
    color: #343a40;
}

h1 {
	font-family: AcherusGrotesque-Semibold;
	color: #ec6726;
}

h2 {
	font-family: AcherusGrotesque-Regular;
	color: #ec6726;

}

form { 
	margin: 10px;
}

@media screen and (max-width: 575px) {
  #carouselExampleCaptions {
	width: 100%;
	height: 360px;
  }
    .teaser {
	  img {
		width: 280px;
		height: 280px;  
		margin: 1.5em;
		object-position: center;
		object-fit: cover;
	  }
	  header {		
			position: relative;
			width: 280px;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -178%);
			background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
			padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		  }
  }
  .infokreis {
	  img {
		width: 215px;
		height: 215px;
		object-position: center;
		object-fit: cover;
	  }
  }
}

@media screen and (min-width: 576px) {
	.teaser {
	  img {
		width: 225px;
		height: 225px;  
		margin: 1em;
		object-position: center;
		object-fit: cover;
	  }
	  header {		
			position: relative;
			width: 225px;
			top: 75%;
			left: 49.75%;
			transform: translate(-50%, -151%);
			background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
			padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		  }
	}
	.infokreis {
	  img {
		width: 215px;
		height: 215px;
		object-position: center;
		object-fit: cover;
	  }
  }
}

@media screen and (min-width: 768px) {
.teaser {
	  img {
		width: 280px;
		height: 280px;  
		margin: 1.5em;
		object-position: center;
		object-fit: cover;
	  }
	  header {		
			position: relative;
			width: 280px;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -177%);
			background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
			padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		  }
	}
}

@media screen and (min-width: 992px) {
  form {
    width: 70%; /* Breite 70% für Bildschirmbreiten ab 992px und größer */
  }
  #carouselExampleCaptions {
	width: 670px;
	height: 447px;
  }
  .teaser {
	  img {
		width: 280px;
		height: 280px;  
		margin: 1.5em;
		object-position: center;
		object-fit: cover;
	  }
	  header {		
			position: relative;
			width: 280px;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -177%);
			background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
			padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		  }
	}
  .infokreis {
    img {
	  width: 250px;
	  height: 250px;
	  object-position: center;
	  object-fit: cover;
  }
}
}

@media screen and (min-width: 1200px) {
  form {
    width: 60%; /* Breite 60% für Bildschirmbreiten ab 1200px und größer */
  }
  #carouselExampleCaptions {
	width: 800px;
	height: 533px;
  }
  .teaser {
	  img {
		width: 240px;
		height: 240px;
		margin: 1.5em;
		object-position: center;
		object-fit: cover;
	}
		header {		
			position: relative;
			width: 240px;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -175%);
			background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
			padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		  }
  }
  .infokreis {
	  img {
		width: 250px;
		height: 250px;
		object-position: center;
		object-fit: cover;
	  }
  }
}

@media screen and (min-width: 1400px) {
	form {
    width: 50%; /* Breite 50% für Bildschirmbreiten ab 1400px und größer */
  }
	.teaser {
		header {		
		position: relative;
		width: 96.5%;
		top: 90%;
		left: 50%;
		transform: translate(-52.5%, -150%);
		background-color: rgba(255, 255, 255, 0.5); /* Hintergrundfarbe mit Transparenz */
		padding-top: 3px; /* optional: füge etwas Abstand zum Text hinzu */
		}
		img {
			margin: 1em;
			width: 280px;
			height: 280px;
			object-position: center;
			object-fit: cover;
		}
	}
}

#carouselExampleCaptions h5,
#carouselExampleCaptions p {
	background-color: rgba(240, 240, 240, 0.6);
	color: black;
}

#carouselExampleCaptions {
	margin: 1em;
	position: relative;
}

.carousel-caption {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
}

.carousel-inner {
  max-width: 100%;
  max-height: 100%;
  display: flex; /* Flexbox für horizontales Zentrieren */
}

.carousel-item img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto; /* Zentrieren des Bildes */
}

.carousel-control-prev-icon {
	background-image: url("/fileadmin/Icons/chevron-left.svg");
}

.carousel-control-next-icon {
	background-image: url("/fileadmin/Icons/chevron-right.svg");
}

.carousel-control-prev,
.carousel-control-next {
	opacity: 1;
}

textarea {
	height: 10em;
	}

 .form-check {
    margin-bottom: 1em; /*Abstand unten bei Formular-Checkbox*/
}

.form-control {
	margin-bottom: 1em; /*Abstand unten bei Formular-Eingabefeld*/
}

input.add-on {
	margin-right: 0.75em;
}

.btn {
	background-color: var(--bme-blue);
	border: 0;
	margin: 0.75em;
	color: white;
	border-radius: 0.5em;
}

.btn-group > .btn-group:not(:last-child) > .btn {
  border-radius: 0.5em;
}

.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-radius: 0.5em;
}

.btn:hover {
  color: white;
  background-color: var(--bme-blue);
  border-color: var(--bme-blue);
}

.card {
	margin: 1em;
}

.card .btn {
		margin: 0;
}

.copyright {
	font-size: 0.8em;
	margin: 0.5em;
	text-shadow: 2px 2px 2px #000000;
	position: absolute;
	bottom: 1em;
	right: 1.25em;
	transform-origin: bottom right;
	transform: rotate(90deg);
}

.custom-ul {
      list-style: none;
      padding-left: 0;
	  align: middle;
}

.custom-ul li::before {
      content: url('/fileadmin/Icons/chevron-right-menue.svg'); /* Pfad zu deiner SVG-Datei */
      width: 10px; /* Breite des SVG-Symbols */
      height: 10px; /* Höhe des SVG-Symbols */
      margin-right: 5px; /* Abstand zwischen SVG-Symbol und Listenelement */
}

.teaser {
	img {
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7); /* Schatten für das Bild */
	}
	
	a {
		color: black; /* Textfarbe */
		text-decoration: none;
		}
}
		
.infokreis {
	img {	
		margin: 0.75em; 
		border-radius: 75%;
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7); /* Schatten für das Bild */
		object-position: center;
		object-fit: cover;
	}
	a { 
		color: black; /* Textfarbe */
		text-decoration: none;
	}	
}

.offcanvas {
	height: 35vh!important;
}

#bild_zweispaltig {
	img {
		width: 400px;
		height: 300px;
		object-position: 0 15%;
		object-fit: cover;
	}
	font-size: 0.9em;
}

#bild_zweispaltig_abwechselnd {
	img {
		width: 75%;
		height: auto;
	}
	font-size: 0.9em;
}