:root {
      --bg: #f4f7fb;
      --card: #ffffff;
      --ink: #1a2a3a;
      --muted: #556070;
      --primary: #1d4ed8;
      --primary-2: #0f766e;
      --ok: #166534;
      --ok-bg: #dcfce7;
      --bad: #991b1b;
      --bad-bg: #fee2e2;
      --pending: #854d0e;
      --pending-bg: #fef3c7;
      --border: #d8e0ea;
      /* Lesetext / Zitatkasten (von Aufgaben-Layout abgrenzen) */
      --excerpt-bg: #fffbeb;
      --excerpt-border: #d97706;
      --excerpt-ink: #422006;
      /* Arbeitssätze (Sprachteil) – einheitlich helles Grün */
      --arbeitssatz-bg: #ecfdf8;
      --arbeitssatz-bg2: #f0fdfa;
      --arbeitssatz-border: #6ee7bf;
      --arbeitssatz-ink: #0f172a;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Avenir Next", "Segoe UI", Tahoma, sans-serif;
      color: var(--ink);
      background: radial-gradient(circle at 8% -10%, #dbeafe 0%, transparent 42%),
                  radial-gradient(circle at 100% 10%, #ccfbf1 0%, transparent 30%),
                  var(--bg);
      line-height: 1.4;
    }
    .wrap { max-width: 1200px; margin: 0 auto; padding: 18px; }
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(20, 35, 60, 0.08);
      padding: 16px;
      margin-bottom: 14px;
    }
    h1, h2, h3 { margin: 0 0 10px; }
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.25rem; color: #0f3a79; }
    h3 { font-size: 1rem; }
    p { margin: 0 0 10px; }
    .muted { color: var(--muted); }
    .row { display: flex; gap: 10px; flex-wrap: wrap; }
    .field { display: flex; flex-direction: column; gap: 5px; min-width: 180px; flex: 1; }
    input[type="text"], input[type="date"], textarea, select {
      width: 100%;
      border: 1px solid #b8c4d1;
      border-radius: 8px;
      padding: 8px 10px;
      font: inherit;
      background: #fff;
    }
    textarea { min-height: 84px; resize: vertical; }
    .essay { min-height: 280px; }
    .nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    button {
      border: 1px solid transparent;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      padding: 8px 12px;
      font-weight: 700;
      cursor: pointer;
    }
    button:hover { filter: brightness(0.95); }
    button.secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
    button.teal { background: var(--primary-2); }
    button.warning { background: #b45309; }
    button:disabled { opacity: 0.6; cursor: not-allowed; }
    a.btn-like {
      display: inline-block;
      border: 1px solid transparent;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      padding: 8px 12px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      font-size: inherit;
      line-height: normal;
    }
    a.btn-like:hover { filter: brightness(0.95); }
    a.btn-like.secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
    .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .section { display: none; }
    .section.active { display: block; }
    .task {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 12px;
      background: #fbfdff;
    }
    .task h3 { color: #0f172a; }
    .task small { color: var(--muted); }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .matrix {
      width: 100%; border-collapse: collapse; margin-top: 8px;
    }
    .matrix th, .matrix td {
      border: 1px solid #d4dde7;
      padding: 7px;
      vertical-align: top;
      text-align: left;
      font-size: 0.95rem;
    }
    .matrix th { background: #eef4fb; }
    .feedback { margin-top: 8px; padding: 8px; border-radius: 8px; font-size: 0.93rem; }
    .ok { background: var(--ok-bg); color: var(--ok); }
    .bad { background: var(--bad-bg); color: var(--bad); }
    .pending { background: var(--pending-bg); color: var(--pending); }
    .result-line { border-bottom: 1px dashed #d5dde8; padding: 6px 0; }
    .result-line:last-child { border-bottom: 0; }
    .pill {
      display: inline-block; border-radius: 999px; padding: 2px 8px;
      font-size: 0.8rem; font-weight: 700;
      border: 1px solid #c8d5e4;
    }
    .tag-a { background: #e0edff; color: #0f3a79; }
    .tag-b { background: #e7faf4; color: #0f5f53; }
    .tag-c { background: #fff1e8; color: #9a3412; }
    .hidden { display: none; }
    /* Textauszug aus dem Lesetext – optisch klar von Aufgabenstellung und Eingabefeldern getrennt */
    .excerpt {
      position: relative;
      margin: 12px 0 14px;
      padding: 12px 14px 14px 16px;
      border-radius: 0 12px 12px 0;
      border: 1px solid #e8d5bb;
      border-left: 5px solid var(--excerpt-border);
      background: linear-gradient(135deg, var(--excerpt-bg) 0%, #fffdf5 55%, #fffbeb 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 4px 14px rgba(180, 83, 9, 0.08);
    }
    .excerpt p {
      margin: 0 0 8px;
      font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 1.05rem;
      line-height: 1.55;
      color: var(--excerpt-ink);
    }
    .excerpt p:last-child { margin-bottom: 0; }
    /* Direkt folgende Aufgabenstellung als „Frage“, nicht als Lesetext */
    .excerpt + p {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid #e2e8f0;
      font-weight: 600;
      color: #0f172a;
    }
    /* Arbeitssätze (B-Teil): markierter Satz / Vorgabe — hellgrün, über alle Jahrgänge gleich */
    .arbeitssatz {
      margin: 0.5rem 0 0.85rem;
      padding: 0.85rem 1rem;
      border: 1px solid var(--arbeitssatz-border);
      border-radius: 10px;
      background: linear-gradient(165deg, var(--arbeitssatz-bg) 0%, var(--arbeitssatz-bg2) 100%);
      color: var(--arbeitssatz-ink);
      font-weight: 500;
      line-height: 1.5;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    }
    /* Teil C: Schreibaufgaben — Überschrift als abgesetzter Headerkasten (I vs. II unterscheidbar) */
    .schreib-header {
      margin: -12px -12px 12px -12px;
      padding: 11px 14px 12px;
      border-radius: 11px 11px 0 0;
      border: 1px solid transparent;
      border-bottom: 2px solid transparent;
    }
    .schreib-header h3 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .schreib-header--1 {
      background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 55%, #ffedd5 100%);
      border-color: #fed7aa;
      border-bottom-color: #ea580c;
    }
    .schreib-header--1 h3 { color: #7c2d12; }
    .schreib-header--2 {
      background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 45%, #f0f9ff 100%);
      border-color: #a5f3fc;
      border-bottom-color: #0d9488;
    }
    .schreib-header--2 h3 { color: #0f766e; }
    .ai-box { white-space: pre-wrap; }
    @media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
    @media print {
      .no-print { display: none !important; }
      body { background: #fff; }
      .task.print-c { break-inside: avoid; }
      .arbeitssatz {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        break-inside: avoid;
      }
      .schreib-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }