/* IHK Trainer – Übersicht (ap1/ap2.dnsdev.tech) und gemeinsamer Kopf. Baut auf style.css + trainer.css auf. */

.top nav a.ap { font-weight: 600; }

/* Countdown */
.exam { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 720px) { .exam { justify-items: end; } }
.countdown { font-size: 20px; }
.countdown strong { color: var(--accent); }
.exambtns { display: flex; gap: 16px; }
.examdate {
  font: 18px var(--mono);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  padding: 4px 0;
}
.examdate:focus { outline: none; border-bottom-color: var(--accent); }

/* Fortschritt */
.progress-wrap { padding: 26px 0; border-bottom: 1.5px solid var(--rule); }
.bar { display: flex; height: 14px; background: var(--hair); }
.fill { display: block; height: 100%; transition: width 0.25s ease; }
.fill.ok { background: var(--ok); }
.fill.mid { background: var(--mid); }
.progress-text { margin: 10px 0 0; }
:root { --mid: #e0a526; }

/* Werkzeuge */
.toolline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 20px; font-weight: 600; }
.toolline a { text-decoration: none; }
.toolline a:hover { color: var(--accent); }
.notyet { color: var(--soft); font-weight: 400; }
.soon { font-size: 11px; }

/* Themenliste */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--hair);
  font-size: 18px;
  line-height: 1.3;
}
.checklist li:first-child { border-top: 0; padding-top: 0; }
.tname { min-width: 0; overflow-wrap: anywhere; }
.st {
  font: 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 96px;
  padding: 7px 0;
  border: 1.5px solid var(--rule);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.st:hover { border-color: var(--accent); }
.st:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st.s1 { background: var(--mid); border-color: var(--mid); color: #141414; }
.st.s2 { background: var(--ok); border-color: var(--ok); color: #fff; }
.practice { text-decoration: none; white-space: nowrap; }
.practice:hover { color: var(--accent); }
@media (max-width: 600px) {
  .checklist li { grid-template-columns: auto 1fr; }
  .practice { grid-column: 2; }
}

.footbtns { display: flex; flex-wrap: wrap; gap: 18px; }
.footbtns a { text-decoration: none; }