@charset "utf-8";

	html {
		scroll-behavior: smooth;
	}

	body {
		  background-image: url("bg.png"); /* Hintergrundbild */
		  background-attachment: fixed;   /* Bild bleibt beim Scrollen stehen */
		  background-size: cover;         /* passt sich der Fenstergröße an */
		  background-position: top left;  /* immer oben links ausgerichtet */
		  background-repeat: no-repeat;   /* kein Kacheln */
		  margin: 0;
		  min-height: 100vh;
		}


    .content {
	  background-color: rgba(255, 255, 255, 0.5);
      padding: 10px;
	  padding-top: 5px;
      margin: 20px;
      border-radius: 8px;
	  text-align: center;
      display: flex;
      flex-direction: column;       /* Elemente untereinander */
  	  align-items: center;          
  	  justify-content: center; 
    }

	/* Header Text */
	.tex0 { 
		font-family: "Science Gothic", sans-serif;
		font-optical-sizing: auto;
		font-weight: bolder;
		font-style: normal;
		font-size: clamp(24px, 5vw, 40px);
		 font-variation-settings:
			"slnt" 0,
			"wdth" 100,
			"CTRS" 0;   
		padding: 0px;
		margin: 0px;
	}

	/* Small Header Text */
	.tex1 {
		font-family: "Science Gothic", sans-serif;
	  	font-style: normal;
		font-size: clamp(13px, 1.2vw, 16px);
	  	font-variation-settings:
			"slnt" 0,
			"wdth" 100,
			"CTRS" 0;   
	}

	/* Normal Text */
	.tex2 {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: lighter;
		font-size: clamp(12px, 1.2vw, 14px); 
		color: gray;
	}

	/* Medium Header */
	.tex3 {
		font-family: "Science Gothic", sans-serif;
		font-style: normal;
		font-weight: bolder;
		font-size: 1.7vw; 
		color: black;
	}

	.tex4 {
		font-family: "Science Gothic", sans-serif;
		font-style: normal;
		font-weight: bolder;
		font-size: 3.2vw; 
		color: black;	   
	}

	.tex2j {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: lighter;
		font-size: 13px; 
		color: gray;
		text-align: justify;
	}

	.tex2j strong { font-weight: 700; }

	.tex5 {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: lighter;
		font-size: 11px; 
		color: gray;
	}	  

	.tex2pubs {
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: lighter;
			font-size: 15px; 
			color: gray;
			text-align: justify;
		}

	.tex2pubsbold {
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: bolder;
			font-size: 17px; 
			color: gray;
			text-align: justify;
		}



	.container {
    	display: flex;              
     	width: 100%;               
    }
	  
    .box {
      	flex: 1;
  		background-size: contain;
  		background-position: center;
  		background-repeat: no-repeat;
  		aspect-ratio: 1 / 1;

  		display: flex;
  		justify-content: center;  /* horizontal links */
  		align-items: flex-start;      /* vertikal oben */

  		padding: 10px;
		padding-top: 1.7vw;
  		font-weight: bolder;
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		color: black;
		cursor: pointer; /* zeigt Hand-Cursor */
    }
    .box1 { background-image: url("pic00.png"); font-size: 1.7vw; }
    .box2 { background-image: url("pic01.png"); font-size: 1.7vw; }
	.box3 { background-image: url("pic02.png"); font-size: 1.7vw; }


	  p {
		  width: 85%;  
	  }
	    
	  	.divider {
		  display: flex;
		  align-items: center;      /* vertikal mittig */
		  justify-content: center;  /* horizontal mittig */
		  margin: 10px 0;
		}

		.line {
		  flex: 1;                  /* Linie füllt den Platz links/rechts */
		  height: 1px;
		  background-color: lightgray;   /* graue Linie */
		}

		.icon {
		  margin: 0 10px;           /* Abstand zwischen Linien und Bild */
		  height: 40px;             /* Bildgröße anpassen */
		}/* CSS Document */

		.bild-container {
		  width: 90%;      /* Beispielbreite */
		  height: auto;      /* Höhe passt sich automatisch an */
		  display: block;
		  margin: 0px;
		}

		.bild-container img {
		  width: 100%;       /* passt sich der Breite des DIV an */
		  height: 100%;      /* passt sich der Höhe des DIV an */
		  object-fit: cover; /* Bild bleibt vollständig sichtbar */
		  border: 1px solid #ccc; /* hellgrauer Rahmen */

		}

		.containergames {
		  width: 85%;
		  margin: 0 auto;
			padding: 0px;
			vertical-align: top;
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
		  gap: 10px;
		}

		.boxgames {
		  padding: 0px;
		  border: 1px solid gray;
		  display: flex;
		  flex-direction: column; /* Bild oben, Text darunter */
		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
		}

		.boxgames img {
		  width: 100%;   /* exakt Boxbreite */
		  height: auto;  /* behält Seitenverhältnis */
		  display: block;
			 border-bottom: 1px solid gray; /* Strich am unteren Bildrand */
		}

		.boxgames p {
			padding: 10px;       
			padding-right: 5px;
			margin: 0px;
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: lighter;
			font-size: 13px; 
			color: gray;
			text-align: left;
			width: 95%;
		}

		.boxgames strong { font-weight: 700; }

		.boxfoto1 {
		  padding: 0px;
		  display: flex;
		  flex-direction: column; /* Bild oben, Text darunter */
		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
			width: 15%;
			min-width: 100px;
			margin-left: 10%;
		}

		.boxfoto1 img {
			border:  1px solid gray;
		}

		.boxfoto2 strong { font-weight: 700; }

	.boxfoto2 {
			border: 1px solid gray;
			display: flex;
			flex-direction: column; /* Bild oben, Text darunter */
			align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
			justify-content: flex-start; /* Inhalte oben ausrichten */
			margin-left: 20px;
			width: 40%;
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: lighter;
			font-size: 13px; 
			color: gray;
			text-align: left;
			padding: 5px;
		}

	.boxgame1 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 20px;
		width: 50%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: lighter;
		font-size: 13px; 
		color: gray;
		text-align: left;
		padding: 5px;
	}

	.boxgame2 {
		  padding: 0px;
		  display: flex;
		  flex-direction: column; /* Bild oben, Text darunter */
		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
			width: 20%;
			min-width: 150px;
			margin-left: 10%;
		}

	.boxgame3 {
		  border: none;
			display: flex;
			flex-direction: column; /* Bild oben, Text darunter */
			align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
			justify-content: flex-start; /* Inhalte oben ausrichten */
			margin-left: 20px;
			width: 50%;
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: bold;
			font-size: 16px; 
			color: gray;
			text-align: left;
			padding: 5px;
		}
	a.boxgame3 { 
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: bold;
			font-size: 16px; 
			color: gray;
			text-decoration: none;
		}
	a.boxgame3:hover  { 

		}

	.boxout1 {
	  padding: 0px;
	  display: flex;
	  flex-direction: column; /* Bild oben, Text darunter */
	  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  justify-content: flex-start; /* Inhalte oben ausrichten */
		width: 20%;
		min-width: 200px;
		margin-left: 10%;
	}

	.boxout1 iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; }



	.footer {
	  width: 90%;
	  margin: 0 auto;
	}

	.header-box {
	  background-color: #9bd7b3;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10px;
	  width:100%;
	}

	/* Logos links */
	.logos {
	  display: flex;
	  gap: 10px;
	}

	.logosimg1 {
	  min-width: 150px;   /* Mindestgröße */  /* Maximalgröße */
	  width: 10vw;       /* dynamisch zur Fensterbreite */
	  height: auto;      /* Seitenverhältnis bleibt erhalten */
		cursor: pointer;
	}
	.logosimg2 {
	  min-width: 100px;   /* Mindestgröße */  /* Maximalgröße */
	  width: 7vw;       /* dynamisch zur Fensterbreite */
	  height: auto;      /* Seitenverhältnis bleibt erhalten */
		cursor: pointer;
	}

	/* Infos rechts */
	.info {
	  display: grid;
	  grid-template-columns: repeat(1, auto); /* zwei Spalten */
	  gap: 20px;
	  text-align: left;
	  min-width: 150px;
	}

	.info p {
	  margin: 2px 0;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: bold;
		font-size: 10px; 
		color: white;
	}


	.containerscience {
    	display: flex;
		flex-wrap: wrap;   /* erlaubt Umbruch */
		width: 90%;              
    }

