:root {
            --primary-bg: #f4f7f6;
            --card-bg: #ffffff;
            --accent-color: #2c3e50;
            --correct: #27ae60;
            --wrong: #e74c3c;
            --text-main: #333;
        }

h1{
  font-size: 366%;
}
p{
	line-height:150%;
}
.form-control{  padding-left: 5px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	   display: block;
            padding: 15px 20px;
            border: 2px solid #ecf0f1;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 130%;
            width: 92%;
}
        .content-holder {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-main);
            display: flex;
            justify-content: center;
            padding: 20px;
            margin: 0;
            flex-direction: column;
  			align-items: center;
        }
        
        .question-dots{
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        width: 100%; 
        gap: 5px;
          padding: 0 0 25px 0;
        }
        .question-dots span{
          height: 7px; 
            width: 7px; 
            border-radius: 50%; 
            display: inline-block;
        }

        .quiz-container {
            width: 100%;
            max-width: 600px;
        }

        .question-card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        .header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
           /* border-bottom: 2px solid var(--primary-bg);*/
            padding-bottom: 10px;
            margin-bottom: 5px;
        }

        .number {
            font-weight: bold;
            color: var(--accent-color);
            font-size: 1.2rem;
        }

        .title {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 1.1rem;
            color: #7f8c8d;
              padding-left: 7px;
        }

        .question-text {
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: 25px;
            font-weight: 600;
        }
        .question-text img, .explanation-box img{
          width: 100%; 
          padding: 20px 0; 
        }
        
        .img-holder{
          text-align:center;
        }
        .img-holder img{
          width: 50%; 
        }


        .answer-option {
            margin-bottom: 15px;
            position: relative;
        }

        .answer-option input[type="radio"] {
            display: none;
        }

        .answer-option label {
            display: block;
            padding: 15px 20px;
            border: 2px solid #ecf0f1;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 130%;
        }
        .indicator-arrow {
  position: absolute;
  left: -12px; /* Position links vom Feld */
    top: calc(50% - 11px);
  width: 0;
  height: 0;
  /* Erzeugt die Pfeilspitze */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #2ecc71; /* Farbe des Pfeils (Grün) */
  z-index: 10;
  display: none; 
}

        .answer-option input[type="radio"]:checked + label {
            border-color: var(--accent-color);
            background-color: #f8f9fa;
        }

        /* Auswertungs-Styles */
         .evaluated .is-right .indicator-arrow {
            display:block;
        }
        .evaluated .is-correct .indicator-arrow{
          display:none; 
        }
        .evaluated .is-correct label {
            border-color: var(--correct) !important;
            background-color: rgba(39, 174, 96, 0.1);
            color: var(--text-main); 
        }
        .evaluated .is-wrong label {
            border-color: var(--wrong) !important;
            background-color: rgba(231, 76, 60, 0.1);
        }
       

        .feedback-text {
            display: none;
            font-size: 0.85rem;
            margin-top: 8px;
            padding: 5px 10px;  padding-left: 5px;
            font-weight: bold;
        }

        .evaluated .is-correct .feedback-text, .evaluated .is-wrong .feedback-text {
            display: block;
        }

        .is-correct .feedback-text { color: var(--correct); }
        .is-wrong .feedback-text { color: var(--wrong); }

        .explanation-box {
            display: none;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px dashed #bdc3c7;
            font-style: italic;
            font-size: 0.95rem;
            color: #555;
            line-height:150%;
              margin-bottom: 25px;
        }
        .navigation-box {
          height: 50px;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px dashed #bdc3c7;
        }

        .evaluated .explanation-box {
            display: block;
        }

        .score-badge {
            float: right;
            background: var(--accent-color);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        .evaluated .score-badge { 
        display: inline-block; 
        
        }
 

/* Der Button im Normalzustand (Outline) */
.btn {
	
	float:right; 
	
    /* Hintergrund & Farbe */
    background-color: transparent; /* Nicht gefüllt */
    color: #0056b3; /* Text in der Hauptfarbe */
    
    /* Rahmen & Form */
    border: 2px solid #0056b3; /* Blauer Rahmen */
    border-radius: 6px;
    
    /* Größe & Abstände */
    padding: 14px 32px;
    font-size: 1.15rem;
    font-weight: 500;
    
    /* Interaktion */
    cursor: pointer;
    transition: all 0.3s ease; /* Sanfter Übergang für Farbe & Hintergrund */
    
    /* Buchstababstand für wissenschaftliche Klarheit */
    letter-spacing: 0.5px;
}

/* Effekt beim Drüberfahren (Hover) - Füllung erfolgt hier */
.btn:hover {
    background-color: #0056b3; /* Füllt sich mit Blau */
    color: #ffffff; /* Text wird weiß für Kontrast */
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2); /* Sanfter blauer Schein */
}

/* Effekt beim Anklicken (Active) */
.btn:active {
    transform: scale(0.98); /* Minimales Zusammenziehen beim Klick */
    background-color: #004494; /* Etwas dunkleres Blau beim Klick */
}

/* Fokus für Barrierefreiheit */
.btn	:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.3);
}
     
/* Feedback */
#showLink{
	float: right; 
}    
#inputContainer textarea{

            width: 92%; 
}  
#sendBtn{
	
	float:right; 
	 /* Hintergrund & Farbe */
    background-color: transparent; /* Nicht gefüllt */
    color: #0056b3; /* Text in der Hauptfarbe */
    
    /* Rahmen & Form */
    border: 1px solid #0056b3; /* Blauer Rahmen */
    border-radius: 6px;
    
    /* Größe & Abstände */
    padding: 7px 16px;
    font-size: 1rem;
    
    /* Interaktion */
    cursor: pointer;
    transition: all 0.3s ease; /* Sanfter Übergang für Farbe & Hintergrund */
    
    /* Buchstababstand für wissenschaftliche Klarheit */
    letter-spacing: 0.5px;
    margin-top: 5px;
}
        
.clear{
	clear:both; 
}        
        
.float-left{
	float: none; 
}    

.alert-holder{
	background: var(--card-bg);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  width: 100%;
  max-width: 600px;
  color: red; 
}