init commit

2026-06-30 11:47:01 +02:00
commit d100e07b79
8 changed files with 757 additions and 0 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/MISSION.md
+++ b/MISSION.md
@@ -0,0 +1,26 @@
+# Mission: German Fluency
+
+## Why
+
+Living and working in Heitersheim, Germany, with a German employer (cn-mobility GmbH) and children in German schools. The gap between passive survival-German and confident, fluent German is costing real connection — with colleagues, with the community, and with my children's daily lives. This is about belonging, not just communicating.
+
+## Success looks like
+
+- Speak without searching for words or restructuring thoughts mid-sentence
+- Write work emails in German confidently, without second-guessing register or grammar
+- Understand German TV, radio, podcasts, and films without subtitles
+- Join conversations at school events, with neighbours, and in community settings without anxiety
+- Read German news (e.g. Badische Zeitung, Der Spiegel) fluently
+
+## Constraints
+
+- B1.2 level, attending Goethe Institut twice a week (class already handles systematic grammar)
+- 30-60 minutes per day available for self-study (reading, listening, speaking practice)
+- Native English speaker — Germanic false friends and article/case system are the main structural hurdles
+- No budget constraint mentioned; apps, courses, and resources are fair game
+
+## Out of scope
+
+- Academic German (literary analysis, formal register beyond professional email)
+- Translation or interpretation work
+- Dialect study (Alemannic/Badisch) — standard Hochdeutsch is the target
--- a/NOTES.md
+++ b/NOTES.md
@@ -0,0 +1,31 @@
+# Teaching Notes
+
+## User profile
+
+- Native English speaker, living in Heitersheim (Baden-Wurttemberg), Germany
+- Works at cn-mobility GmbH — German-language workplace
+- Children in German schools — wants to be part of their lives more fully
+- B1.2 at Goethe Institut Freiburg, 2x/week
+- 30-60 min/day for self-study
+- Has a detailed weak-spots document from prior practice; that document should seed early lessons
+
+## Known weak spots (from their self-assessment doc)
+
+Priority order:
+1. V2 word order after fronted elements (~40% of errors) — highest leverage
+2. Verb conjugation: *ich habe* not *ich hat*
+3. Noun gender and adjective endings (especially tech vocab)
+4. Possessive pronouns (*sein-* vs *ihn/er*)
+5. Missing prepositions (*an* with task work)
+6. Compound noun splitting (*Datenbank kopie* → *Datenbankkopie*)
+7. Partizip II — inseparable prefix verbs take no *ge-*
+8. du/Sie register slips in formal messages
+9. Subordinate clause verb-final (*weil, dass, ob, wenn*)
+10. Meaning distinctions: *ob* vs *wenn*, *fur mich* vs *bei mir*, *eingestellt* etc.
+
+## Teaching preferences / approach
+
+- Goethe class already handles systematic grammar — complement, don't duplicate
+- Ground all lessons in real-life contexts: cn-mobility work, Heitersheim community, children's school
+- Interleave listening + reading + writing practice, not just grammar drills
+- Space repetition of weak-spot patterns across lessons
--- a/RESOURCES.md
+++ b/RESOURCES.md
@@ -0,0 +1,46 @@
+# German Learning Resources
+
+## Knowledge
+
+- [DW Nicos Weg (B1)](https://learngerman.dw.com/en/nicos-weg/c-36519691)
+  DW's flagship B1 video course. Grammar explanations anchored in everyday German life. Use for: systematic B1 grammar and vocabulary, watching real conversational German.
+
+- [DW Top-Thema mit Vokabeln](https://www.dw.com/de/deutsch-lernen/top-thema/s-8031)
+  Weekly current-affairs audio (slow, clear narration) with transcript and vocabulary. Use for: daily 10-minute listening practice tied to real news.
+
+- [Easy German YouTube](https://www.youtube.com/c/EasyGerman)
+  Street interviews with native speakers + dual German/English subtitles. B1-B2 sweet spot. Use for: authentic listening, hearing regional speech, confidence that real German is comprehensible.
+
+- [Slow German Podcast — Annik Rubens](https://slowgerman.com/)
+  Slow, clear narration on German culture, history, and everyday life. Transcripts available. Use for: daily commute listening, 5-10 minute episodes at exactly B1-B2 pace.
+
+- [Hammer's German Grammar and Usage — Martin Durrell](https://www.routledge.com/Hammers-German-Grammar-and-Usage/Durrell/p/book/9781138659353)
+  The reference grammar used by university German departments. Exhaustive but well-indexed. Use for: looking up edge cases in word order, adjective endings, prepositions — not for reading cover to cover.
+
+- [Duden Online](https://www.duden.de/)
+  Authoritative German dictionary with gender, plurals, and usage examples. Use for: confirming article genders, correct compound noun formation.
+
+- [DWDS — Digitales Worterbuch der deutschen Sprache](https://www.dwds.de/)
+  Corpus-based dictionary with frequency data and real example sentences. Use for: checking whether a word is actually used the way you think, finding collocations.
+
+- [Badische Zeitung](https://www.badische-zeitung.de/)
+  Regional newspaper covering Freiburg and the Markgraflerland (including Heitersheim). Use for: daily reading practice in locally relevant German, community context.
+
+## Wisdom (Communities)
+
+- [r/german](https://www.reddit.com/r/german/)
+  High-quality moderated subreddit with native speaker participation. Use for: grammar questions, register doubts, writing feedback.
+
+- [r/WriteStreakGerman](https://www.reddit.com/r/WriteStreakGerman/)
+  Daily writing streak community — post a short German text, get corrections from natives. Use for: low-stakes daily writing practice with real feedback.
+
+- Goethe Institut Freiburg class — B1.2, twice a week
+  Current formal study environment. Use for: structured grammar, speaking practice with peers, teacher feedback.
+
+- Local: Heitersheim/Markgraflerland community events, Vereine (clubs/associations)
+  The highest-leverage wisdom source. Use for: real community immersion, building local relationships, practising spontaneous speech.
+
+## Gaps
+
+- No strong resource yet for formal email writing practice (professional German register)
+- No resource specifically for Goethe B2 preparation (relevant when B1 is complete)
--- a/assets/style.css
+++ b/assets/style.css
@@ -0,0 +1,262 @@
+/* German Learning — Shared Stylesheet */
+
+:root {
+  --ink: #1a1a1a;
+  --ink-light: #555;
+  --ink-faint: #888;
+  --bg: #fafaf8;
+  --bg-warm: #f4f1eb;
+  --accent: #2e5d9e;
+  --accent-dark: #1d3f6e;
+  --green: #1e6b3c;
+  --green-bg: #eaf5ee;
+  --red: #8b1a1a;
+  --red-bg: #fdecea;
+  --yellow-bg: #fdf8e8;
+  --border: #ddd;
+  --radius: 6px;
+  --max-w: 680px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 18px;
+  line-height: 1.7;
+  color: var(--ink);
+  background: var(--bg);
+  padding: 3rem 1.5rem 6rem;
+}
+
+.page {
+  max-width: var(--max-w);
+  margin: 0 auto;
+}
+
+/* Typography */
+
+h1 {
+  font-size: 1.9rem;
+  line-height: 1.25;
+  margin-bottom: 0.3rem;
+  color: var(--ink);
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: var(--ink-light);
+  margin-bottom: 2.5rem;
+  font-style: italic;
+}
+
+h2 {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin: 2.5rem 0 0.75rem;
+  color: var(--ink);
+  letter-spacing: 0.01em;
+}
+
+h3 {
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 1.5rem 0 0.5rem;
+  color: var(--ink);
+}
+
+p { margin-bottom: 1rem; }
+
+a { color: var(--accent); }
+a:hover { color: var(--accent-dark); }
+
+code, .de {
+  font-family: 'Courier New', monospace;
+  font-size: 0.92em;
+  background: var(--bg-warm);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  color: var(--accent-dark);
+}
+
+/* Rule box */
+
+.rule-box {
+  background: var(--yellow-bg);
+  border-left: 4px solid #c9a800;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.rule-box .formula {
+  font-family: 'Courier New', monospace;
+  font-size: 1rem;
+  color: var(--ink);
+  margin-top: 0.5rem;
+}
+
+/* Example table */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25rem 0;
+  font-size: 0.95rem;
+}
+
+th {
+  text-align: left;
+  padding: 0.4rem 0.75rem;
+  border-bottom: 2px solid var(--border);
+  color: var(--ink-light);
+  font-size: 0.85rem;
+  font-style: normal;
+  letter-spacing: 0.05em;
+}
+
+td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+tr:last-child td { border-bottom: none; }
+
+.wrong { color: var(--red); }
+.right { color: var(--green); }
+
+/* Quiz */
+
+.quiz-section {
+  margin: 2rem 0;
+}
+
+.question-block {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1rem;
+  transition: border-color 0.2s;
+}
+
+.question-block.correct { border-color: #5aab77; background: var(--green-bg); }
+.question-block.incorrect { border-color: #c97070; background: var(--red-bg); }
+
+.question-text {
+  font-size: 1rem;
+  margin-bottom: 0.9rem;
+  line-height: 1.5;
+}
+
+.blank {
+  display: inline-block;
+  min-width: 120px;
+  border-bottom: 2px solid var(--ink-light);
+  margin: 0 0.2em;
+  color: transparent;
+  font-family: 'Courier New', monospace;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.option-btn {
+  background: var(--bg-warm);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.55rem 1rem;
+  text-align: left;
+  font-family: 'Courier New', monospace;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  color: var(--ink);
+}
+
+.option-btn:hover:not(:disabled) {
+  background: #e8e4da;
+  border-color: #bbb;
+}
+
+.option-btn.selected-correct {
+  background: var(--green-bg);
+  border-color: #5aab77;
+  color: var(--green);
+  font-weight: bold;
+}
+
+.option-btn.selected-incorrect {
+  background: var(--red-bg);
+  border-color: #c97070;
+  color: var(--red);
+  text-decoration: line-through;
+}
+
+.option-btn.reveal-correct {
+  background: var(--green-bg);
+  border-color: #5aab77;
+  color: var(--green);
+}
+
+.option-btn:disabled { cursor: default; }
+
+.feedback {
+  margin-top: 0.75rem;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  display: none;
+}
+
+.feedback.show { display: block; }
+.feedback.correct-fb { color: var(--green); }
+.feedback.incorrect-fb { color: var(--red); }
+
+/* Score */
+
+.score-bar {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.5rem;
+  margin-top: 1.5rem;
+  display: none;
+  font-size: 1rem;
+}
+
+.score-bar.show { display: block; }
+.score-number { font-size: 1.5rem; font-weight: bold; color: var(--accent); }
+
+/* Nav footer */
+
+.lesson-nav {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.88rem;
+  color: var(--ink-faint);
+}
+
+.lesson-nav a { color: var(--ink-light); }
+
+.ask-teacher {
+  background: var(--bg-warm);
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  margin-top: 2rem;
+  font-size: 0.92rem;
+  color: var(--ink-light);
+  border: 1px solid var(--border);
+}
+
+/* Print */
+
+@media print {
+  body { background: white; padding: 1rem; }
+  .option-btn { border: 1px solid #aaa; }
+  .quiz-section { display: none; }
+}
--- a/learning-records/0001-starting-point.md
+++ b/learning-records/0001-starting-point.md
@@ -0,0 +1,7 @@
+# Starting Point: B1.2, English Native, Living in Germany
+
+The user enters at B1.2 (Goethe Institut), living and working in Heitersheim, Germany, with a German-speaking workplace and children in German schools. They have a detailed self-assessment of their writing errors from prior practice sessions, giving an unusually clear view of the starting floor.
+
+**Evidence:** Self-provided weak-spots document covering V2 word order, verb conjugation (ich habe/hat), noun gender, adjective endings, possessive pronouns, prepositions, compound nouns, Partizip II, du/Sie register, subordinate clause word order, and several meaning-level distinctions.
+
+**Implications:** Skip remedial B1 content. First lessons should drill V2 word order (highest-error, highest-leverage), grounded in real-life contexts (work emails, community, family). Goethe class covers systematic grammar — complement with authentic listening and productive writing practice.
--- a/lessons/0001-v2-word-order.html
+++ b/lessons/0001-v2-word-order.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lesson 1 — V2 Word Order</title>
+  <link rel="stylesheet" href="../assets/style.css">
+</head>
+<body>
+<div class="page">
+
+  <p class="subtitle">Lesson 1 of your German course</p>
+  <h1>V2 Word Order: The Rule That Fixes 40% of Your Errors</h1>
+  <p class="subtitle">B1.2 &middot; Grammar &middot; ~15 minutes</p>
+
+  <h2>Why this matters</h2>
+
+  <p>
+    German verbs are obsessed with position. In a main clause, the <strong>finite verb always occupies the second slot</strong> — the second grammatical unit, not the second word. This is called the <em>Verb-Second</em> (V2) rule and it affects every sentence you speak or write in German.
+  </p>
+
+  <p>
+    In English, the subject almost always comes first. German doesn't care. You can put a time expression, a location, a reason, or an adverb in front — but the moment you do, the subject has to step aside and the verb takes slot two.
+  </p>
+
+  <div class="rule-box">
+    <strong>The Rule</strong>
+    <div class="formula">[ Front element ] &rarr; VERB &rarr; Subject &rarr; rest of sentence</div>
+  </div>
+
+  <h2>The pattern in your own sentences</h2>
+
+  <p>These are the exact constructions you've been writing — and the correction each time:</p>
+
+  <table>
+    <tr>
+      <th>What you wrote</th>
+      <th>What it should be</th>
+      <th>Front element</th>
+    </tr>
+    <tr>
+      <td class="wrong">Heute <em>ich werde</em> Code-Review machen</td>
+      <td class="right">Heute <em>werde ich</em> Code-Review machen</td>
+      <td>Heute (time)</td>
+    </tr>
+    <tr>
+      <td class="wrong">Am Freitag <em>ich hat</em> gearbeitet</td>
+      <td class="right">Am Freitag <em>habe ich</em> gearbeitet</td>
+      <td>Am Freitag (time)</td>
+    </tr>
+    <tr>
+      <td class="wrong">Danach <em>ich werde</em> weiter</td>
+      <td class="right">Danach <em>werde ich</em> weiter</td>
+      <td>Danach (sequence)</td>
+    </tr>
+    <tr>
+      <td class="wrong"><em>Weiss ich nicht</em> was...</td>
+      <td class="right"><em>Ich weiß</em> nicht, was...</td>
+      <td>Subject first → no inversion needed</td>
+    </tr>
+  </table>
+
+  <p>
+    Notice the last row: when the subject is already in front, there is <em>no inversion</em>. The rule only triggers when something other than the subject occupies slot one.
+  </p>
+
+  <h2>Common front elements that trigger inversion</h2>
+
+  <table>
+    <tr><th>Type</th><th>Examples</th></tr>
+    <tr><td>Time</td><td><code>Heute, Gestern, Am Freitag, Um 9 Uhr, Letzte Woche</code></td></tr>
+    <tr><td>Sequence</td><td><code>Dann, Danach, Zuerst, Anschlie&szlig;end, Zuletzt</code></td></tr>
+    <tr><td>Contrast / addition</td><td><code>Trotzdem, Also, Au&szlig;erdem, Dennoch</code></td></tr>
+    <tr><td>Reason phrase</td><td><code>Deshalb, Daher, Deswegen</code></td></tr>
+    <tr><td>Location</td><td><code>In Heitersheim, Im B&uuml;ro, Zu Hause</code></td></tr>
+    <tr><td>Object moved to front</td><td><code>Das Ticket habe ich gestern geschlossen.</code></td></tr>
+  </table>
+
+  <h2>A trick that never fails</h2>
+
+  <p>
+    After you write a sentence, hold up one finger for the first unit. Ask: <em>is this the verb?</em> If no — your next word <strong>must</strong> be the verb, and the subject comes after it. Count on your fingers if needed. This catches the error every time before it leaves your head.
+  </p>
+
+  <hr style="border:none; border-top: 1px solid #ddd; margin: 2.5rem 0;">
+
+  <h2>Drill — choose the correct word order</h2>
+
+  <p>All sentences are grounded in your actual life. Eight questions. Immediate feedback after each answer.</p>
+
+  <div class="quiz-section" id="quiz"></div>
+
+  <div class="score-bar" id="score-bar">
+    <span class="score-number" id="score-number"></span> — <span id="score-comment"></span>
+  </div>
+
+  <hr style="border:none; border-top: 1px solid #ddd; margin: 2.5rem 0;">
+
+  <h2>Primary source for this lesson</h2>
+
+  <p>
+    <a href="https://learngerman.dw.com/en/nicos-weg/c-36519691" target="_blank">DW Nicos Weg — B1</a> covers V2 word order with video examples in natural conversational German. Episodes 31–35 are particularly good for this pattern. Free, no account needed.
+  </p>
+
+  <div class="ask-teacher">
+    <strong>Ask your teacher:</strong> Anything from this lesson that felt unclear — a sentence that confused you, or a case where you're unsure whether inversion applies — paste it into the chat and ask. The teacher is here to dig into it with you.
+  </div>
+
+  <div class="lesson-nav">
+    <strong>Related:</strong>
+    <a href="../reference/word-order.html">Word Order Reference Sheet</a> &middot;
+    Lesson 2 coming next session
+  </div>
+
+</div>
+
+<script>
+const questions = [
+  {
+    prefix: "Heute",
+    suffix: "einen Code-Review gemacht.",
+    correct: "habe ich",
+    distractor: "ich habe",
+    feedback: "<strong>Heute</strong> is a fronted time element → verb comes second: <em>Heute habe ich …</em>"
+  },
+  {
+    prefix: "Am Freitag",
+    suffix: "an dem Sprint gearbeitet.",
+    correct: "habe ich",
+    distractor: "ich habe",
+    feedback: "<strong>Am Freitag</strong> is a fronted time phrase → inversion required: <em>Am Freitag habe ich …</em>"
+  },
+  {
+    prefix: "Danach",
+    suffix: "die E-Mail an Herrn Amann geschrieben.",
+    correct: "habe ich",
+    distractor: "ich habe",
+    feedback: "<strong>Danach</strong> (sequence adverb) triggers inversion: <em>Danach habe ich …</em>"
+  },
+  {
+    prefix: "In Heitersheim",
+    suffix: "viele schöne Spazierwege.",
+    correct: "gibt es",
+    distractor: "es gibt",
+    feedback: "<strong>In Heitersheim</strong> is a fronted location → verb second: <em>In Heitersheim gibt es …</em>"
+  },
+  {
+    prefix: "Normalerweise",
+    suffix: "um acht Uhr im Büro.",
+    correct: "bin ich",
+    distractor: "ich bin",
+    feedback: "<strong>Normalerweise</strong> (manner adverb) triggers inversion: <em>Normalerweise bin ich …</em>"
+  },
+  {
+    prefix: "Nach der Schule",
+    suffix: "die Kinder oft Hunger.",
+    correct: "haben",
+    distractor: "die Kinder haben",
+    feedback: "When the <em>subject</em> would immediately follow the verb anyway, the result is: <em>Nach der Schule haben die Kinder …</em> — subject slides one slot to the right."
+  },
+  {
+    prefix: "Letzte Woche",
+    suffix: "wir das Deployment abgeschlossen.",
+    correct: "haben",
+    distractor: "wir haben",
+    feedback: "<strong>Letzte Woche</strong> fronted → verb second: <em>Letzte Woche haben wir …</em>"
+  },
+  {
+    prefix: "Deshalb",
+    suffix: "ich dir eine kurze Nachricht.",
+    correct: "schreibe ich",
+    distractor: "ich schreibe",
+    feedback: "<strong>Deshalb</strong> (reason connector) triggers inversion: <em>Deshalb schreibe ich …</em>"
+  }
+];
+
+// Build quiz HTML
+const quiz = document.getElementById('quiz');
+let answered = 0;
+let correct = 0;
+const total = questions.length;
+
+questions.forEach((q, i) => {
+  // Shuffle options
+  const opts = Math.random() > 0.5
+    ? [q.correct, q.distractor]
+    : [q.distractor, q.correct];
+
+  const block = document.createElement('div');
+  block.className = 'question-block';
+  block.id = 'q' + i;
+
+  block.innerHTML = `
+    <div class="question-text">
+      <strong>${i + 1}.</strong> &ldquo;${q.prefix} <span class="blank">___________</span> ${q.suffix}&rdquo;
+    </div>
+    <div class="options">
+      ${opts.map((opt, j) => `<button class="option-btn" onclick="answer(${i}, '${opt.replace(/'/g, "\\'")}', this)">${opt}</button>`).join('')}
+    </div>
+    <div class="feedback" id="fb${i}"></div>
+  `;
+
+  quiz.appendChild(block);
+});
+
+function answer(i, chosen, btn) {
+  const q = questions[i];
+  const block = document.getElementById('q' + i);
+  const fb = document.getElementById('fb' + i);
+  const buttons = block.querySelectorAll('.option-btn');
+
+  // Disable all buttons in this block
+  buttons.forEach(b => b.disabled = true);
+
+  const isCorrect = chosen === q.correct;
+  answered++;
+
+  if (isCorrect) {
+    correct++;
+    block.classList.add('correct');
+    btn.classList.add('selected-correct');
+    fb.className = 'feedback show correct-fb';
+    fb.innerHTML = '&#10003; Correct. ' + q.feedback;
+  } else {
+    block.classList.add('incorrect');
+    btn.classList.add('selected-incorrect');
+    fb.className = 'feedback show incorrect-fb';
+    fb.innerHTML = '&#10007; Not quite. ' + q.feedback;
+    // Reveal correct answer
+    buttons.forEach(b => {
+      if (b.textContent.trim() === q.correct) b.classList.add('reveal-correct');
+    });
+  }
+
+  if (answered === total) showScore();
+}
+
+function showScore() {
+  const bar = document.getElementById('score-bar');
+  const num = document.getElementById('score-number');
+  const comment = document.getElementById('score-comment');
+
+  bar.classList.add('show');
+  num.textContent = correct + ' / ' + total;
+
+  if (correct === total) {
+    comment.textContent = 'Perfect. V2 is clicking. Ready to drill the next pattern.';
+  } else if (correct >= 6) {
+    comment.textContent = 'Solid — V2 is mostly there. Review the ones you missed and revisit tomorrow.';
+  } else if (correct >= 4) {
+    comment.textContent = 'The pattern is forming. Run this lesson again in 24 hours to consolidate it.';
+  } else {
+    comment.textContent = 'Keep the rule visible when you write today. Run this drill again before tomorrow\'s session.';
+  }
+}
+</script>
+
+</body>
+</html>
--- a/reference/word-order.html
+++ b/reference/word-order.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reference — German Word Order</title>
+  <link rel="stylesheet" href="../assets/style.css">
+  <style>
+    body { font-size: 16px; }
+    h1 { font-size: 1.5rem; }
+    .rule-box { margin: 1rem 0; }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; }
+    @media (max-width: 500px) { .grid { grid-template-columns: 1fr; } }
+    .card {
+      background: white;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 0.75rem 1rem;
+      font-size: 0.88rem;
+    }
+    .card .label { font-size: 0.75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
+    .card .de { display: inline; font-size: 0.88em; }
+    .card .wrong { font-size: 0.82em; }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <p class="subtitle">Reference Sheet &middot; Print-friendly</p>
+  <h1>German Word Order</h1>
+
+  <h2>V2 Rule — Main Clauses</h2>
+
+  <div class="rule-box">
+    <strong>Formula</strong>
+    <div class="formula">[ Slot 1: anything ] &rarr; FINITE VERB &rarr; Subject &rarr; rest</div>
+  </div>
+
+  <p>The finite verb <em>always</em> occupies slot 2 in a main clause. When the subject is in slot 1, no inversion is needed. When anything else is in slot 1, the subject and verb swap.</p>
+
+  <div class="grid">
+    <div class="card">
+      <div class="label">Subject first — no inversion</div>
+      <code class="de">Ich habe heute Code-Review gemacht.</code>
+    </div>
+    <div class="card">
+      <div class="label">Time first — inversion</div>
+      <code class="de">Heute habe ich Code-Review gemacht.</code>
+      <div class="wrong">&cross; Heute ich habe …</div>
+    </div>
+    <div class="card">
+      <div class="label">Sequence adverb — inversion</div>
+      <code class="de">Danach habe ich die E-Mail geschrieben.</code>
+      <div class="wrong">&cross; Danach ich habe …</div>
+    </div>
+    <div class="card">
+      <div class="label">Location first — inversion</div>
+      <code class="de">In Heitersheim gibt es viele Wege.</code>
+      <div class="wrong">&cross; In Heitersheim es gibt …</div>
+    </div>
+    <div class="card">
+      <div class="label">Reason connector — inversion</div>
+      <code class="de">Deshalb schreibe ich dir.</code>
+      <div class="wrong">&cross; Deshalb ich schreibe …</div>
+    </div>
+    <div class="card">
+      <div class="label">Object fronted — inversion</div>
+      <code class="de">Das Ticket habe ich gestern geschlossen.</code>
+    </div>
+  </div>
+
+  <h2>Verb-Final — Subordinate Clauses</h2>
+
+  <div class="rule-box">
+    <strong>Conjunctions that send the verb to the end</strong>
+    <div class="formula">weil &bull; dass &bull; ob &bull; wenn &bull; obwohl &bull; damit &bull; bevor &bull; nachdem</div>
+  </div>
+
+  <table>
+    <tr>
+      <th>Main clause</th>
+      <th>Subordinate clause</th>
+    </tr>
+    <tr>
+      <td>Ich bin bereit,</td>
+      <td>wenn die Reinigung nicht möglich <strong>ist</strong>.</td>
+    </tr>
+    <tr>
+      <td>Ich weiß nicht,</td>
+      <td>ob das Ticket schon geschlossen <strong>wurde</strong>.</td>
+    </tr>
+    <tr>
+      <td>Er sagt,</td>
+      <td>dass er morgen ins Büro <strong>kommt</strong>.</td>
+    </tr>
+  </table>
+
+  <h2>Common Front Elements (trigger V2 inversion)</h2>
+
+  <table>
+    <tr><th>Category</th><th>Words</th></tr>
+    <tr><td>Time</td><td><code>heute, gestern, morgen, letzte Woche, am Freitag, um 9 Uhr</code></td></tr>
+    <tr><td>Sequence</td><td><code>dann, danach, zuerst, zuletzt, anschließend</code></td></tr>
+    <tr><td>Reason</td><td><code>deshalb, daher, deswegen, aus diesem Grund</code></td></tr>
+    <tr><td>Contrast</td><td><code>trotzdem, dennoch, jedoch, allerdings</code></td></tr>
+    <tr><td>Addition</td><td><code>außerdem, auch, zudem</code></td></tr>
+    <tr><td>Condition</td><td><code>sonst (otherwise)</code></td></tr>
+  </table>
+
+  <p style="font-size:0.85rem; color: var(--ink-faint); margin-top: 2rem;">
+    &larr; <a href="../lessons/0001-v2-word-order.html">Back to Lesson 1</a>
+  </p>
+
+</div>
+</body>
+</html>