/* =========================================================
   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;
}

a:hover {
  color: var(--brand-red);
}

.logo_top {
  max-height: 48px;
  width: auto;
}