@import url('https://fonts.cdnfonts.com/css/comic-neue');
@import url('https://fonts.cdnfonts.com/css/caveat');

 body {
  font-family: 'Comic Neue', sans-serif;
  font-weight: 700;
}  


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

.slide-content {
  display: inline-block;
  position: relative;
}

.centered-image {
  display: block;
  margin: 0 auto; /* Zentriert das Bild horizontal */
  max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als der Slider ist */
}

.center-line {
  display: flex;
  justify-content: center;
}

.flyerfoerdertext {
  text-align: center;
}

/* Beginn SLider*/




/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Ende Slider*/






/* Slider2 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container2 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides2 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot2 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot2:hover {
  background-color: #717171;
}

/*******************************************************/
/* Slider3 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container3 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides3 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot3 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot3:hover {
  background-color: #717171;
}
/**********************************************************/
/* Slider4 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container3 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides4 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot4 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot4:hover {
  background-color: #717171;
}
/**********************************************************/

/* Slider5 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container5 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides5 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot5 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot2:hover {
  background-color: #717171;
}

/*******************************************************/

/* Slider6 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container6 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides6 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot6 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot2:hover {
  background-color: #717171;
}

/*******************************************************/
/* Slider7 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container7 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides7 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot7 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot2:hover {
  background-color: #717171;
}

/*******************************************************/

/*******************************************************/
/* Slider8 */
/* Hide the images by default */
/* Slideshow container */
.slideshow-container8 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides8 {
  position: relative;
  width: 100%; /* Oder eine feste Breite */
  text-align: center; /* Zentriert den Inhalt horizontal */
}

/* The dots/bullets/indicators */
.dot8 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot2:hover {
  background-color: #717171;
}

/*******************************************************/





.lineDown hr{
  background: green;
  border: none;
  height: 2px;
  width: 90%;
 }







/* styling Tabelle */
table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  word-break:normal;
}

td {
  padding: .5em;
  vertical-align: top;
  border: 1px solid #bbbbbb;
}

th {
  padding: .5em;
  text-align: left;
  border: 1px solid #bbbbbb;
  border-bottom: 3px solid #bbbbbb;
  background:#f4f7fa;
}
/* Ende Styling, anfang scroll */

.table-scrollable {
width: 100%;
overflow-y: auto;
margin: 0 0 1em;	
}

.table-scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
/* Ende Tabelle */



:root{

  --background-color: #0b7254;

  --darker-backgound-color: #eb68;

  --accent-color: #41DCE1;

  --text-color: white;

  --navbar-height: 60px;

}



*{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

  text-decoration: none;

  line-height:160%

  }

  

  .navbar{

	height: var(--navbar-height);

	width: 100%;

	padding: 19px 30px;

	background-color: var(--background-color);

	position: relative;

  }

  .navbar .nav-header{

	display: inline;

  }

  .navbar .nav-header .nav-logo{

	display: inline-block;

	margin-top: -7px;

  }

  .navbar .nav-links{

	display: inline;

	float: right;

	font-size: 18px;

  

  }

   

  .navbar .nav-links .loginBtn{

	display: inline-block;

	padding: 5px 15px;

	margin-left: 20px;

	font-size: 17px;

	color: rgb(9, 14, 90);

  }

  .navbar .nav-links a {

	padding: 10px 12px;

	text-decoration: none;

	font-weight: 550;

	color: white;

  }

  /* Hover effects */

  .navbar .nav-links a:hover{

	background-color: rgba(0, 0, 0, 0.3);

  }

   

  /* responsive navbar toggle button */

  .navbar #nav-check, .navbar .nav-btn{

	display: none;

  }


 
