/*
 * KI-SCHULUNG v2 — Master Design System
 * Identitätsstiftung · EU AI Act Basisschulung
 * =====================================================
 * Sauber, lesefokussiert, hell.
 * Inspiration: elementsofai.com
 * Farben & Typo: Identitätsstiftung-DNA
 * =====================================================
 *
 * TOKENS:
 *   --brown      #A67554   Terracotta · Akzente, Links, Borders
 *   --purple     #5242A0   Violett    · Quiz, Übungen, interaktiv
 *   --ink        #1C1917   Dunkel     · Überschriften
 *   --off-white  #FAF8F6   Seite
 *   --white      #FFFFFF   Artikel-Hintergrund
 */

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --brown:       #A67554;
  --brown-dk:    #7A5338;
  --brown-lt:    #F5EDE5;
  --brown-pale:  #FBF7F4;
  --purple:      #5242A0;
  --purple-dk:   #3D3080;
  --purple-lt:   #EDEAF8;
  --ink:         #1C1917;
  --ink-60:      rgba(28,25,23,.60);
  --ink-35:      rgba(28,25,23,.35);
  --off-white:   #FAF8F6;
  --grey-line:   #E8E4DF;
  --grey-input:  #ECEAF2;
  --white:       #FFFFFF;
  --green:       #2D8653;
  --green-lt:    #EAF5EE;
  --red:         #C0392B;
  --red-lt:      #FDF0EE;
  --font:        'Red Hat Text', sans-serif;

  /* Layout */
  --col:         900px;   /* Hauptinhaltsspalte */
  --col-wide:    1160px;  /* Für Header / Nav */
  --pad:         clamp(24px, 5vw, 80px);
  --r:           4px;
}

/* ── BASE ───────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.82;
}
a { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(166,117,84,.30); }
a:hover { text-decoration-color: var(--brown); }
strong { font-weight: 600; }
em { font-style: italic; }

/* ── TOP NAV ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
  padding: 0 var(--pad);
  height: 54px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  color: var(--ink); text-decoration: none; flex-shrink: 0;
}
.nav-logo:hover { color: var(--brown); text-decoration: none; }
.nav-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-35); margin-left: 20px;
}
.nav-crumb a { color: var(--ink-35); text-decoration: none; }
.nav-crumb a:hover { color: var(--brown); }
.nav-crumb-sep { font-size: 11px; }
.nav-crumb-current { color: var(--ink); font-weight: 600; }
.nav-left { display: flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-counter {
  font-size: 12px; font-weight: 700; color: var(--ink-35);
  background: var(--off-white); padding: 4px 14px;
  border-radius: 99px; letter-spacing: .02em;
}
.nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--off-white); border: 1px solid var(--grey-line);
  text-decoration: none; color: var(--ink-35); font-size: 16px;
  transition: all .15s;
}
.nav-btn:hover { border-color: var(--brown); color: var(--brown); text-decoration: none; }
.nav-btn.disabled { opacity: .3; pointer-events: none; }

/* ── CHAPTER HEADER (coloured bg + illustration) ────────── */
.chap-header {
  background: var(--brown);
  overflow: hidden;
}
.chap-header-illus {
  width: 100%; height: clamp(200px, 28vw, 340px);
  display: flex; align-items: center; justify-content: center;
}

/* ── ARTICLE CONTAINER ──────────────────────────────────── */
.article {
  max-width: var(--col);
  margin: 0 auto;
  padding: 72px var(--pad) 120px;
}

/* ── CHAPTER LABEL + H1 ─────────────────────────────────── */
.chap-label {
  display: flex; align-items: baseline; gap: 22px;
  margin-bottom: 32px;
}
.chap-num {
  font-size: clamp(60px, 10vw, 96px); font-weight: 700;
  color: var(--brown); line-height: 1; letter-spacing: -.03em;
  flex-shrink: 0;
}
.chap-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-35); margin-bottom: 6px;
}
.chap-h1 {
  font-size: clamp(28px, 4.5vw, 44px); font-weight: 700;
  color: var(--ink); line-height: 1.15; letter-spacing: -.02em;
}
.chap-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px;
}
.chap-tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: 99px;
  background: var(--purple-lt); color: var(--purple);
}
.chap-meta {
  font-size: 13px; color: var(--ink-35); margin-bottom: 48px;
  border-top: 1px solid var(--grey-line); padding-top: 16px;
}

