:root{
	--strFontFace:       Arial,sans-serif;
	--strFontSize:       12pt;
	--strTextColor:      #000000;
	--strTitleColor:     #000000;

	--strFuncLightColor: #999999;
	--strFuncShadeColor: #7f7f7f;
	--strLinkColor:      #000000;
	--strVLinkColor:     #000000;
	
	--strNavBarColor:    #FFFFFF;
	--strNavLightColor:  #ffffff;
	--strNavShadeColor:  #7f7f7f;
	--strNavTextColor:   #000000;
	
	--strPageBGColor:    #FFFFFF;
	--strExBGColor:      #FFFFFF;
	--strExBGColor2:	 #333333;
}

/* Zahlenstrahl */

	.toolbar button, .toolbar input[type=range] {
	  position: relative;
	  border-radius: 0.4em;
	  padding: 0.3em;
	  min-width: 3em;
	  border-left-color: var(--strFuncLightColor);
	  border-top-color: var(--strFuncLightColor);
	  border-right-color: var(--strFuncShadeColor);
	  border-bottom-color: var(--strFuncShadeColor);
	  color: var(--strTextColor);
	  background-color: #ffffff;
	  border-width: 0pt;
	  cursor: pointer;	
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	  margin: 10px;
	}

	
	.toolbar {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 10px;
	  margin-bottom: 20px;
	}

    #zahlenstrahl {
	  border-radius: 8px;
      width: 90vw;
      height: 340px;
      border: 0px; /* Container */
      background: #fff;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
	
	.zahlenstrahl-wrapper {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width="100%";
	}
	
	#zahlenstrahl-toolbar button.active {
	  border-color: #007bff; /* blaue Umrandung */
	  box-shadow: 0 0 5px #007bff;
	}

	#zahlenstrahl-toolbar {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  margin-top: 10px;
	  gap: 10px;
	}

	#deleteModeBtn {
	 }

	#deleteModeBtn.active {
	}
	
	#detailLevel {
	  position: relative;
	  top: 8px; /* feinjustieren nach Bedarf */
	  width: 100px;
	}

	#custom-buttons {
	  display: flex;
	  justify-content: center;
	  gap: 20px; /* Abstand zwischen Buttons */
	  margin-top: 20px;
	  margin-bottom: 10px;
	}


/* Seite */