.containerres {
    	display: flex;
		width: 100%;              
    }

	.boxscience1 {
	  padding: 0px;
	  display: flex;
	  flex-direction:column;
	  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  justify-content: flex-start; /* Inhalte oben ausrichten */
	  width: 50%;
	  min-width: 450px;
	  margin-left: 30px;
	}

	.boxscience1 img {
		border: none;
	}

	.boxscience2 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 40px;
		width: 30%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: lighter;
		font-size: 13px; 
		color: gray;
		text-align: left;
		padding: 5px;
	}

	.boxscience3 {
		  padding: 0px;
		  display: flex;
		  flex-direction:column;
		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
		  width: 90%;
			margin-left: 5%;
		}

	.boxscience3 img {
		border: none;
	}

	.boxscience4 {
			border: 1px solid gray;
			display: flex;
			flex-direction: column; /* Bild oben, Text darunter */
			align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
			justify-content: flex-start; /* Inhalte oben ausrichten */
			width: 90%;
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: lighter;
			font-size: 13px; 
			color: gray;
			text-align: left;
			padding: 5px;
		margin-left: 5%;
		}

	a.afooter {
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: bold;
		font-size: 10px; 
		color: white;
	}

	a.afooter:hover {
		color: black;
	}

	a.aboxgames  {
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		font-size: 13px; 
		color: gray;
		text-decoration: none;
	}

	a.aboxgames:hover  { 
		font-weight: bold;	
	}

	a.atex2j {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: normal;
		font-size: 13px; 
		color: gray;
		text-align: justify;
		text-decoration: none;
	}

	a.atex2j:hover  { 
		font-weight: bold;	
	}

	a.atex2j2 {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: normal;
		font-size: 13px; 
		color: gray;
		text-align: justify;
		text-decoration: underline;
	}

	a.atex2j2:hover  { 
	
	}