/* ── LEAD TEXT ──────────────────────────────────────────── */
.lead {
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.72;
  color: var(--ink-60); margin-bottom: 48px; font-weight: 400;
  border-bottom: 1px solid var(--grey-line); padding-bottom: 48px;
}

/* ── PROSE ──────────────────────────────────────────────── */
.prose p {
  font-size: 19px; line-height: 1.85; color: var(--ink-60);
  margin-bottom: 22px;
}
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: var(--ink); }
.prose h2 {
  font-size: clamp(22px, 3vw, 32px); font-weight: 700;
  color: var(--ink); line-height: 1.2; letter-spacing: -.02em;
  margin: 64px 0 20px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin: 36px 0 10px; letter-spacing: -.01em;
}

/* Section divider */
.divider {
  border: none; border-top: 1px solid var(--grey-line);
  margin: 64px 0;
}

/* ── NOTE / CALLOUT ─────────────────────────────────────── */
.note {
  border-left: 4px solid var(--brown);
  padding: 28px 36px 28px 28px;
  margin: 44px 0;
  background: var(--brown-pale);
  border-radius: 0 var(--r) var(--r) 0;
}
.note-label {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brown); margin-bottom: 10px;
}
.note h3 {
  font-size: 20px; font-weight: 700; color: var(--brown-dk);
  margin-bottom: 14px; line-height: 1.3; letter-spacing: -.01em;
}
.note p {
  font-size: 17.5px; line-height: 1.80; color: var(--ink-60);
  margin-bottom: 14px;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.note--purple {
  border-left-color: var(--purple);
  background: var(--purple-lt);
}
.note--purple .note-label { color: var(--purple); }
.note--purple h3 { color: var(--purple-dk); }

/* ── EPOCH TABLE ────────────────────────────────────────── */
.epoch-list { margin: 36px 0; }
.epoch {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 0 32px; padding: 28px 0;
  border-top: 1px solid var(--grey-line);
}
.epoch:last-child { border-bottom: 1px solid var(--grey-line); }
.epoch-period {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--brown); padding-top: 4px; line-height: 1.6;
}
.epoch-name {
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin-bottom: 10px; line-height: 1.3;
}
.epoch-desc {
  font-size: 17.5px; line-height: 1.82; color: var(--ink-60);
}
.epoch-example {
  font-size: 15px; color: var(--ink-35); font-style: italic;
  margin-top: 10px;
}
.epoch-tag {
  display: inline-block; margin-top: 12px;
  font-size: 12px; font-weight: 600; color: var(--brown);
  background: var(--brown-lt); border-radius: var(--r);
  padding: 3px 12px;
}
.epoch-tag--now {
  background: var(--brown); color: white;
}
@media (max-width: 580px) {
  .epoch { grid-template-columns: 1fr; gap: 6px; }
}

/* ── FACTOR LIST ────────────────────────────────────────── */
.factor-list {
  list-style: none;
  margin: 36px 0;
  display: flex; flex-direction: column; gap: 28px;
}
.factor {
  display: flex; gap: 22px; align-items: flex-start;
}
.factor-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brown-lt); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-top: 2px;
}
.factor-name {
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin-bottom: 6px; line-height: 1.3;
}
.factor-desc {
  font-size: 17.5px; line-height: 1.80; color: var(--ink-60);
}

