* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #222; min-height: 100vh; display: flex; flex-direction: column;
}
header { text-align: center; color: #fff; padding: 4rem 1rem 2rem; }
header h1 { font-size: 3rem; }
.untertitel { font-size: 1.25rem; opacity: .85; margin-top: .5rem; }
main { flex: 1; max-width: 800px; margin: 0 auto; padding: 1rem; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.karte { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.karte h2 { margin-bottom: .75rem; color: #1e3c72; }
a { color: #2a5298; }
footer { text-align: center; color: #fff; opacity: .7; padding: 2rem 1rem; }