:root {
    --bg: #eef2f0; --ink: #14211c; --muted: #5c6b64; --line: #d5dfda;
    --card: #fffcf8; --accent: #0c6b54; --soft: #e3f4ee;
    --warn: #8a5a12; --warn-soft: #f8efd9;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: Palatino, Georgia, serif; background: var(--bg); color: var(--ink); line-height: 1.45; }
  .app { max-width: 740px; margin: 0 auto; padding: 22px 16px 72px; }
  .brand, .flag, summary, label.choice, .meta, footer { font-family: ui-sans-serif, system-ui, sans-serif; }
  .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
  .brand { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .flag { font-size: 12px; background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 4px 8px; }
  h1 { font-size: 30px; line-height: 1.08; margin: 14px 0 8px; font-weight: 560; }
  h2 { font-size: 22px; margin: 0 0 8px; font-weight: 560; }
  .lead { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
  .card, details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; }
  .meta { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
  ol { margin: 8px 0 0; padding-left: 18px; }
  summary { cursor: pointer; font-size: 17px; font-weight: 650; }
  summary small { display: block; color: var(--accent); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
  .lage { margin: 12px 0; padding: 14px 16px; border-left: 4px solid var(--accent); border-radius: 10px; background: #f4f8f6; font-style: italic; }
  .ask { margin: 14px 0 8px; padding: 12px 14px; border-radius: 12px; background: #edf2f7; font-weight: 700; }
  .learning-note { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--warn-soft); }
  .learning-note p:first-child { margin-top: 0; }
  .concept { border-left: 4px solid var(--accent); }
  .teacher { border-left: 4px solid var(--warn); background: #fffaf0; }
  .locked { opacity: .58; }
  .locked summary { cursor: not-allowed; }
  .locknote { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f2f3f2; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; }
  .continue { display: inline-block; margin-top: 12px; border: 0; border-radius: 10px; padding: 10px 15px; background: var(--accent); color: #fff; font: 650 14px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
  .continue:hover { filter: brightness(.95); }
  .continue:focus-visible, label.choice:focus-within, summary:focus-visible { outline: 3px solid #9bcdbd; outline-offset: 2px; }
  label.choice { display: block; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
  input { position: absolute; opacity: 0; pointer-events: none; }
  input.good:checked + label { background: var(--soft); border-color: #b7dcc8; }
  input.bad:checked + label { background: #f8ece8; border-color: #e4c8c0; }
  .effect { display: none; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--soft); color: #124838; }
  .next { display: none; margin-top: 12px; }
  textarea { width: 100%; min-height: 72px; border-radius: 12px; border: 1px solid var(--line); padding: 10px; font: 16px/1.4 Georgia, serif; }
  footer { color: var(--muted); font-size: 13px; }

  .sequence { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; }
  .step { display:none; }
  .step.active { display:block; }
  .progress { height:7px; background:#e5ebe8; border-radius:999px; overflow:hidden; margin:10px 0 18px; }
  .progress > span { display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
  .seq-choice { display:block; margin-top:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-family:ui-sans-serif,system-ui,sans-serif; }
  .seq-choice:hover { border-color:#9bb8ad; }
  .seq-choice.selected { background:#edf2f7; border-color:#9bb8ad; }
  .seq-next { margin-top:14px; border:0; border-radius:10px; padding:10px 15px; background:var(--accent); color:#fff; font:650 14px/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
  .seq-next:disabled { opacity:.4; cursor:not-allowed; }
  .section-feedback { display:none; margin-top:14px; padding:14px; border-radius:12px; background:var(--soft); }
  .diagnostic { margin:8px 0 0; padding-left:18px; }

[hidden]{display:none!important} .top{flex-wrap:wrap} nav{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0} nav a,.back{font:14px system-ui;color:var(--accent);padding:8px} nav a[aria-current]{background:var(--soft);border-radius:8px;font-weight:bold} a.continue{text-decoration:none;line-height:1.4} button{min-height:44px} .seq-choice{width:100%;text-align:left;font-size:16px;color:var(--ink)} .seq-choice:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #488979;outline-offset:3px} input.good:checked+label,input.bad:checked+label{background:#edf2f7;border-color:#658b80} input[type=text]{position:static;opacity:1;pointer-events:auto;width:100%;max-width:260px;border:1px solid #7d958a;border-radius:7px;padding:9px;font:16px system-ui;color:var(--ink);background:white} .gap{display:inline-flex;flex-direction:column;vertical-align:middle;margin:5px;max-width:100%} .gap small{font:11px system-ui;color:var(--muted)} .cloze p{line-height:2} .answer{padding:12px 0;border-bottom:1px solid var(--line)} .status{font-weight:bold} footer{margin-top:28px;overflow-wrap:anywhere} .flow{font:16px/1.8 system-ui;color:var(--accent)} @media(max-width:480px){h1{font-size:28px}.app{padding:16px 12px 40px}.card,details,.sequence{padding:16px}.flag{font-size:11px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* V1.2.1: Sichtbare Einstiege und kurze Orientierung */
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.entry{display:flex;flex-direction:column;align-items:flex-start}.entry .continue{margin-top:auto}.entry p{margin-bottom:22px}.storage-note{font:14px/1.5 system-ui;color:var(--muted)}nav[aria-label="Seiten"]{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}nav[aria-label="Seiten"] a{border:1px solid #b5cbc1;border-radius:8px;text-decoration:none;background:white;font-weight:600}nav[aria-label="Seiten"] a[aria-current]{background:var(--accent);color:white} @media(max-width:580px){.entry-grid{grid-template-columns:1fr}nav[aria-label="Seiten"] a{width:100%;padding:12px}.entry .continue{width:100%;text-align:center}}