.footer {
		display: block;
		position: fixed;
		bottom: 0;
		text-align: center;
		margin-left: 4px;
		font-size: 12px;
		background-color: white;
		left: 0;
		right: 0;
		}
		
	h3, h4 {
		color: #dddddd; 
	}
	h5 {
		color: #ff0000;
	}
	
	body {
		margin: 0;
		font-family: Arial;
		background-color: rgb(255, 255, 255);
		justify-content: center;
		align-items: center;
		flex-direction: column;
		}
		
	a:link {
		color: var(--strLinkColor);
		}
		
	a:visited {
		color: var(--strLinkColor);
		}
	
	a:hover {
		color: #f00;
		}
		

	.FuncButton {
		display: inline-block;
		border-style: solid;
		border-radius: 0.5em;
		padding: 0.5em;
		min-width: 3em;
		border-left-color: var(--strFuncLightColor);
		border-top-color: var(--strFuncLightColor);
		border-right-color: var(--strFuncShadeColor);
		border-bottom-color: var(--strFuncShadeColor);
		color: var(--strTextColor);
		background-color: var(--strExBGColor);
		border-width: 0.5pt;
		cursor: pointer;	
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.FuncButton:active {
		box-shadow: none;
	}

	.FuncButton:hover{
		color: var(--strExBGColor);
		background-color: var(--strTextColor);
	}

	.FuncButton2 {
		display: inline-block;
		border-style: solid;
		border-radius: 0.4em;
		padding: 0.3em;
		min-width: 3em;
		border-left-color: var(--strFuncLightColor);
		border-top-color: var(--strFuncLightColor);
		border-right-color: var(--strFuncShadeColor);
		border-bottom-color: var(--strFuncShadeColor);
		color: var(--strTextColor);
		background-color: #ffffff;
		border-width: 0.5pt;
		cursor: pointer;	
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

	}

	.FuncButton2:active {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		background-color: var(--strExBGColor2);

	}

	.FuncButton2:hover{
		color: var(--strExBGColor);
		background-color: var(--strExBGColor2);
	}

		
	.container {
		background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		max-width: auto;
		max-height: auto;
        text-align: center;
    }
	/* Hauptcontainer mit Schatten und Ãœberschrift */
	.container2 {
		position: relative;
		background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
		max-height: auto;
		max-width: 90%;              /* ?? volle Breite erlauben */
	    max-width: 1200px;        /* ?? z. B. maximal 3 Spalten nebeneinander */
	    margin: 0 auto;
		
	}

	
	.flex-container {
		display: flex;
		text-align: center;
		margin: 2px;
	}
	
	/* zum Zentrieren des Hauptcontainers */
	.container-wrapper {
		display: flex;
		justify-content: center;
		height: auto;
	}
		
		
	/* gleiche Breite der einzelnen Spalten */
	.flex-item {
		flex: auto;
		border: 0px solid;
		margin: 2px;
		width: 100%;
	}
	
	/* linke Ausrichtung der Inhalte */
	.flex-table {
		text-align: left;
		display: flex;
		flex-direction: column;
	}
	
		/* zentrierte Ausrichtung der Inhalte */
	.flex-item2 {
		text-align: center;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	/*Addition und Subtraktion Kopfrechnen */

	
	div.StdDiv, div.ExerciseContainer, div.ReadingContainer{
	background-color: var(--strExBGColor);
	text-align: center;
	font-size: 1em;
	color: var(--strTextColor);
	padding: 0.5em;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: var(--strTextColor);
	
	margin-left: 20px;
	margin-right: 20px;
	}

	div.ReadingContainer, div.ExerciseContainer{
		min-width: 15em;
		flex-grow: 1;
		flex-basis: 0;
		margin-left: 20px;
		margin-right: 20px;
	}

	
		/* Addition und Subtaktion */

		input#answer{
			font-family: var(--strFontFace);
			font-size: 3em;
			color:#000000;
			text-align:center;
			/* background-image: linear-gradient(to bottom, #ffffff 0%, #ace435 150%); */
			border-radius: 0.2em;
			border-width:1px;
			border-style:solid;
			border-color:#dddddd;
			box-shadow: inset 0 0 1px 1px #ffffff;
			outline: #ace435;
			min-width: 40px;

		}
		
		/* Fortschrittsbalken */

		
			#progressBar {
			height: 10px;
			border-radius: 5px;
			background-color: #f3f3f3; /* Hintergrund des Fortschrittsbalkens */
}
			#progressBar::-webkit-progress-bar {
				background-color: #f3f3f3; /* Hintergrund der Leiste */
				height: 10px;
				border-radius: 5px;
			}

			#progressBar::-webkit-progress-value {
				background-color: #fecc00; /*  für Fortschritt */
				height: 10px;
				border-radius: 0px;
			}

			#progressBar::-moz-progress-bar {
				background-color: #fecc00; /*  für Firefox */
				height: 10px;
				border-radius: 0px;
			}


		div#timerDisplay{
			display: none; 
            font-size: 1em; 
            color: red;
			margin-top: 0px; 
            border: 1px dotted red; 
            border-radius: 20px; 
            padding: 10px; 
            text-align: center;
			width: 20px;
			position: absolute; 
            top: 10px; 
            right: 10px;
			}
		
		
			

		.container3 {
            width: 60%;
            margin: 20px auto;
            background-color: white;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
			text-align: center;
        }
       
		.task {
            font-size: 3em;
			display: inline-block;
			flex-direction: row;
			justify-content: space-between;
        }
		
		/* Task schriftliche Addition */
		
		    .task-counter {
        font-weight: bold;
        margin-bottom: 10px;
    }
		
		.taskb {
        margin-bottom: 20px;
        display: inline-block;
        text-align: left;
		}
		.taskb input[type="text"] {
			width: 40px;
			text-align: center;
			font-size: 1.2em;
			margin: 2px;

		}
		
		
		.carry {
			-moz-appearance: textfield; /* Entfernt Pfeile in Firefox */
			appearance: none;          /* Entfernt Pfeile in anderen Browsern */
			border: 1px solid #ccc;
			border-radius: 4px;
			padding: 5px;
			text-align: center;
			font-size: 1.2em;
			outline: none;
		}

		/* .carry:focus {
			border-color: #ace435;
			box-shadow: 0 0 5px rgba(172, 228, 53, 0.5);
		} */

		
		.carry-row {
			color: blue;
			margin-bottom: 5px;
		}
		.separator-line {
			width: 100%;
			border-top: 2px solid black;
			margin: 5px 0;
		}
		.result-row {
			margin-top: 10px;
		}
		 
		.operation-sign {
			font-size: 1.5em;
			margin-right: 5px;
			display: inline-block;
			width: 20px;
		}
		.feedback {
			margin-top: 10px;
			font-weight: bold;
		}
		.final-feedback {
			margin-top: 20px;
			font-size: 1.2em;
			color: green;
		}
		
		
		
		input[type="text"] {
		-moz-appearance: textfield; /* Entfernt Pfeile in Firefox */
		appearance: none;          /* Entfernt Pfeile in anderen Browsern */
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 5px;
		text-align: center;
		font-size: 1.2em;
		outline: none;
		}
		/* input[type="text"]:focus {
			border-color: #ace435;
			box-shadow: 0 0 5px rgba(172, 228, 53, 0.5);
		} */

		
		
		
		
		
        .result {
            font-size: 18px;
            margin-top: 20px;
        }
        
		.correctsa {
        border: 2px solid #fff;
		outline: none;
		background-color:#F3F8FC;
		background-image: linear-gradient(to bottom, #ffffff 0%, #ace435 150%);
		border-radius: 0.2em;
		}

		.incorrectsa {
		color: red;	
		}
		
		.correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
        .summary {
            font-size: 18px;
            margin-top: 30px;
        }
        .summary button {
            margin-top: 20px;
            font-size: 20px;
        }
		
		.summary img {
			max-width: 240px;
			margin-top: 10px;
		}

        .selection {
            margin: 20px 0;
        }
        .select-label {
            font-size: 18px;
        }
        .select {
            padding: 10px;
            font-size: 16px;
            border-radius: 4px;
            margin-left: 10px;
            margin-top: 10px;
        }

        /* Verstecke die Auswahlmenüs und zeige die Aufgabenanzeige */
        #quizArea {
            display: none;
			flex-direction: row;
			
        }
        #selectionArea {
            display: block;
        }
	
	
	/* größe Viewports */
	@media all and (min-width: 30em) {
	.flex-table {
		flex-direction: row;
	}
	}
		
	/* Reduziert die Breite auf kleinen Bildschirmen */
	@media screen and (max-width: 768px) {
    .container {
        max-width: 90%; 
        padding: 15px;
    }
	/* Verhindert Probleme bei kleineren Bildschirmen */
    .container-wrapper {
        height: auto; 
        padding: 20px;
    }
	/* Kleinere Schriftgröße für Flex-Elemente */
    .flex-item {
        font-size: 14px; 
    }
		/* Kleinerer Footer auf mobilen Geräten */
    .footer {
        font-size: 10px;
    }
}

	@media screen and (max-width: 480px) {
    .container {
        max-width: 100%; /* Nutzt die volle Breite */
        font-size: 1em; /* Lesbare Schriftgröße */
    }

    .flex-item {
        font-size: 12px;
    }
}

/* Zahlenstrahl */

/* Für kleinere Bildschirme: Zentrierung beibehalten */
@media screen and (max-width: 768px) {
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  #custom-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    gap: 10px;
  }

  .toolbar button,
  #custom-buttons button {
    min-width: 3em;
    margin: 5px;
    text-align: center;
  }

  /* Optional: aktive Buttons hervorheben */
  .toolbar button.active {
    border-color: #007BFF;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
  }
}