.boxfoto2_v {
			border: 1px solid gray;
			display: flex;
			flex-direction: column; /* Bild oben, Text darunter */
			align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
			justify-content: flex-start; /* Inhalte oben ausrichten */
			margin-left: 20px;
			width: 40%;
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: lighter;
			font-size: 13px; 
			color: gray;
			text-align: left;
			padding: 5px;
		}


	.boxout1_v {
		  padding: 0px;
		  display: flex;
		  flex-direction: column; /* Bild oben, Text darunter */

		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
			width: 20%;
			min-width: 150px;
			margin-left: 10%;
		cursor: pointer;
		border: 1px, solid, gray;
		}

@media (max-width: 600px) {

	
	 body {
      background-image: url("bg.png"); /* Hintergrundbild */
	  background-attachment: fixed;   /* Bild bleibt beim Scrollen stehen */
	  background-size: cover;         /* passt sich der Fenstergröße an */
	  background-position: top left;  /* immer oben links ausgerichtet */
	  background-repeat: no-repeat;   /* kein Kacheln */
	  margin: 0;
	  min-height: 100vh;
	}
		  
	
    .content {
	  background-color: rgba(255, 255, 255, 0.5);
      padding: 5px;
	  padding-top: 2px;
      margin: 10px;
      border-radius: 4px;
	  text-align: center;
      display: flex;
      flex-direction: column;       /* Elemente untereinander */
  	  align-items: center;          
  	  justify-content: center; 
    }

	/* Header Text */
	.tex0 { 
		font-family: "Science Gothic", sans-serif;
		font-optical-sizing: auto;
		font-weight: bolder;
		font-style: normal;
		font-size: clamp(40px, 8vw, 60px);
		 font-variation-settings:
			"slnt" 0,
			"wdth" 100,
			"CTRS" 0;   
		padding: 0px;
		margin: 0px;
	}

	/* Small Header Text */
	.tex1 {
		font-family: "Science Gothic", sans-serif;
	  	font-style: normal;
		font-size: clamp(16px, 2.1vw, 22px);
	  	font-variation-settings:
			"slnt" 0,
			"wdth" 100,
			"CTRS" 0;   
	}
	
	/* Normal Text */
	.tex2 {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: normal;
		font-size: clamp(16px, 2.1vw, 22px);
		color: #424443;
	}
	
	.tex2pubs {
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: normal;
			font-size: clamp(16px, 2.1vw, 22px);
			color: #424443;
	}
	
		.tex2pubsbold {
			font-family: "Verdana", sans-serif;
			font-style: normal;
			font-weight: bolder;
			font-size: clamp(18px, 2.1vw, 23px);
			color: #424443;
	}

	
	/* Medium Header */
	.tex3 {
		font-family: "Science Gothic", sans-serif;
		font-style: normal;
		font-weight: bolder;
		font-size: 3.7vw; 
		color: black;
	}
	
	.tex4 {
		font-family: "Science Gothic", sans-serif;
		font-style: normal;
		font-weight: bolder;
		font-size: 5.2vw; 
		color: black;	   
	}
	
	.tex2j {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: normal;
		font-size: clamp(16px, 2.1vw, 22px);
		color: #424443;
		text-align: justify;
	}

	.tex2j strong { font-weight: 700; }
	
	.tex5 {
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		font-weight: normal;
		font-size: clamp(14px, 2.0vw, 18px);
		color: #424443;
	}	
	
	
	
	.box {
      	flex: 1;
  		background-size: contain;
  		background-position: center;
  		background-repeat: no-repeat;
  		aspect-ratio: 1 / 1;

  		display: flex;
  		justify-content: center;  /* horizontal links */
  		align-items: flex-start;      /* vertikal oben */

  		padding: 1px;
		padding-top: 2.7vw;
  		font-weight: bolder;
		font-family: "Verdana", sans-serif;
	  	font-style: normal;
		color: black;
		cursor: pointer; /* zeigt Hand-Cursor */
    }
    .box1 { background-image: url("pic00.png"); font-size: 2.9vw; }
    .box2 { background-image: url("pic01.png"); font-size: 2.9vw; }
	.box3 { background-image: url("pic02.png"); font-size: 2.9vw; }

	.boxfoto2 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 20px;
		width: 60%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		font-size: 13px; 
		color: #424443;
		text-align: left;
		padding: 5px;
	}
	
	/* Logos links */
	.logos {
	  display: flex;
	  gap: 4px;
	}

	.logosimg1 {
		  min-width: 120px;   /* Mindestgröße */  /* Maximalgröße */
		  width: 16vw;       /* dynamisch zur Fensterbreite */
		  height: auto;      /* Seitenverhältnis bleibt erhalten */
	}
	
	.logosimg2 {
	  min-width: 90px;   /* Mindestgröße */  /* Maximalgröße */
	  width: 6vw;       /* dynamisch zur Fensterbreite */
	  height: auto;      /* Seitenverhältnis bleibt erhalten */
	}

	/* Infos rechts */
	.info {
	  display: grid;
	  grid-template-columns: repeat(1, auto); /* zwei Spalten */
	  gap: 10px;
	  text-align: left;
	  min-width: 120px;
	}

	.info p {
	  margin: 1px 0;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: bold;
		font-size: 15px; 
		color: white;
	}
	
	
	.boxscience2 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 0px;
		width: 95%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		text-align: left;
		padding: 5px;
		font-size: clamp(14px, 2.1vw, 20px);
		color: #424443;
	}
	
	.boxscience4 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 0px;
		width: 95%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		text-align: left;
		padding: 5px;
		font-size: clamp(14px, 2.1vw, 20px);
		color: #424443;
	}
	
	.boxscience1 {
		  padding: 0px;
		  display: flex;
		  flex-direction:column;
		  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
		  justify-content: flex-start; /* Inhalte oben ausrichten */
		  width: 95%;
		  margin-left: 0px;
		}
	.boxscience1 img {
		border: none;
		width: 95%;
	}
	
	.boxgame1 {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 20px;
		width: 50%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		font-size: 15px; 
		color: #424443;
		text-align: left;
		padding: 5px;
	}
	
	.boxout1_v {
	  padding: 0px;
	  display: flex;
	  flex-direction: column; /* Bild oben, Text darunter */
	  align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  justify-content: flex-start; /* Inhalte oben ausrichten */
		width: 90%;
		min-width: 200px;
		margin-left: 20px;
		cursor: pointer;
	}
	

	.boxout1_v iframe { min-width: 300px; width: 100%; height: 100%;  }
	

	
	.boxfoto2_v {
	 	border: 1px solid gray;
	  	display: flex;
	  	flex-direction: column; /* Bild oben, Text darunter */
	  	align-items: stretch;   /* NICHT zentrieren, sondern volle Breite */
	  	justify-content: flex-start; /* Inhalte oben ausrichten */
		margin-left: 20px;
		width: 88%;
		font-family: "Verdana", sans-serif;
		font-style: normal;
		font-weight: normal;
		font-size: 13px; 
		color: #424443;
		text-align: left;
		padding: 5px;
	}


	.containerres {
    	display: flex;
		flex-direction: column; /* Bild oben, Text darunter */
		width: 100%;              
    }
}