/************************Begin media**************/



   

  @media (max-width:1110px) {

	  .navbar .nav-btn{

	   display: inline-block;

  	  position: absolute;

	    top: 0px;

  	  right: 0px;

  	}

  	.navbar .nav-btn label {

  	  display: inline-block;

  	  width: 80px;

  	  height: 70px;

	    padding: 25px;

  	}

  	.navbar .nav-btn label span {

	    display: block;

	    height: 10px;

  	  width: 25px;

  	  border-top: 3px solid #eee;

  	}

  	.navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {

  	  background-color: var(--background-color);

  	  transition: all 0.5s ease;

  	}

  	.navbar .nav-links{

  	  position: absolute;

  	  display: block;

  	  text-align: center;

  	  width: 50%;

  	  background-color: var(--background-color);

  	  transition: all 0.3s ease-in;

  	  overflow-y: hidden;

  	  top: 70px;

  	  right: 0px;

  	}

  	.navbar .nav-links a {

  	  display: block;

  	}

   

  	/* when nav toggle button not checked */

  	.navbar #nav-check:not(:checked) ~ .nav-links {

	    height: 0px;

  	}

   

  	/* when nav toggle button is checked */

  	.navbar #nav-check:checked ~ .nav-links {

	    height: calc(100vh - 70px);

  	  overflow-y: auto;

  	}

  	.navbar .nav-links .loginBtn {

  	  padding: 10px 40px ;

      margin: 20px;

      font-size:  18px;

	    font-weight: bold;

  	  color: var(--background-color);

	  }

	  /* Responsive dropdown code */

	  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {

	    float: none;

  	  width: 100%;

	  }

	  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {

	    position: relative;

  	  background-color: var(--background-color);

	    top: 0px;

	   left: 0px;

	  }

	  /* Text color */

	  .navbar .nav-links .drop-content a {

	    color: var(--text-color);

	  }  

    .table-scrollable {
      font-size: 0.7em;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    .dot2 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
   
    .dot3 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .dot4 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .dot5 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .dot6 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .dot7 {
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }



  }

   



  @media (min-width: 1111px){

    .grid-container {
      display: grid;
      grid-template-columns: 2fr 3fr 3fr 1fr;
      grid-template-rows: 150px 1fr 1fr;
      gap: 1px 30px;
      grid-template-areas:
        "oben oben oben oben"
        "links a1 a2 rechts"
        "links a1 a2 rechts";
    }


    .grid-container-kollegium {
      display: grid;
      grid-template-columns: 2fr 3fr 3fr 1fr;
      grid-template-rows: 1fr 1fr; /* Entfernen Sie die Zeile für oben */
      gap: 1px 30px;
      grid-template-areas:
        "links a1 a2 rechts"
        "links a1 a2 rechts";
    }

    .oben { grid-area: oben; }    

    .links { grid-area: links; }
    
    .rechts { grid-area: rechts; }

    .a1 { grid-area: a1; }

    .a2 { grid-area: a2; }

    

  }


/************************ Ende media ***********************/



  /* Dropdown menu CSS code */

  .dropdown{

	position: relative;

	display: inline-block;

  }

  .drop-content, .drop-content2 {

	display: none;

	position: absolute;

	background-color: var(--background-color);

	min-width: 120px;

	font-size: 16px;

	top: 34px;

	z-index: 1;

	box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);

  }

  /* on hover show dropdown */

  .dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {

	display: block;

  }

  /* drondown links */

  .drop-content a {

	padding: 12px 10px;

	border-bottom: 1px solid rgb(197, 197, 250);

	display: block;

	transition: all 0.5s ease !important;

  }

  .dropBtn .drop-content a:hover {

	background-color: rgb(230, 230, 230);

  }

  .dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {

	background-color: rgba(0, 0, 0, 0.3);

  }

  .dropdown2 .drop-content2 {

	position: absolute;

	left: 120px;

	top: 126px;

  }

  .dropBtn2 i {

	margin-left: 15px;

  }


body {
    background-color: rgb(128, 128, 128); 
    hyphens: auto;
    font-family: 'Comic Neue', sans-serif;
}



.container{
    margin: 2% 2% 2% 2%;
    font-family: 'Comic Neue', sans-serif;
}


.main{
    background-color: rgb(255, 255, 255);
    font-family: 'Comic Neue', sans-serif;
    color:rgba(43, 41, 41, 0.884);
    padding: 5px 50px 50px 50px;
    font-size: 1.1em;
    letter-spacing: 0.005em;
}



.main h1{
    text-align: center;
    color:#f2ac5c;
    font-family: 'Caveat', cursive;
    font-size: 2.5em;
}


.main h2{
    text-align:left;
    color:#f2ac5c;
    font-family: 'Cavest', cursive;
    font-size: 1.5em;
}

.main h3{
    font-size: 1.3em;   
}

.kollegen {
  display: flex;
  justify-content: center;
  max-width: 100%;
  height: auto;
  align-items: flex-start; /* Text oben ausrichten */
  margin-bottom: 0; /* Fügt keinen Abstand nach unten hinzu */
}


.textmitte{
    text-align: center;
}




.picmitte {
  display: flex;
  justify-content: center; /* Zentriert das Bild horizontal */
  align-items: center; /* Zentriert das Bild vertikal (optional) */
  width: 100%; /* Container nimmt die volle Breite ein */
}

.picmitte img {
  width: 40%; /* Festlegung der Bildbreite */
  max-width: 100%; /* Bild wird auf Containergröße begrenzt */
}





.main ol{
  list-style-position: inside;
}



.main a{
    color:green;
}



.footer a{
  color:var(--text-color);
  padding-right: 5%;
  padding-left: 5%;
}



.footer nav{
  background-color: var(--background-color);
  color: var(--text-color);
  height: 30px;
  text-align:center;
  font-size: 18px;
}

 .nav-logo a{
   color: var(--text-color);
 }



.linkeseite{
    background-color: rgb(255, 255, 255);
}



.rechteseite{
    background-color: white;
}


hr {
    background:#eb6811;
    border: none;
    height: 2px;
    width: 90%;
   }


.main ol{
    list-style-type:lower-roman;
}

















body {margin:1em;}





.content {

  display: flex;

}





.main {

  flex: 8;	

  order: 2;

}





.linkeseite {

  flex: 1;	

  order: 1;

}





.rechteseite {

  flex: 1;

  order: 3;

}