:root {
      --blue: #2b4057;
      --blue-dark: #1d2c3c;
      --orange: #b94b02;
      --orange-dark: #8e3900;
      --ink: #172633;
      --muted: #5a6875;
      --paper: #f7f8fa;
      --card: #ffffff;
      --line: #d5dce2;
      --soft-blue: #edf2f6;
      --soft-orange: #fff0e6;
      --success: #186342;
      --warning: #795000;
      --danger: #8b2727;
      --shadow: 0 12px 32px rgba(43, 64, 87, .10);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: linear-gradient(180deg, #edf2f6 0, var(--paper) 360px);
      line-height: 1.55;
    }

    .hero {
      color: white;
      background: radial-gradient(circle at 85% 18%, rgba(185, 75, 2, .46), transparent 27%), linear-gradient(125deg, var(--blue-dark), var(--blue));
      padding: 54px 20px 46px;
    }
    .wrap { max-width: 1080px; margin: 0 auto; }
    .eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .11em; font-size: .78rem; font-weight: 800; color: #f8d7be; }
    h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; max-width: 820px; }
    .lead { max-width: 760px; margin: 18px 0 0; font-size: 1.12rem; color: #edf4f9; }
    .hero-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; align-items: end; }
    .progress-card { padding: 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 15px; background: rgba(255,255,255,.10); backdrop-filter: blur(7px); }
    .progress-card strong { display: block; font-size: 1.6rem; }
    .progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; margin: 10px 0 5px; }
    .progress > span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .35s ease; }

    main { padding: 28px 20px 70px; }
    .notice { border-left: 5px solid var(--orange); background: var(--soft-orange); padding: 16px 18px; border-radius: 0 12px 12px 0; margin-bottom: 26px; }
    .nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 32px; }
    .nav a { text-decoration: none; padding: 8px 12px; color: white; background: var(--blue); font-weight: 750; border-radius: 999px; font-size: .9rem; }
    .nav a:hover, .nav a:focus { background: var(--orange); outline: 2px solid transparent; }

    section { scroll-margin-top: 20px; margin: 38px 0; }
    .section-title { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; }
    .badge { color: white; background: var(--orange); border-radius: 999px; min-width: 48px; padding: 5px 11px; text-align: center; font-weight: 850; }
    h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); color: var(--blue); }
    h3 { margin-top: 0; font-size: 1.15rem; color: var(--blue); }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px); margin: 16px 0; }
    .task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
    .pill { border-radius: 999px; background: var(--soft-blue); color: var(--blue); padding: 4px 10px; font-size: .83rem; font-weight: 750; }
    .context { padding: 14px 16px; background: var(--soft-blue); border-radius: 10px; }
    blockquote { margin: 16px 0; padding: 14px 18px; border-left: 4px solid var(--orange); border-radius: 0 9px 9px 0; background: #fafbfd; font-style: italic; }
    label { display: block; margin: 15px 0 6px; font-weight: 750; }
    input[type="text"], textarea, select { width: 100%; padding: 11px 12px; border: 1px solid #b9c5cf; border-radius: 9px; color: var(--ink); font: inherit; background: white; }
    textarea { min-height: 112px; resize: vertical; }
    input:focus, textarea:focus, select:focus { outline: 3px solid rgba(185, 75, 2, .18); border-color: var(--orange); }
    .choices { display: grid; gap: 9px; margin: 12px 0; }
    .choice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
    .choice:hover { background: var(--soft-blue); }
    .choice input { margin-top: 5px; accent-color: var(--orange); }
    button { appearance: none; border: 0; border-radius: 9px; padding: 10px 14px; font: inherit; font-weight: 800; cursor: pointer; background: var(--orange); color: white; margin: 12px 8px 0 0; }
    button:hover { background: var(--orange-dark); }
    button.secondary { background: var(--blue); color: white; }
    button.secondary:hover { background: var(--blue-dark); }
    .feedback { display: none; margin-top: 15px; padding: 13px 15px; border-radius: 10px; }
    .feedback.good { display: block; color: #0b5134; background: #e4f4ea; border: 1px solid #b4ddc1; }
    .feedback.warn { display: block; color: var(--warning); background: #fff4d7; border: 1px solid #f0d790; }
    .feedback.bad { display: block; color: var(--danger); background: #feeceb; border: 1px solid #efbfba; }
    .table-wrap { overflow-x: auto; }
    table { border-collapse: collapse; width: 100%; margin: 14px 0; }
    th, td { border: 1px solid var(--line); padding: 10px; vertical-align: top; text-align: left; }
    th { color: white; background: var(--blue); }
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .small { color: var(--muted); font-size: .92rem; }
    .final { background: linear-gradient(135deg, var(--soft-blue), var(--soft-orange)); border: 1px solid #d8c9c0; }
    footer { padding: 25px 20px 40px; color: var(--muted); text-align: center; font-size: .9rem; }
    /* --- Interaktive Erweiterungen --- */
    .nav a { position: relative; transition: transform .12s ease, background .2s ease; }
    .nav a:hover { transform: translateY(-2px); }
    .nav a.nav-done::after { content: "✓"; margin-left: 6px; font-weight: 900; }
    .nav a.nav-done { background: var(--success); }
    .badge.badge-done { background: var(--success); }
    .badge.badge-done::after { content: " ✓"; }
    section.is-done > .card, section.is-done > .grid-2 > .card { border-color: #b4ddc1; }
    .wordcount { float: right; font-weight: 600; color: var(--muted); font-size: .82rem; margin-top: 15px; }
    .wordcount.ok { color: var(--success); }
    .saved-tick { display: inline-block; margin-left: 10px; color: var(--success); font-weight: 800; font-size: .9rem; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
    .saved-tick.show { opacity: 1; transform: translateY(0); }
    button { transition: background .2s ease, transform .1s ease, box-shadow .2s ease; }
    button:active { transform: translateY(1px); }
    .choice { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
    .choice.chosen { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(185,75,2,.18); background: var(--soft-orange); }
    .choice.correct { border-color: var(--success); box-shadow: 0 0 0 2px rgba(24,99,66,.2); background: #e4f4ea; }
    .choice.incorrect { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(139,39,39,.18); background: #feeceb; }
    .feedback { animation: fbin .3s ease; }
    @keyframes fbin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    .progress > span { position: relative; }
    .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(80px); background: var(--blue-dark); color: white; padding: 13px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28); font-weight: 700; z-index: 999; opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .35s ease; max-width: 90vw; }
    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    .celebrate { border: 2px solid var(--success) !important; background: linear-gradient(135deg, #e4f4ea, var(--soft-orange)) !important; }
    .autosave-note { color:#edf4f9; font-size:.72rem; margin-top:6px; display:block; }
    .reveal-btn-wrap { margin-top: 4px; }
    details.hintbox { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; }
    details.hintbox > summary { cursor: pointer; padding: 11px 14px; font-weight: 800; color: var(--blue); background: var(--soft-blue); list-style: none; }
    details.hintbox > summary::-webkit-details-marker { display: none; }
    details.hintbox > summary::before { content: "▸ "; }
    details.hintbox[open] > summary::before { content: "▾ "; }
    details.hintbox > div { padding: 13px 15px; }
    /* --- KI-Chat --- */
    .chat { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfcfd; }
    .chat-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--soft-blue); border-bottom: 1px solid var(--line); }
    .chat-head strong { color: var(--blue); font-size: .98rem; }
    .chat-modes { display: inline-flex; gap: 4px; background: white; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
    .chat-modes button { margin: 0; padding: 5px 12px; font-size: .82rem; font-weight: 700; border-radius: 999px; background: transparent; color: var(--blue); }
    .chat-modes button.active { background: var(--orange); color: white; }
    .chat-log { max-height: 340px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .msg { padding: 10px 13px; border-radius: 12px; max-width: 85%; line-height: 1.5; font-size: .96rem; white-space: pre-wrap; word-wrap: break-word; }
    .msg.user { align-self: flex-end; background: var(--blue); color: white; border-bottom-right-radius: 4px; }
    .msg.bot { align-self: flex-start; background: white; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
    .msg.sys { align-self: center; background: var(--soft-orange); color: var(--orange-dark); font-size: .85rem; text-align: center; border: 1px solid #f0d3bd; max-width: 100%; }
    .msg.typing { color: var(--muted); font-style: italic; }
    .chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: white; }
    .chat-input textarea { min-height: 46px; max-height: 120px; resize: vertical; }
    .chat-input button { margin: 0; align-self: stretch; white-space: nowrap; }
    .chat-toggle { margin-top: 12px; }
    .chat-hint { padding: 8px 14px 12px; font-size: .82rem; color: var(--muted); }
    @media (max-width: 760px) { .hero-grid, .grid-2 { grid-template-columns: 1fr; } .hero { padding-top: 38px; } .msg { max-width: 92%; } }
    .module-divider { height: 3px; background: var(--orange); max-width: 1080px; margin: 20px auto 0; border-radius: 999px; }
    .hero-m2 { background: radial-gradient(circle at 85% 18%, rgba(185, 75, 2, .40), transparent 27%), linear-gradient(125deg, #24384c, #33506c); margin-top: 0; }
    .hero-c1 { background: radial-gradient(circle at 85% 18%, rgba(185, 75, 2, .40), transparent 27%), linear-gradient(125deg, var(--blue-dark), var(--blue)); margin-top: 0; }
    .hero-c4 { background: radial-gradient(circle at 85% 18%, rgba(185, 75, 2, .40), transparent 27%), linear-gradient(125deg, #2a2440, #3c3560); margin-top: 0; }
    @media print { .hero { padding: 25px; } button, .nav, .chat, .chat-toggle { display: none; } body { background: white; } .card { box-shadow: none; break-inside: avoid; } }