@charset "UTF-8";

/*
  =========================================================
  COLOR AND DESIGN SETTINGS
  =========================================================
  STYLE: white + orange + black
  - clean white background
  - near-black text
  - orange 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:#f4f1ee;          /* Soft warm-grey background: counters, small UI elements. */
  --border:#e7e2dc;            /* Borders and divider lines. */

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

  --accent:#d97706;            /* Main accent: primary buttons, active tabs, links, quiz correct state. Golden amber. */
  --accent2:#171717;           /* Strong accent: near-black for high-contrast elements. */
  --accent-light:#ffedd5;      /* 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/orange button backgrounds. */

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

  --button-bg:var(--accent);
  --button-text:var(--on-accent);
  --button-hover-bg:#b45309;
  --button-shadow:0 4px 16px rgba(217,119,6,.22);

  --button-secondary-bg:var(--surface);
  --button-secondary-text:var(--text);
  --button-secondary-border:var(--border);
  --button-secondary-hover-bg:#ffedd5;
  --button-secondary-hover-text:#b45309;

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

  --nav-text:#57534e;
  --nav-hover-bg:#ffedd5;
  --nav-hover-text:#b45309;

  --footer-text:#78716c;
  --footer-strong:#171717;
  --footer-link:#d97706;
  --footer-link-hover:#b45309;

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

  --level-badge-color:#d97706;
  --card-hover-border:#d97706;
  --card-hover-bg:#ffedd5;
  --topic-arrow-color:#d97706;

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

  --flashcard-front-bg:#ffffff;
  --flashcard-front-text:#171717;

  --flashcard-back-bg:#ffe8d1;
  --flashcard-back-text:#171717;
  --flashcard-back-small-text:rgba(23,23,23,.62);

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

  --correct-bg:#dcfce7;
  --correct-text:#15803d;
  --wrong-bg:#fdeceb;
  --wrong-text:#b91c1c;
  --result-score-color:#d97706;
  --counter-bg:#f4f1ee;

  --listen-button-bg:#d97706;
  --listen-button-text:#ffffff;
  --listen-button-shadow:0 4px 20px rgba(217,119,6,.24);
  --listen-button-shadow-hover:0 6px 28px rgba(217,119,6,.32);

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

  --cookie-bg:#ffffff;
  --cookie-text:#57534e;
  --cookie-link:#d97706;

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

  --diff-easy-bg:#ffedd5;
  --diff-easy-text:#d97706;
  --diff-medium-bg:#d97706;
  --diff-medium-text:#ffffff;
  --diff-hard-bg:#171717;
  --diff-hard-text:#ffffff;

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

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 16px rgba(23,23,23,.06);
  --shadow-lg:0 8px 40px rgba(23,23,23,.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}