body { font-family: Calibri, Arial, sans-serif; margin: 0; background: #f4f6fa; color: #1a2b45; }

    .hero { background: #2F5490; color: #fff; padding: 64px 24px 56px; text-align: center; }
    .hero h1 { margin: 0 0 12px; font-size: 32pt; font-weight: 600; }
    .hero p { margin: 0 auto; max-width: 640px; font-size: 13pt; line-height: 1.5; color: #dbe4f3; }

    /* Schnell-Scan-Pills (Grammar/Tables/Exercises/Levels in <1,5 s erkennbar) */
    .hero-pills { margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; }
    .hero-pill {
      font-size: 11pt; font-weight: 600; color: #fff; white-space: nowrap;
      background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.30);
      padding: 7px 16px; border-radius: 999px;
    }

    main { max-width: 1040px; margin: 0 auto; padding: 40px 24px 64px; }
    .section-label { margin: 0 0 16px; font-size: 10pt; letter-spacing: .04em; text-transform: uppercase; color: #6a7a96; }

    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
    .card {
      display: block; text-decoration: none; color: inherit;
      background: #fff; border: 1px solid #d6deec; border-radius: 8px;
      padding: 24px; transition: box-shadow 120ms ease, transform 120ms ease;
    }
    .card:hover { box-shadow: 0 6px 20px rgba(47,84,144,0.14); transform: translateY(-2px); }
    .card .k { font-size: 10pt; letter-spacing: 0.04em; text-transform: uppercase; color: #6a7a96; }
    .card h2 { margin: 6px 0 8px; font-size: 17pt; color: #2F5490; font-weight: 600; }
    .card p { margin: 0; font-size: 11pt; line-height: 1.5; color: #44546e; }

    .meta { margin-top: 48px; font-size: 10pt; color: #6a7a96; text-align: center; }

    footer { padding: 24px; text-align: center; font-size: 10pt; color: #8a96ab; }