/* Systemschrift, ohne externe Ressourcen. */
:root {
  color-scheme: light dark;
  --background: #f3f5f8;
  --surface: #ffffff;
  --text: #172033;
  --muted: #475569;
  --border: #c5ceda;
  --link: #174a8b;
  --focus: #9d174d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #111827;
    --surface: #1e293b;
    --text: #f1f5f9;
    --muted: #cbd5e1;
    --border: #64748b;
    --link: #a6c9ff;
    --focus: #fda4af;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
main {
  width: min(100%, 70rem);
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 3rem);
}
header { margin-bottom: 2rem; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; }
header p { color: var(--muted); }
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.course-card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  overflow-wrap: anywhere;
}
h2 { margin: 0 0 0.75rem; font-size: 1.25rem; line-height: 1.4; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.status { margin: 0; font-weight: 600; }
.access-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; }