/*<link rel="stylesheet" type="text/css" href="exercises.css">  */

  body { font-family: Arial, sans-serif; text-align: left; }
        /*.exercise { margin: 20px; }*/
		.exercise { margin: 20px;font-weight: normal; font-style: normal; font-family: Arial; font-size: 16px;}
    	/* input { margin: 5px; padding: 5px; width: 80px;}*/
        .correct { color: green; font-weight: bold; }
        .incorrect { color: red; font-weight: bold; }
         .feedback { margin-top: 10px; font-size: small; color: darkgreen; font-weight: bold; }
		.img-container {text-align: center; }/*para centrar imagenes con <div  class="img-container"></div>*/
		.PraefixBlau {color: skyblue; }
		.blackbold {color: black; font-weight: bold;}
		.green { color: green; font-weight: normal; }
		 .greenbold { color: green; font-weight: bold; }
		
		 .blue { color: blue; font-weight: normal; }
		 .bluebold { color: blue; font-weight: bold; }
		 .darkbluebold { color: darkblue; font-weight: bold; }
		 .lightblue { color: #82b8d9; font-weight: normal; }
		.lightbluebold { color: #82b8d9; font-weight: bold; }
		 .lightgreen { color: #65b47d; font-weight: normal; }
		 .lightgreenbold { color: #65b47d; font-weight: bold; }
		
		 .darkred{ color: darkred; font-weight: normal; }
		 .darkredbold{ color: darkred; font-weight: bold; }
		 .red{ color: red; font-weight: normal; }
		 .redbold{ color: red; font-weight: bold; }
		 
		 .blackGroundAndLine{background-color: black; border: none;	 }
		 .grauSehrHell{background-color:#eae6e8;}
		 .grauHell {background-color:#dbd7d9;}
		.grauMittel{background-color:#b8b4b6;}
		.grauDunkel {background-color:#827f80;}
		.grauSehrDunkel{background-color:#535152;}
	
	
		 .gray{color: grey; cursor: default;}
		 .grey{color: grey; cursor: default;}
		 .comments {display:none; font-size: small;  margin-top: 10px;  margin-bottom: 10px; font-weight: normal; color: darkred}
		
		.commentsDesign{font-size: small; margin-top: 15px; margin-bottom: 15px; font-weight: normal; color: black;}
		
		.commentsDesign2{font-size: small; margin-top: 5px; margin-bottom: 5px; font-weight: normal; color: black; }
		 
		/*Sofortkorrektur 0*/
	input[type="checkbox"]{
	margin-left: 0px; margin-top: 0px;
	padding:0px; width: auto; min-width: auto; }
			
			
		 
#special-characters-box {
  position: fixed;
 /* bottom: 20px;  */
 top: 20px;
  right: 20px;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  z-index: 1000;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 1.2em;
}

#special-characters-box button.char-btn {
  margin: 3px;
  padding: 5px 10px;
  font-size: 1em;
  cursor: pointer;
}

#toggle-char-box {
  position: fixed;
  /* bottom: 20px; */
  top: 5px;
  right: 5px;
  margin-right: 5px;
  z-index: 1001;
}


/*button design */

main{
 background: white
}

.bonbonGreen{

 width: auto;
 height: auto;
 min-height: 30px;
 background: rgb(189, 228, 217);
  /* old browsers */
 background: linear-gradient(to bottom, white, rgb(189, 228, 217));
 box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;
 border: 1px solid #5ea617;
 border-radius: 1em;
 margin: 1em}
 .bonbonGreen:hover{
	 cursor: pointer;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.bonbonGreen:focus {
 box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px
}


 .bonbonBlue{
	 cursor: pointer;
 width: auto;
 min-height: 30px;
 height: auto; /*30px;*/
 background:  rgb(171, 194, 232);
  /* old browsers */
 background: linear-gradient(to bottom, white, rgb(171, 194, 232));
 box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;
 border: 1px solid #5ea617;
 border-radius: 1em;
 margin: 1em}
 
 .bonbonBlue:hover{
	 cursor: pointer;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.bonbonBlue:focus {
 box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px
}

		    /* Nuevos estilos para el botón de audio */
        .audio-button {
            cursor: pointer;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 5px;
            transition: transform 0.2s;
        }
        
        .audio-button:hover {
            transform: scale(1.1);
        }

.cursorPointer{cursor: pointer; }

   .input-group {
       display: inline;
      /*   flex-direction: column;
        align-items: center;*/
    }
    .multiple-inputs {
        display: inline;
       /*  flex-direction: column;
        gap: 5px;*/
    }
    .input-with-audio {
		/*display: inline-grid;stellt text und input nebeneinander Lautsprecher unter input*/
        display: contents; /*stellt elemente in td nebeneinander da*/
		/*display: flex; /*stellt elemente in td untereinander da*/
      /*  align-items: center;*/
    }
	
	
	/* fuer Tafeln*/
	       .audio2-button {
            cursor: pointer;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 5px;
            transition: transform 0.2s;
        }
        
        .audio2-button:hover {
            transform: scale(1.1);
        }
        
        .input2-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .multiple2-inputs {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .input2-with-audio {
            display: flex;
            align-items: center;
        }
		     /* Nuevo estilo para contenedor de inputs */
        .input3-group {
            display: flex;
            flex-direction: row;/* row: Eingabeboxen nebeneinander; column: untereinander*/
            align-items: center;
        }
		
		.SofortkorrekturTable input {
		margin: 5px; padding: 5px; width: 80px; min-width: 80px;
		
	}
		
		
		 /* 🧩 Tablas Sofortkorrektur (auto) ab Übung 5.4.1.*/
    .SofortkorrekturTable2 {
        font-family:Arial;
		font-weight: bold;
		/*font-style: oblique;*/
		width: auto;
		
		border-collapse: collapse;
        border-radius:  10px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
         margin: 0.5rem;
		
		 text-align: left;
		 /*background-color: #f0f0f0;*/
		 background-color: lightyellow;
    }

    .SofortkorrekturTable2 td{ 
	border: 0px;
       position: left; 
		 padding: 0px 5px;
	text-align: left;} 
	
    .SofortkorrekturTable2 th {
        width: auto;
        padding: 6px 10px;
        border-bottom: 1px solid #e5e5e5;
        text-align: left;
        vertical-align: bottom;
    }
	
	.SofortkorrekturTable2 input {
	margin: 5px; padding: 5px; width: 80px; min-width: 80px;
}
	
	.BeispielTable{
		padding: 5px;
			margin-left: 5px;
			margin-right: 55px;
		background-color: #f7e5e5;
		
		border-radius: 5px;	
		border:	1px solid black;
	}
	.BeispielTable td{
		white-space: nowrap; /* Evita que el texto se ajuste */
				}
				
	.BeispielTableInTable{ /*Ohne Ränder*/
		padding: 5px;
			margin-left: 5px;
			margin-right: 55px;
		background-color: #f7e5e5;
		
		border-radius: 5px;	
		border:	none;
	}
	.BeispielTableInTable td{
	white-space: nowrap; }/* Evita que el texto se ajuste */
	
/*.BeispielTable td{border:	1px solid black;}*/
		.SchemaTable{
			width: 80%;
			
		padding: 1px;
		margin-left: 5px;
		margin-right: 55px;
		background-color: #eae6e8; /*sehr helles Grau*/
		border-radius: 15px;	
		border:	5px solid black;
		/*border-collapse: collapse;*/
		white-space: nowrap;} /* Evita que el texto se ajuste */
	
	.SchemaTable td{
	
	text-align: left;
	vertical-align: top;
		white-space: nowrap; /* Verhindert Zeilenumbruch */
		
		
		/*border:	1px solid black;*/
		}	
		
		

		
 .InputMitRand {/*Simuliert Input fuer Beispiele*/
			padding: 5px;
			margin-left: 25px;
			margin-right: 55px;
			background-color: white;
			border-radius: 5px;	
		border:	2px solid black;}

.InputStamm {/*Simuliert Input fuer Beispiele*/
			padding: 0px;
			margin-left: 0px;
			margin-right: 55px;
			text-align: right;
			border-radius: 5px;	
		}	

 .InputMitRandEndungen {/*Simuliert Input fuer Beispiele*/
			padding: 0px;
			margin-left: 0px;
			margin-right: 55px;
			background-color: white;
			border-radius: 5px;	
		border:	2px solid black;}		
		
.WhiteOnBlack {/*Weiße Schrift auf schwarzem Hintergrund*/
			padding: 5px;
			margin-left: 25px;
			margin-right: 55px;
			background-color: black;
			color: white;
			border-radius: 5px;	
		border:	2px solid black;
		}		


 .WhiteOnGrauDunkel 
 {background-color:#827f80;
 padding: 5px;
			margin-left: 25px;
			margin-right: 55px;
		
			color: white;
			border-radius: 5px;	
		border:	2px solid black;
 }

 .WhiteOnGrauMittel 
 {background-color:#b8b4b6;
 padding: 5px;
			margin-left: 25px;
			margin-right: 55px;
		
			color: white;
			border-radius: 5px;	
		border:	2px solid black;
 }


	.hellGrauSmallBlue	{
			background-color:#dbd7d9;
			color: blue;
			font-size: 0.8em;
		}
		.hellGrauSmallGreen	{
			background-color:#dbd7d9;
			color: green;
			font-size: 0.8em;
		}

.textKlein  {font-size: 0.8em; }

	 .Warntable, th, td {
    padding: 0px; /* Adjust value as needed */
	margin-left: 0px;
			margin-right: 0px;
			margin-top: 0px;
			margin-bottom: 0px;
			border:	none;
	 border-collapse: collapse;
	 }
			
	 .tableSentences { width: 100%; border-collapse: collapse; font-size:14px}
        	.tableSentences td {width: 33%; padding: 2px; border: 1px solid #ccc; text-align: left; vertical-align:top; font-style: normal; font-size: 0.8rem}
			
			
	.tableCabecera2 { width: 100%; border-collapse: collapse; font-size:14px;
			background-color: #f7e5e5;  border-radius: 5px;
			}
        	.tableCabecera2 td {width: 50%;padding: 2px; border: 1px solid #ccc;  vertical-align:top; font-style: normal; font-size: 0.8rem  border-radius: 5px;}
			
	.tableCabecera3 { width: 100%; border-collapse: collapse; font-size:14px;
			background-color: #f7e5e5;
			}
        	.tableCabecera3 td {width: 33%;padding: 2px; border: 1px solid #ccc;  vertical-align:top; font-style: normal; font-size: 0.8rem}