/*Allgemeine Anpassungen zu Style und Layout*/

#layout
	{
		display:grid;
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: 200px 1fr 1fr;
		font-family: Arial;
		background-color:white;
	}

#header
	{
		grid-column: 1 / 4;
		grid-row: 1;
		background-image: linear-gradient(to bottom, #beffff, white);
		text-align: center;
		margin:10px;
		margin-bottom:50px;
		padding:10px;
		border-radius: 10px;
	}
	
.content
	{
		grid-column: 1 / 4;
		grid-row: 2 / 4;
	}

.Person1
	{
		grid-column: 1;
		grid-row: 2 / 4;
		position:relative;
	}

#TextfeldDialog
	{
		grid-column: 2 ;
		grid-row: 3;
		display:grid;
		grid-template-columns: 5fr 1fr;
		grid-template-rows: 1fr 5fr 1fr;
		line-height:1,5;
		padding:20px;
		border: 2px solid red;
		border-radius: 10px 50px 10px 50px;
	}

.Person2
	{
		grid-column: 3;
		grid-row: 2 / 4;
	}

#footer
	{
		grid-column: 1 / 4;
		grid-row: 4;
		background-color:pink;
		padding: 30px;
	}
	

/*Style und Layout für Header und Navigation*/	

#AI
	{
		padding-left:30px;
		text-align: left;
		font-size:40px;
	}
		
#menu2
	{
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		justify-content:space-evenly;
	}	

.NaviButton
	{
		font-size: 24px;
		border-radius: 50px;
		color: white;
		width:200px;
		height:50px;
		padding:10px;
	}
	
#ÜbersichtButton
	{
		background-color:#141414;
	}

#WordButton
	{
		background-color:#2a5699;
	}

#PowerpointButton
	{
		background-color:#d14523;
	}

#ExcelButton
	{
		background-color:#217446;
	}

#AccessButton
	{
		background-color:#a03437;
	}

#GenAIButton
	{
		background-color:#660066;
	}
	

/*Layout und Style für Inhalte des Dashboards*/

.Tutorien
	{	
		display:grid;
		grid-template-columns:2fr 2fr 1fr 1fr;
		padding: 10px;
		margin-left:30px;
		margin-right:30px;
		border-radius: 9999px;
	}

.IconText
	{
		display:grid;
		grid-template-columns:2fr 2fr 1fr;
		align-items:center;
		padding-left:50px;
		text-align:left;
		font-size:20px;
	}
	
#Excel4
	{
		background-image: linear-gradient(to right, green, white);
	}

.Lerninhalte
	{
		font-size:20px;
		line-height:15px;
	}

.Inhalte
	{
		display:grid;
		grid-template-rows:1fr 1fr;
		align-items:center;
		gap: 10px;
	}


.Wissen
	{
		font-size:20px;
		font-size: 24px;
		border-radius: 50px;
		color: white;
		width:200px;
		height:50px;
		background-color:green;
	}

.Test
	{
		font-size:20px;
		font-size: 24px;
		border-radius: 50px;
		color: white;
		width:200px;
		height:50px;
		background-color:green;
	}
	
/*Style und Layout der Storyline und der Charaktere*/

#Name
	{
		font-size:20px;
		grid-column:1;
		grid-row:1;
	}

#Textfeld1
	{
		grid-column:1 / 3;
		grid-row:2;
		opacity:1;
	}

#Weiter
	{
		grid-column:2;
		grid-row:3;
		background-color:#141414;
		color:white;
		border-radius:50px;
	}

#Person2
	{
		object-fit:cover;
	}

#Person1
	{
		opacity:0;
		position:absolute;
		bottom:0px;
		object-fit:cover;
	}
	
/* Style und Layout für die Testseite mit der Freitextabfrage*/

#TestWählen
	{display:grid;
	justify-content:center;}

/*#AbfrageTestart
	{
		text-align:center;
		font-size: 28px;
	}
	
.Buttons
	{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		margin-top: 20px;
		margin-bottom:20px;
		
	}
*/

#TestStarten
	{
		grid-row:1;
		margin-left: auto;
		margin-right: auto;
		width:300px;
		height:50px;
		background-color:#57de78;
		border-radius:50px;
		font-size: 20px;
		
	}

/*#OhneZeit
	{
		grid-column: 2;
		grid-row: 1;
		margin-left: auto;
		margin-right: auto;
		width:300px;
		height:50px;
		background-color:#57de78;
		border-radius:50px;
		font-size:20px;
	}
*/
#contentTest
	{
		grid-template-columns:1fr 1fr 1fr;
		background-color:#d9dade;
		margin:10px;
		border-radius:50px;
		display:none;
		font-size:20px;
	}

.ChatfeldP1
	{
		grid-column: 1 / 3;
		display:grid;
		grid-template-columns: 1fr 3fr;
		grid-template-rows: 2fr 1fr;
		
	}

.ChatfeldP2
	{
		grid-column: 1 / 3;
		display:grid;
		grid-template-columns: 1fr 3fr;
		grid-template-rows: 2fr 1fr;		
	}

.ChatfeldP3
	{
		grid-column: 2 / 4;
		display:grid;
		grid-template-columns: 3fr 1fr;
		grid-template-rows: 2fr 1fr;
	}
	
.ProfilbildP1
	{
		grid-column:1;
		grid-row:1;
		margin-top:20px;
		display:flex;
		justify-content:center;
	}

.ProfilbildP2
	{
		grid-column:1;
		grid-row:1;
		margin-top:20px;
		display:flex;
		justify-content:center;	
	}
	
.ProfilbildP3
	{
		grid-column:2;
		grid-row:1;
		margin-top:20px;
		display:flex;
		justify-content:center;
	}

.Bild1
	{
		background-image:linear-gradient(to bottom, blue, green);
		width:100px;
		height:100px;
		border-radius: 50%;	
	}

.Bild2
	{
		background-image:linear-gradient(to bottom, pink, yellow);
		width:100px;
		height:100px;
		border-radius: 50%;
	}

.Bild3
	{
		background-image:linear-gradient(to bottom, purple, red);
		width:100px;
		height:100px;
		border-radius: 50%;
	}

.NameP1
	{
		text-align:center;
	}

.NameP2
	{
		text-align:center;
	}
	
.NameP3
	{
		text-align:center;
	}	
	
.TextfeldP1
	{
		grid-column:2 / 3;
		grid-row:1 / 3;
		margin:20px;
		padding:20px;
		border: 2px solid red;
		background-color:#eb5757;
		border-radius: 10px 50px 10px 50px;		
	}

.TextfeldP2
	{
		grid-column:2 / 3;
		grid-row:1 / 3;
		margin:20px;
		padding:20px;
		background-color:#57de78;
		border: 2px solid green;
		border-radius: 10px 50px 10px 50px;		
	}

.TextfeldP3
	{
		grid-column:1 / 2;
		grid-row:1 / 3;
		margin:20px;
		padding:20px;
		background-color:#57bede;
		border: 2px solid blue;
		border-radius: 50px 10px 50px 10px;
		display:grid;
		grid-template-columns:3fr 1fr;
		grid-template-rows:3fr 1fr;
	}

.TextP3
	{
		grid-column:1;
		grid-row:1;
	}

#Chateingabe
	{
		display:none;
		grid-template-columns: 3fr 1fr;
		grid-template-rows: 1fr;
		align-items:center;
		margin: 20px;	
	}	
	
#Eingabe
	{
		grid-column:1;
		grid-row:1;
		height:20px;
		word-wrap:break-word;
		border-radius:50px;
		margin-right:20px;
		padding:20px;
		font-size:20px;
	}

#Senden
	{
		grid-column:2;
		grid-row:1;
		width:300px;
		height:50px;
		background-color:#141414;
		color:white;
		border-radius:50px;
		font-size:20px;
		display:grid;
		align-items:center;
		text-align:center;
	}
	
#nächsteFrage
	{
		grid-column:2;
		grid-row:1;
		width:300px;
		height:50px;
		background-color:#141414;
		color:white;
		border-radius:50px;
		font-size:20px;
		display:none;
		align-items:center;
		text-align:center;
	}