@charset "UTF-8";

/*
  =========================================================
  COLOR AND DESIGN SETTINGS
  =========================================================
  STYLE: white + blue + black
  - clean white background
  - near-black text
  - blue accents (buttons, active states, links)
  Change colors here first. Most files use these variables.
*/

:root{
  /* =====================================================
     1) MAIN SITE COLORS
     ===================================================== */

  --bg:#ffffff;                /* Whole page background. */
  --surface:#ffffff;           /* Main card/block background. */
  --surface2:#eef2f7;          /* Soft blue-grey background: counters, small UI elements. */
  --border:#dbe3ec;            /* Borders and divider lines. */

  --text:#0f172a;              /* Main text color: headings, German words, normal text. Near-black navy. */
  --text2:#55677e;             /* Secondary text: subtitles, hints, descriptions, counters, footer text. */

  --accent:#2563eb;            /* Main accent: primary buttons, active tabs, links, quiz correct state. Blue. */
  --accent2:#0f172a;           /* Strong accent: near-black for high-contrast elements. */
  --accent-light:#eaf1fd;      /* Light accent background: hover cards, highlighted blocks. */

  --danger:#b91c1c;            /* Error/wrong answer text and border. */
  --danger-light:#fdeceb;      /* Light error/wrong answer background. */

  --on-accent:#ffffff;         /* Text color on dark/blue button backgrounds. */

  /* =====================================================
     2) BUTTON COLORS
     ===================================================== */

  --button-bg:var(--accent);
  --button-text:var(--on-accent);
  --button-hover-bg:#1d4ed8;
  --button-shadow:0 4px 16px rgba(37,99,235,.22);

  --button-secondary-bg:var(--surface);
  --button-secondary-text:var(--text);
  --button-secondary-border:var(--border);
  --button-secondary-hover-bg:#eaf1fd;
  --button-secondary-hover-text:#1d4ed8;

  /* =====================================================
     3) HEADER, NAVIGATION, AND FOOTER COLORS
     ===================================================== */

  --nav-text:#55677e;
  --nav-hover-bg:#eaf1fd;
  --nav-hover-text:#1d4ed8;

  --footer-text:#64748b;
  --footer-strong:#0f172a;
  --footer-link:#2563eb;
  --footer-link-hover:#1d4ed8;

  /* =====================================================
     4) LEVEL CARDS AND TOPIC CARDS
     ===================================================== */

  --level-badge-color:#2563eb;
  --card-hover-border:#2563eb;
  --card-hover-bg:#eaf1fd;
  --topic-arrow-color:#2563eb;

  /* =====================================================
     5) FLASHCARD COLORS
     ===================================================== */

  --flashcard-front-bg:#ffffff;
  --flashcard-front-text:#0f172a;

  --flashcard-back-bg:#dbe9fd;
  --flashcard-back-text:#0f172a;
  --flashcard-back-small-text:rgba(15,23,42,.62);

  /* =====================================================
     6) QUIZ, TEST, AND RESULT COLORS
     ===================================================== */

  --correct-bg:#dcfce7;
  --correct-text:#15803d;
  --wrong-bg:#fdeceb;
  --wrong-text:#b91c1c;
  --result-score-color:#2563eb;
  --counter-bg:#eef2f7;

  --listen-button-bg:#2563eb;
  --listen-button-text:#ffffff;
  --listen-button-shadow:0 4px 20px rgba(37,99,235,.24);
  --listen-button-shadow-hover:0 6px 28px rgba(37,99,235,.32);

  /* =====================================================
     7) COOKIE BLOCK COLORS
     ===================================================== */

  --cookie-bg:#ffffff;
  --cookie-text:#55677e;
  --cookie-link:#2563eb;

  /* =====================================================
     8) DIFFICULTY TAGS (activity tabs)
     ===================================================== */

  --diff-easy-bg:#eaf1fd;
  --diff-easy-text:#2563eb;
  --diff-medium-bg:#2563eb;
  --diff-medium-text:#ffffff;
  --diff-hard-bg:#0f172a;
  --diff-hard-text:#ffffff;

  /* =====================================================
     9) SHAPE, SHADOW, FONTS, AND ANIMATION
     ===================================================== */

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 16px rgba(15,23,42,.06);
  --shadow-lg:0 8px 40px rgba(15,23,42,.10);

  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;

  --tr:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
button{cursor:pointer;font-family:var(--font-body);border:none;background:none}
button:disabled{opacity:.55;cursor:not-allowed}
select{font-family:var(--font-body)}
a{color:inherit}
.is-hidden{display:none!important}