/* =========================================================
   1. FARB-VARIABLEN (CSS CUSTOM PROPERTIES)
   ========================================================= */

:root {
  /* Haupt- & Akzentfarben */
  --primary: #042C53;           /* Dunkles Blau (Header/Buttons) */
  --primary-hover: #031e39;
  --brand-red: #990000;         /* Schul-Rot */

  /* Hintergründe & Flächen */
  --background: #F8FAFC;        /* Hellgrauer Seitenhintergrund */
  --surface: #FFFFFF;           /* Karten- & Kachelhintergrund */

  /* Textfarben */
  --text-main: #0F172A;         /* Haupttext (Dunkelschiefer) */
  --text-muted: #64748B;        /* Dezent/Sekundär */

  /* Rahmen & Linien */
  --border-color: #E2E8F0;

  /* Statusfarben (Fragen-Kacheln) */
  --status-offen-bg: #FFFFFF;
  --status-offen-border: #E2E8F0;
  --status-offen-text: #042C53;

  --status-richtig-bg: #D1FAE5;
  --status-richtig-border: #34D399;
  --status-richtig-text: #065F46;

  --status-falsch-bg: #FEE2E2;
  --status-falsch-border: #F87171;
  --status-falsch-text: #991B1B;

  --status-beantwortet-bg: #E0F2FE;
  --status-beantwortet-border: #38BDF8;
  --status-beantwortet-text: #075985;
}


/* =========================================================
   2. SCHRIFTARTEN (Mulish)
   ========================================================= */

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/mulish-v12-latin-300.eot');
  src: local(''),
       url('../fonts/mulish-v12-latin-300.eot?#iefix') format('embedded-opentype'),
       url('../fonts/mulish-v12-latin-300.woff2') format('woff2'),
       url('../fonts/mulish-v12-latin-300.woff') format('woff'),
       url('../fonts/mulish-v12-latin-300.ttf') format('truetype'),
       url('../fonts/mulish-v12-latin-300.svg#Mulish') format('svg');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mulish-v12-latin-regular.eot');
  src: local(''),
       url('../fonts/mulish-v12-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/mulish-v12-latin-regular.woff2') format('woff2'),
       url('../fonts/mulish-v12-latin-regular.woff') format('woff'),
       url('../fonts/mulish-v12-latin-regular.ttf') format('truetype'),
       url('../fonts/mulish-v12-latin-regular.svg#Mulish') format('svg');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/mulish-v12-latin-500.eot');
  src: local(''),
       url('../fonts/mulish-v12-latin-500.eot?#iefix') format('embedded-opentype'),
       url('../fonts/mulish-v12-latin-500.woff2') format('woff2'),
       url('../fonts/mulish-v12-latin-500.woff') format('woff'),
       url('../fonts/mulish-v12-latin-500.ttf') format('truetype'),
       url('../fonts/mulish-v12-latin-500.svg#Mulish') format('svg');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/mulish-v12-latin-600.eot');
  src: local(''),
       url('../fonts/mulish-v12-latin-600.eot?#iefix') format('embedded-opentype'),
       url('../fonts/mulish-v12-latin-600.woff2') format('woff2'),
       url('../fonts/mulish-v12-latin-600.woff') format('woff'),
       url('../fonts/mulish-v12-latin-600.ttf') format('truetype'),
       url('../fonts/mulish-v12-latin-600.svg#Mulish') format('svg');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mulish-v12-latin-700.eot');
  src: local(''),
       url('../fonts/mulish-v12-latin-700.eot?#iefix') format('embedded-opentype'),
       url('../fonts/mulish-v12-latin-700.woff2') format('woff2'),
       url('../fonts/mulish-v12-latin-700.woff') format('woff'),
       url('../fonts/mulish-v12-latin-700.ttf') format('truetype'),
       url('../fonts/mulish-v12-latin-700.svg#Mulish') format('svg');
}


/* =========================================================
   3. BASIS-STYLING (GLOBAL OVERRIDES)
   ========================================================= */

body {
  background-color: var(--background);
  font-family: 'Mulish', sans-serif;
  color: var(--text-main);
}

a {
  color: var(--primary);
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

/* =========================================================
   4. FRAGEN-GRID
   ========================================================= */

.frage-nr {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 2px;
}

.frage-zahl {
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 800;
}

.status-icon {
  font-size: 1.15rem;
  margin-top: 4px;
}

/* Status-Varianten unter Verwendung der CSS-Variablen */
.status-offen {
  background-color: var(--status-offen-bg);
  color: var(--status-offen-text);
  border-color: var(--status-offen-border);
}
.status-offen:hover {
  border-color: var(--status-offen-text);
}

.status-richtig {
  background-color: var(--status-richtig-bg);
  color: var(--status-richtig-text);
  border-color: var(--status-richtig-border);
}

.status-falsch {
  background-color: var(--status-falsch-bg);
  color: var(--status-falsch-text);
  border-color: var(--status-falsch-border);
}

.status-beantwortet {
  background-color: var(--status-beantwortet-bg);
  color: var(--status-beantwortet-text);
  border-color: var(--status-beantwortet-border);
}


/* =========================================================
   5. SPEZIELLE TEST-ELEMENTE & AUFGABEN
   ========================================================= */

input.larger { 
  transform: scale(1.5); 
} 

.richtig {
  color: #10B981;
  font-weight: bold;
}

.falsch {
  color: #EF4444;
  text-decoration: line-through;
  font-weight: normal;
}

.loesungen {
  width: 80%; 
  margin: 0 auto; 
  text-align: left;
}


/* =========================================================
   6. RESPONSIVITY
   ========================================================= */

@media (max-width: 767px) {
  .loesungen {
    width: 100%; 
  }
    
  .fragen-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 10px;
  }
}