/* Stijl van de kennisquiz. Zelfde tokens als het office-portaal, zodat de quiz
   niet als een vreemde eend aanvoelt. Ook gebruikt door de quiz-kaarten in index.html. */
:root {
  --word-blue: #2b579a; --word-blue-dark: #1e3f6f; --word-blue-light: #41a5ee;
  --bg: #f5f7fa; --text: #1f2937; --text-light: #4b5563; --border: #e5e7eb;
  --success: #107c10; --fout: #a4262c; --accent: #f06d2c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text);
       line-height: 1.55; -webkit-font-smoothing: antialiased; }

.site-header { background: linear-gradient(135deg, var(--word-blue) 0%, var(--word-blue-light) 100%);
               color: #fff; padding: 26px 24px 64px; }
.header-inner { max-width: 860px; margin: 0 auto; }
.header-inner h1 { font-size: 30px; font-weight: 800; letter-spacing: -.4px; }
.header-inner p { opacity: .92; margin-top: 4px; font-size: 15px; }
.terug { display: inline-block; color: #fff; opacity: .85; text-decoration: none;
         font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.terug:hover { opacity: 1; text-decoration: underline; }
.terug::before { content: '\2190'; margin-right: 6px; }

main { max-width: 860px; margin: -44px auto 60px; padding: 0 24px; }
.kaart { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.voet { text-align: center; color: var(--text-light); font-size: 12.5px; margin-top: 16px; }

/* blok-keuze als er geen hash is */
.keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.keuze-kaart { border: 1.5px solid var(--border); border-radius: 10px; padding: 16px;
               text-decoration: none; color: inherit; transition: all .15s; display: block; }
.keuze-kaart:hover { border-color: var(--word-blue); transform: translateY(-2px);
                     box-shadow: 0 8px 18px rgba(43,87,154,.12); }
.keuze-kaart.af { border-color: var(--success); background: #f6fbf6; }
.keuze-num { font-size: 11px; font-weight: 700; color: var(--word-blue); text-transform: uppercase;
             letter-spacing: .6px; }
.keuze-naam { font-size: 16px; font-weight: 700; margin: 3px 0 2px; }
.keuze-sub { font-size: 12.5px; color: var(--text-light); }
.keuze-score { font-size: 11.5px; font-weight: 700; color: var(--success); margin-top: 6px; }

/* de quiz zelf */
.dkq-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dkq-tel { font-size: 12px; font-weight: 700; color: var(--word-blue); text-transform: uppercase;
           letter-spacing: .6px; white-space: nowrap; }
.dkq-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.dkq-bar-fill { height: 100%; background: var(--word-blue); transition: width .3s; }

.dkq-vraag { font-size: 20px; font-weight: 700; margin-bottom: 16px; line-height: 1.35; }
.dkq-opties { display: grid; gap: 10px; }
.dkq-opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
           background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
           padding: 14px 16px; font: inherit; font-size: 15px; color: inherit; cursor: pointer;
           transition: all .15s; }
.dkq-opt:hover:not(:disabled) { border-color: var(--word-blue); transform: translateY(-1px);
                                box-shadow: 0 6px 14px rgba(43,87,154,.12); }
.dkq-opt:disabled { cursor: default; }
.dkq-letter { width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
              display: flex; align-items: center; justify-content: center; flex-shrink: 0;
              font-size: 12px; font-weight: 700; color: var(--text-light); }
.dkq-opt.is-goed { border-color: var(--success); background: #f1f8f1; }
.dkq-opt.is-goed .dkq-letter { background: var(--success); color: #fff; }
.dkq-opt.is-fout { border-color: var(--fout); background: #fdf3f4; }
.dkq-opt.is-fout .dkq-letter { background: var(--fout); color: #fff; }

.dkq-feedback { display: none; }
.dkq-feedback.zichtbaar { display: block; margin-top: 16px; padding: 16px 18px; border-radius: 10px;
                          border-left: 4px solid; }
.dkq-feedback.ok { background: #f1f8f1; border-color: var(--success); }
.dkq-feedback.nok { background: #fdf3f4; border-color: var(--fout); }
.dkq-fb-kop { font-weight: 800; margin-bottom: 4px; }
.dkq-feedback.ok .dkq-fb-kop { color: var(--success); }
.dkq-feedback.nok .dkq-fb-kop { color: var(--fout); }
.dkq-feedback p { font-size: 14px; }
.dkq-bron { margin-top: 8px; font-size: 12.5px; color: var(--text-light); font-style: italic; }

.dkq-verder { margin-top: 14px; background: var(--word-blue); color: #fff; border: 0;
              border-radius: 8px; padding: 11px 20px; font: inherit; font-weight: 700;
              font-size: 14px; cursor: pointer; }
.dkq-verder:hover { background: var(--word-blue-dark); }

.dkq-uitslag { text-align: center; }
.dkq-score-ring { width: 116px; height: 116px; border-radius: 50%; margin: 4px auto 16px;
                  display: flex; flex-direction: column; align-items: center; justify-content: center;
                  border: 7px solid; }
.dkq-score-ring.ok { border-color: var(--success); color: var(--success); }
.dkq-score-ring.nok { border-color: var(--accent); color: var(--accent); }
.dkq-score-ring span { font-size: 38px; font-weight: 900; line-height: 1; }
.dkq-score-ring small { font-size: 11px; color: var(--text-light); font-weight: 600; }
.dkq-uitslag h2 { font-size: 22px; }
.dkq-uitslag-tekst { color: var(--text-light); font-size: 14.5px; margin: 8px auto 0; max-width: 520px; }
.dkq-herhaal { text-align: left; background: var(--bg); border-radius: 10px; padding: 16px 18px;
               margin: 20px auto 0; max-width: 520px; }
.dkq-herhaal-kop { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.dkq-herhaal ul { margin-left: 18px; font-size: 13.5px; color: var(--text-light); }
.dkq-herhaal li { margin-bottom: 3px; }

/* quiz-kaart en kerndoel-badges op het portaal */
.quiz-kaart { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
              background: linear-gradient(135deg, #eef4fc 0%, #f7fbff 100%);
              border: 1.5px dashed var(--word-blue); border-radius: 10px; padding: 16px 18px;
              text-decoration: none; color: inherit; transition: all .15s; }
.quiz-kaart:hover { background: linear-gradient(135deg, #e3eefb 0%, #f0f7ff 100%);
                    transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43,87,154,.12); }
.quiz-icoon { width: 40px; height: 40px; border-radius: 9px; background: var(--word-blue);
              color: #fff; display: flex; align-items: center; justify-content: center;
              font-size: 19px; flex-shrink: 0; }
.quiz-tekst { flex: 1; }
.quiz-tekst b { display: block; font-size: 15px; }
.quiz-tekst span { font-size: 12.5px; color: var(--text-light); }
.quiz-status { font-size: 12px; font-weight: 700; color: var(--success); white-space: nowrap; }

.kd-rij { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.kd-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
            background: #e7f3ff; color: var(--word-blue); letter-spacing: .3px; cursor: help; }
.kd-badge[data-kd^="K2"] { background: #fff4ce; color: #997b00; }
.kd-badge[data-kd^="K3"] { background: #fde7e9; color: #a4262c; }