/* ── EXERCISE ───────────────────────────────────────────── */
.exercise {
  margin: 56px 0;
  background: var(--off-white);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--grey-line);
}
.exercise-top { padding: 36px 36px 0; }
.exercise-badge {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.exercise-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.exercise-icon svg { width: 18px; height: 18px; fill: white; }
.exercise-status {
  font-size: 13px; font-weight: 700; color: var(--purple);
  letter-spacing: .04em;
}
.exercise-title {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700;
  color: var(--ink); line-height: 1.2; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.exercise-body {
  font-size: 17.5px; line-height: 1.80; color: var(--ink-60);
  padding-bottom: 32px;
}
.exercise-body p { margin-bottom: 14px; }
.exercise-body p:last-child { margin-bottom: 0; }
.exercise-body strong { color: var(--ink); }
.exercise-input-area {
  background: var(--grey-input);
  padding: 28px 36px 32px;
}
.exercise-hint {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 12px;
}
.exercise-textarea {
  width: 100%; min-height: 130px;
  border: 2px solid rgba(82,66,160,.18); border-radius: var(--r);
  background: var(--white); padding: 14px 18px;
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  color: var(--ink); resize: vertical;
  transition: border-color .15s;
}
.exercise-textarea:focus { outline: none; border-color: var(--purple); }
.exercise-textarea::placeholder { color: var(--ink-35); }
.exercise-submit {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--purple); color: white;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 11px 24px; border: none; border-radius: var(--r);
  cursor: pointer; transition: background .15s; letter-spacing: .02em;
}
.exercise-submit:hover { background: var(--purple-dk); }

/* ── QUIZ ───────────────────────────────────────────────── */
.quiz-section { margin: 64px 0; }
.quiz-heading {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brown);
  margin-bottom: 40px;
  display: flex; align-items: center; gap: 16px;
}
.quiz-heading::before {
  content: ''; display: block; width: 32px; height: 2px; background: var(--brown);
}
.quiz-q { margin-bottom: 44px; }
.quiz-q:last-of-type { margin-bottom: 0; }
.q-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-35); margin-bottom: 8px;
}
.q-text {
  font-size: 20px; font-weight: 700; color: var(--ink);
  line-height: 1.4; margin-bottom: 18px; letter-spacing: -.01em;
}
.q-options { display: flex; flex-direction: column; gap: 8px; }
.q-option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 20px;
  border: 1.5px solid var(--grey-line); border-radius: var(--r);
  cursor: pointer; font-size: 17.5px; line-height: 1.5;
  color: var(--ink-60); background: var(--white);
  transition: border-color .15s, background .15s;
}
.q-option:hover { border-color: var(--brown); background: var(--brown-pale); }
.q-option input { margin-top: 4px; flex-shrink: 0; accent-color: var(--brown); }
.q-option.correct { border-color: var(--green); background: var(--green-lt); color: var(--ink); }
.q-option.wrong { border-color: var(--red); background: var(--red-lt); color: var(--ink); }
.q-feedback {
  margin-top: 12px; padding: 12px 18px; border-radius: var(--r);
  font-size: 15px; line-height: 1.65; display: none;
}
.q-feedback.correct { background: var(--green-lt); color: var(--green); border: 1px solid rgba(45,134,83,.2); }
.q-feedback.wrong { background: var(--red-lt); color: var(--red); border: 1px solid rgba(192,57,43,.2); }
.quiz-footer { margin-top: 36px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-check {
  background: var(--brown); color: white;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  padding: 12px 30px; border: none; border-radius: var(--r);
  cursor: pointer; transition: background .15s; letter-spacing: .02em;
}
.btn-check:hover { background: var(--brown-dk); }
.quiz-result {
  font-size: 16px; font-weight: 600; padding: 10px 18px;
  border-radius: var(--r); display: none; flex: 1;
}
.quiz-result.pass { background: var(--green-lt); color: var(--green); }
.quiz-result.fail { background: var(--red-lt); color: var(--red); }

/* ── BOTTOM NAV ─────────────────────────────────────────── */
.bottom-nav {
  border-top: 1px solid var(--grey-line);
  padding: 44px var(--pad);
  max-width: calc(var(--col) + var(--pad) * 2);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.btn-prev {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink-35);
  text-decoration: none; padding: 11px 22px;
  border: 1.5px solid var(--grey-line); border-radius: var(--r);
  transition: all .15s;
}
.btn-prev:hover { color: var(--ink); border-color: var(--ink-35); text-decoration: none; }
.btn-prev.disabled { opacity: .3; pointer-events: none; }
.btn-next-main {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: white;
  background: var(--brown); text-decoration: none;
  padding: 13px 30px; border-radius: var(--r);
  transition: background .15s;
}
.btn-next-main:hover { background: var(--brown-dk); color: white; text-decoration: none; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .chap-label { flex-direction: column; gap: 8px; }
  .nav-crumb { display: none; }
}
@media (max-width: 480px) {
  .exercise-top { padding: 24px 24px 0; }
  .exercise-input-area { padding: 20px 24px 24px; }
}