/*
 * Quiztisch: local settings.
 * Loaded after quiztisch.css. The build never writes this file, so changes here survive rebuilds.
 * All values below are the current defaults, so this file changes nothing until you edit a value.
 * Delete a line (or comment it out) to fall back to the built-in default.
 */
#quiztisch {
  /* Height of the quiz box. Everything inside scales to fit it. */
  --quiztisch-height: 90dvh;

  /* Base text size: smallest and largest it may get. Headings, questions
     and answers are fixed multiples of it (question 1.3-1.45x, answer 1.08-1.2x). */
  --quiztisch-text-min: 0.9rem;
  --quiztisch-text-max: 1.375rem;

  /* Colour of the muted title and subtitle at the top of each screen. */
  --quiztisch-header-color: rgba(54, 58, 69, 0.62);

  /* Width of the answer text inside the answer buttons. */
  --quiztisch-answer-width: 80%;

  /* Width of the intro text column (containers 600px and wider). */
  --quiztisch-intro-width: 75%;

  /* "→ Teste dein Wissen" link at the bottom left of the start screen: size and colour.
     The text can be changed with data-cta="..." on the <div id="quiztisch"> element. */
  --quiztisch-cta-size: calc(var(--quiztisch-text) * 1.2);
  --quiztisch-cta-color: var(--qw-blau-1); /* the quiz's dark blue */

  /* Advanced: how strongly sizes follow the box height compared with its width
     (higher = bigger on wide, short boxes), and how far fluid sizes may shrink
     on short boxes. Change only if text gets too big or too small at certain heights. */
  --quiztisch-ratio: 1.2;
  --quiztisch-floor-cqh: 1.2cqh;
}

/* Idle-screen widget (quiztisch-widget.css / .js). Its width follows the parent element
   (e.g. the 200px sidebar on desktop), up to the max width below. */
#quiztisch-widget {
  /* Largest width the widget may grow to (tablet layouts). */
  --quiztisch-widget-max-width: 360px;

  /* Height relative to width: 1 = square, 1.25 = a bit taller (4:5). */
  --quiztisch-widget-ratio: 1;

  /* Question text size and the most lines shown before it is cut with "…". */
  --quiztisch-widget-text: clamp(13px, 6.5cqw, 20px);
  --quiztisch-widget-lines: 5;

  /* "→ Teste dein Wissen" link at the bottom left: size and colour. */
  --quiztisch-widget-link-size: clamp(12px, 6cqw, 17px);
  --quiztisch-widget-link-color: var(--qw-blau-1); /* the quiz's dark blue */

  /* Inner padding and corner radius of the box. */
  --quiztisch-widget-padding: 7cqw;
  --quiztisch-widget-radius: 0;
}