/* RandomSecurity24 – Awareness-Akademie (Quiz und Urkunde) */

.ak-bereich { padding-top: 56px; }
.ak-bereich [hidden] { display: none !important; }
.ak-quiz { max-width: 780px; margin: 0 auto; padding: 32px; }

.ak-fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.ak-fakten div { background: var(--bg); border-radius: 12px; padding: 14px; text-align: center; }
.ak-fakten b { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }
.ak-fakten span { font-size: .8rem; color: var(--ink-mute); }
.ak-intro p { color: var(--ink-soft); }
@media (max-width: 520px) { .ak-fakten { grid-template-columns: repeat(2, 1fr); } .ak-quiz { padding: 22px; } }

.ak-fortschritt { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .82rem; color: var(--ink-mute); font-weight: 600; }
.ak-balken { height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; margin: 10px 0 24px; }
.ak-balken div { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s var(--weich, ease); }
.ak-frage { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 0 0 18px; }
.ak-optionen { display: grid; gap: 10px; }
.ak-optionen button {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; font-weight: 600; color: var(--ink);
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.ak-optionen button:not(:disabled):hover { border-color: var(--accent-2); background: #f5f8ff; transform: translateX(4px); }
.ak-optionen button:disabled { cursor: default; }
.ak-optionen .buchstabe { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: var(--ink-soft); }
.ak-optionen button.richtig { border-color: var(--ok); background: #e9fbf2; }
.ak-optionen button.richtig .buchstabe { background: var(--ok); color: #fff; }
.ak-optionen button.falsch { border-color: var(--accent); background: #fff1f3; }
.ak-optionen button.falsch .buchstabe { background: var(--accent); color: #fff; }
.ak-optionen button.blass { opacity: .5; }

.ak-erklaerung { margin-top: 18px; padding: 16px 18px; border-radius: 12px; animation: blase-rein .3s var(--weich, ease); }
.ak-erklaerung.gut { background: #e9fbf2; border: 1px solid #b4ecd0; }
.ak-erklaerung.schlecht { background: #fff5f7; border: 1px solid #ffc2cc; }
.ak-erklaerung b { display: block; margin-bottom: 4px; }
.ak-erklaerung p { margin: 0; color: var(--ink-soft); }
.ak-erklaerung .tipp { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.1); font-size: .9rem; color: #283247; }
.ak-weiter { margin-top: 18px; display: flex; justify-content: flex-end; }

.ak-urkunde-bereich { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .ak-urkunde-bereich { grid-template-columns: 1fr; } }
.ak-auswertung h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 6px; }
.ak-punkte { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ak-punkte small { font-size: 1.2rem; color: var(--ink-mute); font-weight: 700; }
.ak-titel { display: inline-block; margin: 12px 0 14px; background: var(--navy); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.ak-auswertung p { color: var(--ink-soft); }
.ak-liste { list-style: none; padding: 0; margin: 16px 0 0; font-size: .88rem; }
.ak-liste li { padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 10px; }
.ak-liste li span:first-child { flex: none; }
.ak-urkunde-karte label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
.ak-urkunde-karte input { width: 100%; font: inherit; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); margin-bottom: 16px; }
.ak-urkunde-karte input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: transparent; }
.ak-urkunde-karte canvas { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); display: block; }
.ak-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ak-klein { font-size: .78rem; color: var(--ink-mute); margin: 12px 0 0; }

/* ---------- Stufe 2: Capture the Flag ---------- */
.ak-ctf { padding-top: 0; }
.ak-ctf-karte { max-width: 780px; margin: 0 auto; padding: 32px; }
.ak-ctf-karte h2 { margin: 6px 0 12px; }
.ak-ctf-karte p, .ak-ctf-regeln { color: var(--ink-soft); }
.ak-ctf-karte code { font-family: var(--mono); font-size: .9em; background: var(--bg); padding: 1px 6px; border-radius: 6px; }
.ak-ctf-regeln { padding-left: 20px; margin: 0 0 22px; }
.ak-ctf-regeln li { margin: 4px 0; }
.ak-ctf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 18px; }
.ak-ctf-kopf b { font-size: .95rem; }
.ak-ctf-reset { margin-left: auto; font-size: .85rem; }
.ak-ctf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ak-ctf-liste li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; align-items: center; }
.ak-ctf-liste .zeichen { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--bg); color: var(--ink-mute); }
.ak-ctf-liste li.gefunden { background: #e9fbf2; border-color: #b4ecd0; }
.ak-ctf-liste li.gefunden .zeichen { background: var(--ok); color: #fff; }
.ak-ctf-liste .name { font-weight: 700; }
.ak-ctf-liste .status { font-size: .82rem; color: var(--ink-mute); }
.ak-ctf-liste .link-btn { white-space: nowrap; }
.ak-ctf-liste .tipp { grid-column: 2 / -1; margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff8e8; border: 1px solid #f6dfa4; color: #4a3b10; font-size: .9rem; }
@media (max-width: 520px) { .ak-ctf-karte { padding: 22px; } .ak-ctf-liste li { grid-template-columns: 28px 1fr; } .ak-ctf-liste .link-btn { grid-column: 2; justify-self: start; } }

/* Stufe 1½: Hinweis auf Phish or Not */
.ak-zwischen { padding-bottom: 28px; }
.ak-teaser { max-width: 780px; margin: 0 auto; padding: 20px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; color: var(--ink); }
.ak-teaser:hover { text-decoration: none; border-color: var(--accent-2); }
.ak-teaser-icon { font-size: 2.2rem; line-height: 1; }
.ak-teaser b { display: block; font-size: 1.15rem; margin-top: 2px; }
.ak-teaser small { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }
.ak-teaser .eyebrow { margin: 0; }
.ak-teaser-pfeil { font-size: 1.4rem; color: var(--accent); }