/* =========================================================================
   modules.css — Stile, die nur einzelne Bereiche betreffen
   ========================================================================= */

/* --- Startseite --------------------------------------------------------- */
.hero { padding-block: var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 16ch; margin-bottom: var(--sp-4); }
.hero-sub {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--accent); margin-bottom: var(--sp-5);
}
.hero-text { font-size: var(--step-1); color: var(--text-2); }

.hero-question {
  margin-top: var(--sp-6); border-left: 2px solid var(--accent);
  padding-left: var(--sp-4);
}
.hero-question .q-label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); display: block; margin-bottom: var(--sp-2);
}
.hero-question p { font-family: var(--font-display); font-size: var(--step-2); margin: 0; }

/* --- Der Lernpfad als Kette (Startseite) -------------------------------- */
.path { list-style: none; margin: 0; padding: 0;
        display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.path li { font-size: var(--step--1); color: var(--text-2); }
.path li::after { content: "→"; margin-left: var(--sp-2); color: var(--text-3); }
.path li:last-child::after { content: ""; }
.path li:last-child { color: var(--text); }

/* --- Akteure ------------------------------------------------------------ */
.portrait {
  background: var(--card); border: 1px solid var(--line-soft);
  border-top: 3px solid var(--power); display: flex; flex-direction: column;
}
.portrait-img {
  aspect-ratio: 3 / 4; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft); position: relative;
  filter: saturate(0.72);
}
.portrait-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: var(--text-3); font-size: var(--step--1); text-align: center;
  padding: var(--sp-4);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 8px,
    rgba(255,255,255,0.015) 8px, rgba(255,255,255,0.015) 16px);
  width: 100%; height: 100%; justify-content: center;
}
.portrait-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex;
                 flex-direction: column; gap: var(--sp-2); flex: 1; }
.portrait-body h3 { margin: 0; font-size: var(--step-1); }
.portrait-role { font-size: var(--step--1); color: var(--text-2); margin: 0; }
.portrait-period { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent); }

/* --- Amtszeiten-Achse --------------------------------------------------- */
.term-chart { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.term-row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--sp-3);
            align-items: center; font-size: var(--step--1); }
.term-track { position: relative; height: 22px; background: var(--surface);
              border: 1px solid var(--line-soft); }
.term-bar { position: absolute; top: 0; bottom: 0; background: var(--power);
            opacity: 0.85; display: flex; align-items: center; padding-inline: 6px;
            font-size: 0.66rem; color: #F2EFE8; white-space: nowrap; overflow: hidden; }
.term-scale { display: grid; grid-template-columns: 11rem 1fr; gap: var(--sp-3);
              font-size: 0.66rem; color: var(--text-3); }
.term-scale-inner { display: flex; justify-content: space-between; }
@media (max-width: 700px) {
  .term-row, .term-scale { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* --- Krieg und Verbrechen ----------------------------------------------- */
.crimes {
  border: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-5); margin-top: var(--sp-6);
}
.crimes > .eyebrow { color: var(--text-2); }
.crimes-grid { display: grid; gap: var(--sp-4);
               grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.crime-item { border-left: 2px solid var(--line); padding-left: var(--sp-3); }
.crime-item h4 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.crime-item p { font-size: var(--step--1); color: var(--text-2); margin-bottom: var(--sp-2); }

/* --- Missionen ---------------------------------------------------------- */
.mission-list { display: grid; gap: var(--sp-3); }
.mission {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--sp-4);
  align-items: center; background: var(--card);
  border: 1px solid var(--line-soft); padding: var(--sp-4);
}
.mission-num { font-family: var(--font-display); font-size: var(--step-2);
               color: var(--text-3); }
.mission.is-done { border-left: 3px solid var(--ok); }
.mission h3 { margin: 0 0 var(--sp-1); font-size: var(--step-1); }
.mission p { margin: 0; font-size: var(--step--1); color: var(--text-2); }
.mission-state { font-size: 0.66rem; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--text-3); }
@media (max-width: 640px) {
  .mission { grid-template-columns: 2.2rem 1fr; }
  .mission-state, .mission .btn { grid-column: 2; justify-self: start; }
}

/* --- Konferenzen -------------------------------------------------------- */
.conf { border-top: 1px solid var(--line); padding-block: var(--sp-5); }
.conf-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }
.conf-head h3 { margin: 0; }
.conf-date { font-size: var(--step--1); color: var(--accent); letter-spacing: 0.05em; }
.conf-people { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
  font-size: var(--step--1); border: 1px solid var(--line);
  padding: 0.1em 0.6em; color: var(--text-2);
}

/* Abgeschnittener Amtszeitbalken: Beginn liegt vor dem Achsenanfang */
.term-bar.is-cut { border-left: 3px dotted var(--text); }
.term-row .source { display: block; font-size: 0.66rem; }

/* --- Frankreich-Aha-Moment im Konferenzmodul ---------------------------- */
.france-note {
  border: 1px solid var(--accent-line); background: var(--surface);
  padding: var(--sp-5); margin-bottom: var(--sp-6);
}
.france-points { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.france-points li { border-left: 2px solid var(--line); padding-left: var(--sp-3); }
.france-points .source { display: block; margin-top: var(--sp-1); }
.france-question {
  font-family: var(--font-display); font-size: var(--step-1);
  border-top: 1px solid var(--line); padding-top: var(--sp-4); margin: 0;
}

/* --- Rote Linie der politischen Entwicklung ----------------------------- */
.redline { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.redline-item {
  display: grid; grid-template-columns: 7rem 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-left: 2px solid var(--line);
  padding-left: var(--sp-4); margin-left: var(--sp-2);
}
.redline-date { font-size: var(--step--1); color: var(--accent); letter-spacing: 0.05em; }
.redline-title { font-family: var(--font-display); font-size: var(--step-1); display: block; }
.redline-item .source { display: block; margin-top: var(--sp-1); }
@media (max-width: 700px) { .redline-item { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* Sichtbar gemachte redaktionelle Korrektur */
.correction { margin-top: var(--sp-2); font-size: var(--step--1); }
.correction summary { cursor: pointer; color: var(--accent); font-size: 0.7rem; letter-spacing: 0.06em; }
.correction .source { display: block; margin-top: var(--sp-2); }

.person-extra { border-top: 1px solid var(--line-soft); padding-top: var(--sp-2); margin-top: var(--sp-2); }
.person-extra ul { font-size: var(--step--1); color: var(--text-2); margin: var(--sp-2) 0; padding-left: 1.1em; }
.person-extra .source { display: block; margin-top: var(--sp-1); }