/* ============================================================
   Lehrer-Landingpage – ergänzt static.css (Wörterbuch-Look).
   Externe Datei, weil die CSP styleSrc 'self' inline <style> blockt
   (inline style="" wäre erlaubt, aber eine Datei ist sauberer).
   ============================================================ */

/* Hero: Satz-Headline statt Versal-Wortmarke. */
.lehrer-h1 {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  line-height: 1.12;
}
.lehrer-lead {
  max-width: 40ch;
  margin: 14px auto 0;
}

/* CTA-Reihe (Aktion = roter Serif-Text, kein Kasten – design.md). */
.lehrer-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 26px;
}
.lehrer-cta {
  font-family: 'Gentium Plus', Georgia, serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: #9b1c1c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.lehrer-cta:hover { border-bottom-color: #c9a84c; }
.lehrer-cta .arrow { font-family: 'DM Sans', system-ui, sans-serif; }
.lehrer-link {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.86rem;
  color: #8a7f6e;
  text-decoration: none;
}
.lehrer-link:hover { color: #9b1c1c; }

/* Schritte „So funktioniert's". */
.lehrer-steps { list-style: none; counter-reset: step; margin: 4px 0 0; padding: 0; }
.lehrer-step {
  counter-increment: step;
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 0.5px solid #e8e2d8;
}
.lehrer-step:last-child { border-bottom: none; }
.lehrer-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8rem; font-weight: 700; color: #9b1c1c;
  flex-shrink: 0; padding-top: 3px; min-width: 1.4em;
}
.lehrer-step h3 { font-family: 'Gentium Plus', Georgia, serif; font-size: 1rem; font-weight: 700; margin: 0 0 3px; }
.lehrer-step p  { font-size: 0.92rem; color: #4a443c; margin: 0; line-height: 1.55; }

/* Die vier Modi. */
.lehrer-modes { list-style: none; margin: 4px 0 0; padding: 0; }
.lehrer-mode {
  padding: 11px 0;
  border-bottom: 0.5px solid #e8e2d8;
}
.lehrer-mode:last-child { border-bottom: none; }
.lehrer-mode-name { font-family: 'Gentium Plus', Georgia, serif; font-weight: 700; font-size: 1rem; }
.lehrer-mode-desc { display: block; font-size: 0.9rem; color: #4a443c; margin-top: 2px; }

/* „Warum anders" – Bullets mit Gold-Punkt. */
.lehrer-why { list-style: none; margin: 4px 0 0; padding: 0; }
.lehrer-why li {
  padding: 9px 0 9px 22px; position: relative;
  font-size: 0.94rem; color: #1a1a18;
  border-bottom: 0.5px solid #e8e2d8;
}
.lehrer-why li:last-child { border-bottom: none; }
.lehrer-why li::before { content: '·'; position: absolute; left: 6px; color: #c9a84c; font-weight: 700; }

/* FAQ. */
.lehrer-faq { margin: 4px 0 0; }
.lehrer-faq dt { font-family: 'Gentium Plus', Georgia, serif; font-weight: 700; font-size: 0.98rem; margin-top: 16px; }
.lehrer-faq dd { font-size: 0.92rem; color: #4a443c; margin: 3px 0 0; line-height: 1.55; }

/* Schluss-CTA. */
.lehrer-foot { text-align: center; margin-top: 8px; }
.lehrer-foot p { margin: 0 auto 8px; max-width: 42ch; }

/* Footer-Links. */
.lehrer-footer {
  text-align: center; margin-top: 44px;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; color: #8a7f6e;
}
.lehrer-footer a { color: #9b1c1c; text-decoration: none; }
.lehrer-footer a:hover { text-decoration: underline; }
.lehrer-footer .sep { color: #c9a84c; margin: 0 8px; }
.lehrer-footer .edition { display: block; margin-top: 10px; color: #8a7f6e; font-style: italic; font-family: 'Gentium Plus', Georgia, serif; }

@media (prefers-color-scheme: dark) {
  .lehrer-step p, .lehrer-mode-desc, .lehrer-faq dd { color: #c0b6a8; }
  .lehrer-why li { color: #f0ebe4; border-bottom-color: #3a3028; }
  .lehrer-step, .lehrer-mode { border-bottom-color: #3a3028; }
  .lehrer-cta { color: #e05555; }
  .lehrer-cta:hover { border-bottom-color: #c9a84c; }
  .lehrer-link { color: #8a8070; }
  .lehrer-link:hover { color: #e05555; }
  .lehrer-footer, .lehrer-footer .edition { color: #8a8070; }
  .lehrer-footer a { color: #e05555; }
}