lesson 2

.gitignore

@@ -0,0 +1,2 @@
+/.idea/php.xml
+/.idea/vcs.xml

NOTES.md

@@ -29,3 +29,4 @@ Priority order:
 - 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
+- Vocabulary scope: everyday German life, NOT just tech. Priority contexts: Zahnarzt, Kinderarzt, Friseur, Zahnreinigung, restaurant reservations, Ölwechsel, TÜV — the admin and social interactions of living in Germany

learning-records/0001-starting-point.md

@@ -1,7 +1,13 @@
 # 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.
+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.
+**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.
+**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.

learning-records/0002-noun-gender-overload.md

@@ -0,0 +1,11 @@
+# Noun Gender: 4/10 — Needs Study Time
+
+Scored 4/10 on the lesson 2 noun gender drill. Lesson covered ~30 daily life nouns across doctor/dentist, Friseur,
+restaurant, car/TÜV, and general admin contexts, with a quiz mixing nominative and accusative case — appropriate for
+B1.2 level.
+
+The low score reflects that the material is genuinely new and needs consolidation through study, not a problem with the
+lesson design. The user confirmed this explicitly.
+
+**Implications:** Revisit lesson 2 after studying the noun cards and reference sheet. Expect improvement on the next
+attempt once the material has had time to sink in.

lessons/0001-v2-word-order.html

@@ -153,24 +153,24 @@ const questions = [
   },
   {
     prefix: "Nach der Schule",
-    suffix: "die Kinder oft Hunger.",
+    suffix: "oft Hunger.",
-    correct: "haben",
+    correct: "haben die Kinder",
     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."
+    feedback: "<strong>Nach der Schule</strong> is fronted → verb must come second, subject after: <em>Nach der Schule haben die Kinder oft Hunger.</em>"
   },
   {
     prefix: "Letzte Woche",
-    suffix: "wir das Deployment abgeschlossen.",
+    suffix: "das Deployment abgeschlossen.",
-    correct: "haben",
+    correct: "haben wir",
     distractor: "wir haben",
-    feedback: "<strong>Letzte Woche</strong> fronted → verb second: <em>Letzte Woche haben wir …</em>"
+    feedback: "<strong>Letzte Woche</strong> fronted → verb second: <em>Letzte Woche haben wir das Deployment abgeschlossen.</em>"
   },
   {
     prefix: "Deshalb",
-    suffix: "ich dir eine kurze Nachricht.",
+    suffix: "dir eine kurze Nachricht.",
     correct: "schreibe ich",
     distractor: "ich schreibe",
-    feedback: "<strong>Deshalb</strong> (reason connector) triggers inversion: <em>Deshalb schreibe ich …</em>"
+    feedback: "<strong>Deshalb</strong> (reason connector) triggers inversion: <em>Deshalb schreibe ich dir eine kurze Nachricht.</em>"
   }
 ];
 
@@ -180,9 +180,12 @@ let answered = 0;
 let correct = 0;
 const total = questions.length;
 
+// Pre-determined option order: ensures correct answer appears in both positions across the quiz
+// true = correct first, false = distractor first
+const correctFirst = [true, false, false, true, false, true, false, true];
+
 questions.forEach((q, i) => {
-  // Shuffle options
+  const opts = correctFirst[i]
-  const opts = Math.random() > 0.5
     ? [q.correct, q.distractor]
     : [q.distractor, q.correct];
 

lessons/0002-noun-gender-daily-life.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lesson 2 — Noun Gender: Daily Life in Germany</title>
+  <link rel="stylesheet" href="../assets/style.css">
+  <style>
+    .scenario-group { margin: 1.5rem 0; }
+    .scenario-label {
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      color: var(--ink-faint);
+      margin-bottom: 0.4rem;
+    }
+    .noun-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
+    .noun-card {
+      background: white;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 0.6rem 0.9rem;
+      font-size: 0.92rem;
+    }
+    .noun-card .article { font-weight: bold; }
+    .noun-card .article.der { color: #2e5d9e; }
+    .noun-card .article.die { color: #8b1a1a; }
+    .noun-card .article.das { color: #1e6b3c; }
+    .noun-card .noun-en { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.1rem; }
+    .pattern-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
+    .pattern-tag {
+      background: var(--bg-warm);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 0.25rem 0.75rem;
+      font-family: 'Courier New', monospace;
+      font-size: 0.85rem;
+    }
+    .pattern-tag.die { border-color: #c97070; background: #fdecea; color: #8b1a1a; }
+    .pattern-tag.der { border-color: #7094c9; background: #eaeefd; color: #1d3f6e; }
+    .pattern-tag.das { border-color: #70a98a; background: var(--green-bg); color: #1e6b3c; }
+    .option-btn.opt-der { border-left: 3px solid #2e5d9e; }
+    .option-btn.opt-die { border-left: 3px solid #8b1a1a; }
+    .option-btn.opt-das { border-left: 3px solid #1e6b3c; }
+    .options { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
+    .option-btn { flex: 1; min-width: 80px; text-align: center; }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <p class="subtitle">Lesson 2 of your German course</p>
+  <h1>Noun Gender: The Words You Use Every Week</h1>
+  <p class="subtitle">B1.2 &middot; Vocabulary &middot; ~20 minutes</p>
+
+  <h2>Why gender keeps tripping you up</h2>
+
+  <p>
+    German has three genders — <strong style="color:#2e5d9e">der</strong> (masculine), <strong style="color:#8b1a1a">die</strong> (feminine), <strong style="color:#1e6b3c">das</strong> (neuter) — and they affect every adjective, pronoun, and article you attach to a noun. There is no shortcut that covers everything, but there are <em>reliable suffix patterns</em> that handle a large chunk of everyday vocabulary.
+  </p>
+
+  <h2>Suffix shortcuts worth memorising</h2>
+
+  <p><strong style="color:#8b1a1a">Always die</strong> — these suffixes never deviate:</p>
+  <div class="pattern-row">
+    <span class="pattern-tag die">-ung</span>
+    <span class="pattern-tag die">-heit</span>
+    <span class="pattern-tag die">-keit</span>
+    <span class="pattern-tag die">-schaft</span>
+    <span class="pattern-tag die">-tion</span>
+    <span class="pattern-tag die">-in (person)</span>
+  </div>
+  <p>So: die Reservier<strong>ung</strong>, die Reinig<strong>ung</strong>, die Überweisund, die Gesund<strong>heit</strong>, die Friseur<strong>in</strong>.</p>
+
+  <p><strong style="color:#2e5d9e">Usually der</strong></p>
+  <div class="pattern-row">
+    <span class="pattern-tag der">-er (profession/agent)</span>
+    <span class="pattern-tag der">-arzt (compound)</span>
+    <span class="pattern-tag der">-wechsel</span>
+  </div>
+  <p>So: der Mechan<strong>iker</strong>, der Zahn<strong>arzt</strong>, der Kinder<strong>arzt</strong>, der Öl<strong>wechsel</strong>.</p>
+
+  <p><strong style="color:#1e6b3c">Always das</strong></p>
+  <div class="pattern-row">
+    <span class="pattern-tag das">-chen</span>
+    <span class="pattern-tag das">-lein</span>
+    <span class="pattern-tag das">-ment</span>
+    <span class="pattern-tag das">-um</span>
+  </div>
+  <p>So: das Restau<strong>rant</strong>, das Warte<strong>zimmer</strong> (neuter because Zimmer is always das).</p>
+
+  <h2>The nouns you actually need</h2>
+
+  <div class="scenario-group">
+    <div class="scenario-label">Doctor &amp; Dentist</div>
+    <div class="noun-grid">
+      <div class="noun-card"><span class="article der">der</span> Zahnarzt<div class="noun-en">dentist</div></div>
+      <div class="noun-card"><span class="article der">der</span> Kinderarzt<div class="noun-en">paediatrician</div></div>
+      <div class="noun-card"><span class="article der">der</span> Hausarzt<div class="noun-en">GP / family doctor</div></div>
+      <div class="noun-card"><span class="article der">der</span> Termin<div class="noun-en">appointment</div></div>
+      <div class="noun-card"><span class="article die">die</span> Überweisung<div class="noun-en">referral</div></div>
+      <div class="noun-card"><span class="article die">die</span> Zahnreinigung<div class="noun-en">teeth cleaning</div></div>
+      <div class="noun-card"><span class="article das">das</span> Wartezimmer<div class="noun-en">waiting room</div></div>
+      <div class="noun-card"><span class="article das">das</span> Rezept<div class="noun-en">prescription</div></div>
+      <div class="noun-card"><span class="article die">die</span> Krankenkasse<div class="noun-en">health insurance</div></div>
+      <div class="noun-card"><span class="article die">die</span> Krankenversicherungskarte<div class="noun-en">health insurance card</div></div>
+    </div>
+  </div>
+
+  <div class="scenario-group">
+    <div class="scenario-label">Hairdresser</div>
+    <div class="noun-grid">
+      <div class="noun-card"><span class="article der">der</span> Friseur<div class="noun-en">hairdresser (m)</div></div>
+      <div class="noun-card"><span class="article die">die</span> Friseurin<div class="noun-en">hairdresser (f)</div></div>
+      <div class="noun-card"><span class="article der">der</span> Haarschnitt<div class="noun-en">haircut</div></div>
+      <div class="noun-card"><span class="article die">die</span> Länge<div class="noun-en">length</div></div>
+      <div class="noun-card"><span class="article die">die</span> Spitzen<div class="noun-en">ends (of hair) — plural</div></div>
+    </div>
+  </div>
+
+  <div class="scenario-group">
+    <div class="scenario-label">Restaurant</div>
+    <div class="noun-grid">
+      <div class="noun-card"><span class="article das">das</span> Restaurant<div class="noun-en">restaurant</div></div>
+      <div class="noun-card"><span class="article die">die</span> Reservierung<div class="noun-en">reservation</div></div>
+      <div class="noun-card"><span class="article der">der</span> Tisch<div class="noun-en">table</div></div>
+      <div class="noun-card"><span class="article die">die</span> Speisekarte<div class="noun-en">menu</div></div>
+      <div class="noun-card"><span class="article die">die</span> Rechnung<div class="noun-en">bill</div></div>
+      <div class="noun-card"><span class="article das">das</span> Trinkgeld<div class="noun-en">tip (gratuity)</div></div>
+    </div>
+  </div>
+
+  <div class="scenario-group">
+    <div class="scenario-label">Car &amp; TÜV</div>
+    <div class="noun-grid">
+      <div class="noun-card"><span class="article der">der</span> TÜV<div class="noun-en">vehicle inspection</div></div>
+      <div class="noun-card"><span class="article der">der</span> Ölwechsel<div class="noun-en">oil change</div></div>
+      <div class="noun-card"><span class="article die">die</span> Werkstatt<div class="noun-en">garage / workshop</div></div>
+      <div class="noun-card"><span class="article der">der</span> Reifenwechsel<div class="noun-en">tyre change</div></div>
+      <div class="noun-card"><span class="article die">die</span> Inspektion<div class="noun-en">service / inspection</div></div>
+      <div class="noun-card"><span class="article der">der</span> Kostenvoranschlag<div class="noun-en">cost estimate / quote</div></div>
+    </div>
+  </div>
+
+  <div class="scenario-group">
+    <div class="scenario-label">General admin</div>
+    <div class="noun-grid">
+      <div class="noun-card"><span class="article die">die</span> Quittung<div class="noun-en">receipt</div></div>
+      <div class="noun-card"><span class="article die">die</span> Rechnung<div class="noun-en">invoice / bill</div></div>
+      <div class="noun-card"><span class="article das">das</span> Formular<div class="noun-en">form</div></div>
+      <div class="noun-card"><span class="article die">die</span> Unterschrift<div class="noun-en">signature</div></div>
+      <div class="noun-card"><span class="article der">der</span> Ausweis<div class="noun-en">ID / card</div></div>
+    </div>
+  </div>
+
+  <hr style="border:none; border-top: 1px solid #ddd; margin: 2.5rem 0;">
+
+  <h2>Drill — pick the right article</h2>
+
+  <p>Ten questions. The sentence gives you context; choose <strong style="color:#2e5d9e">der</strong>, <strong style="color:#8b1a1a">die</strong>, or <strong style="color:#1e6b3c">das</strong>.</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>Useful phrases for these situations</h2>
+
+  <table>
+    <tr><th>Situation</th><th>What to say</th></tr>
+    <tr><td>Making an appointment</td><td><code>Ich würde gerne einen Termin vereinbaren.</code></td></tr>
+    <tr><td>At the hairdresser</td><td><code>Nur die Spitzen bitte, ungefähr zwei Zentimeter.</code></td></tr>
+    <tr><td>Restaurant reservation</td><td><code>Ich möchte einen Tisch für zwei Personen reservieren.</code></td></tr>
+    <tr><td>At the garage</td><td><code>Können Sie mir einen Kostenvoranschlag machen?</code></td></tr>
+    <tr><td>Asking for the bill</td><td><code>Die Rechnung bitte.</code> or <code>Können wir zahlen?</code></td></tr>
+    <tr><td>Dental referral</td><td><code>Brauche ich dafür eine Überweisung?</code></td></tr>
+  </table>
+
+  <h2>Primary source for this lesson</h2>
+
+  <p>
+    <a href="https://www.dw.com/de/deutsch-lernen/top-thema/s-8031" target="_blank">DW Top-Thema</a> publishes weekly audio articles at B1 level with full transcripts. Each episode introduces 10–15 words in context — far more memorable than a list. Aim for one episode per day this week.
+  </p>
+
+  <div class="ask-teacher">
+    <strong>Ask your teacher:</strong> When you're out this week — at the Zahnarzt, the Werkstatt, anywhere — notice the nouns you hear and aren't sure about. Bring them back here and ask. Real-world vocabulary sticks faster than anything in a lesson.
+  </div>
+
+  <div class="lesson-nav">
+    <strong>Related:</strong>
+    <a href="../reference/daily-life-nouns.html">Daily Life Nouns Reference</a> &middot;
+    <a href="0001-v2-word-order.html">Lesson 1: V2 Word Order</a>
+  </div>
+
+</div>
+
+<script>
+const questions = [
+  {
+    sentence: "___ Termin beim Zahnarzt ist am Donnerstag um 10 Uhr.",
+    correct: "Der",
+    options: ["Der", "Die", "Das"],
+    feedback: "<strong>der Termin</strong> — masculine. No suffix rule, this one you memorise. It comes up constantly."
+  },
+  {
+    sentence: "Ich habe ___ Reservierung für Freitagabend gemacht.",
+    correct: "eine",
+    options: ["einen", "eine", "ein"],
+    feedback: "<strong>die Reservierung</strong> → feminine → indefinite accusative: <em>eine</em>. The <code>-ung</code> ending is always <em>die</em>."
+  },
+  {
+    sentence: "___ Wartezimmer beim Kinderarzt war voller Spielzeug.",
+    correct: "Das",
+    options: ["Der", "Die", "Das"],
+    feedback: "<strong>das Wartezimmer</strong> — neuter. Zimmer (room) is always <em>das</em>, and compounds inherit the gender of their last element."
+  },
+  {
+    sentence: "Brauche ich ___ Überweisung vom Hausarzt?",
+    correct: "eine",
+    options: ["einen", "eine", "ein"],
+    feedback: "<strong>die Überweisung</strong> → feminine → accusative: <em>eine</em>. The <code>-ung</code> suffix again."
+  },
+  {
+    sentence: "___ TÜV ist in zwei Monaten fällig.",
+    correct: "Der",
+    options: ["Der", "Die", "Das"],
+    feedback: "<strong>der TÜV</strong> — masculine. No suffix to help here; memorise it."
+  },
+  {
+    sentence: "Die Werkstatt macht ___ Ölwechsel für 75 Euro.",
+    correct: "einen",
+    options: ["einen", "eine", "ein"],
+    feedback: "<strong>der Ölwechsel</strong> → masculine → accusative: <em>einen</em>. The <code>-wechsel</code> compound is always <em>der</em>."
+  },
+  {
+    sentence: "___ Zahnreinigung tut manchmal ein bisschen weh.",
+    correct: "Die",
+    options: ["Der", "Die", "Das"],
+    feedback: "<strong>die Zahnreinigung</strong> — feminine. <code>-ung</code> ending: always <em>die</em>."
+  },
+  {
+    sentence: "Ich habe ___ Kostenvoranschlag von der Werkstatt bekommen.",
+    correct: "einen",
+    options: ["einen", "eine", "ein"],
+    feedback: "<strong>der Kostenvoranschlag</strong> → masculine → accusative: <em>einen</em>."
+  },
+  {
+    sentence: "___ Rechnung war höher als erwartet.",
+    correct: "Die",
+    options: ["Der", "Die", "Das"],
+    feedback: "<strong>die Rechnung</strong> — feminine. Another <code>-ung</code> word."
+  },
+  {
+    sentence: "Der Friseur hat ___ Haarschnitt sehr gut gemacht.",
+    correct: "den",
+    options: ["den", "die", "das"],
+    feedback: "<strong>der Haarschnitt</strong> → masculine → definite accusative: <em>den</em>. Schnitt (cut) is masculine, compounds follow."
+  }
+];
+
+// Option order: mix of correct-first and correct-second positions
+// For 3-option questions the correct answer appears at positions: 0,1,2,0,1,2,0,1,2,0
+const correctPositions = [0, 1, 2, 1, 0, 0, 1, 0, 1, 0];
+
+const quiz = document.getElementById('quiz');
+let answered = 0;
+let correct = 0;
+const total = questions.length;
+
+questions.forEach((q, i) => {
+  // Place correct answer at predetermined position, fill rest with distractors
+  const correctPos = correctPositions[i];
+  const distractors = q.options.filter(o => o !== q.correct);
+  const opts = [];
+  let di = 0;
+  for (let j = 0; j < q.options.length; j++) {
+    if (j === correctPos) opts.push(q.correct);
+    else opts.push(distractors[di++]);
+  }
+
+  const block = document.createElement('div');
+  block.className = 'question-block';
+  block.id = 'q' + i;
+
+  const articleClass = q.correct === 'Der' || q.correct === 'den' || q.correct === 'einen'
+    ? 'der' : q.correct === 'Die' || q.correct === 'die' || q.correct === 'eine'
+    ? 'die' : 'das';
+
+  block.innerHTML = `
+    <div class="question-text">
+      <strong>${i + 1}.</strong> ${q.sentence.replace('___ ', '<span class="blank" style="color:transparent;border-bottom:2px solid #aaa;min-width:50px;display:inline-block;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> ')}
+    </div>
+    <div class="options">
+      ${opts.map(opt => {
+        const cls = (opt === 'der' || opt === 'Der' || opt === 'den' || opt === 'einen') ? 'opt-der'
+          : (opt === 'die' || opt === 'Die' || opt === 'eine') ? 'opt-die' : 'opt-das';
+        return `<button class="option-btn ${cls}" onclick="answer(${i}, '${opt}', 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');
+
+  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; ' + q.feedback;
+    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 = 'All ten — the suffix patterns are working. Use these words out loud this week.';
+  } else if (correct >= 8) {
+    comment.textContent = 'Strong. Revisit the ones you missed — usually the -ung pattern wasn\'t firing fast enough.';
+  } else if (correct >= 6) {
+    comment.textContent = 'The patterns are forming. Run the drill again tomorrow.';
+  } else {
+    comment.textContent = 'Spend five minutes tonight rereading the noun cards, then try again.';
+  }
+}
+</script>
+
+</body>
+</html>

reference/daily-life-nouns.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reference — Daily Life Nouns</title>
+  <link rel="stylesheet" href="../assets/style.css">
+  <style>
+    body { font-size: 15px; }
+    h1 { font-size: 1.4rem; }
+    h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
+    .der { color: #2e5d9e; font-weight: bold; }
+    .die { color: #8b1a1a; font-weight: bold; }
+    .das { color: #1e6b3c; font-weight: bold; }
+    table { font-size: 0.88rem; margin: 0.5rem 0 1rem; }
+    td, th { padding: 0.35rem 0.6rem; }
+    .suffix-rules { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0 1.5rem; }
+    @media (max-width: 500px) { .suffix-rules { grid-template-columns: 1fr; } }
+    .rule-card {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 0.6rem 0.75rem;
+      font-size: 0.82rem;
+    }
+    .rule-card .gender { font-size: 1rem; font-weight: bold; margin-bottom: 0.25rem; }
+    code { font-size: 0.82em; }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <p class="subtitle">Reference Sheet &middot; Print-friendly</p>
+  <h1>Daily Life Nouns — Gender Reference</h1>
+
+  <h2>Suffix rules (reliable shortcuts)</h2>
+
+  <div class="suffix-rules">
+    <div class="rule-card">
+      <div class="gender die">die</div>
+      <code>-ung &bull; -heit &bull; -keit &bull; -schaft &bull; -tion &bull; -in</code>
+      <div style="margin-top:0.4rem; color: var(--ink-light);">Reservierung, Reinigung, Überweisung, Rechnung, Friseurin</div>
+    </div>
+    <div class="rule-card">
+      <div class="gender der">der</div>
+      <code>-er (profession) &bull; -arzt &bull; -wechsel</code>
+      <div style="margin-top:0.4rem; color: var(--ink-light);">Mechaniker, Zahnarzt, Ölwechsel, Reifenwechsel</div>
+    </div>
+    <div class="rule-card">
+      <div class="gender das">das</div>
+      <code>-chen &bull; -lein &bull;-ment &bull; -um &bull; Zimmer</code>
+      <div style="margin-top:0.4rem; color: var(--ink-light);">Restaurant, Wartezimmer, Formular</div>
+    </div>
+  </div>
+
+  <h2>Doctor &amp; Dentist</h2>
+  <table>
+    <tr><th>Noun</th><th>English</th><th>Plural</th></tr>
+    <tr><td><span class="der">der</span> Zahnarzt</td><td>dentist</td><td>die Zahnärzte</td></tr>
+    <tr><td><span class="der">der</span> Kinderarzt</td><td>paediatrician</td><td>die Kinderärzte</td></tr>
+    <tr><td><span class="der">der</span> Hausarzt</td><td>GP / family doctor</td><td>die Hausärzte</td></tr>
+    <tr><td><span class="der">der</span> Termin</td><td>appointment</td><td>die Termine</td></tr>
+    <tr><td><span class="die">die</span> Überweisung</td><td>referral</td><td>die Überweisungen</td></tr>
+    <tr><td><span class="die">die</span> Zahnreinigung</td><td>teeth cleaning</td><td>die Zahnreinigungen</td></tr>
+    <tr><td><span class="das">das</span> Wartezimmer</td><td>waiting room</td><td>die Wartezimmer</td></tr>
+    <tr><td><span class="das">das</span> Rezept</td><td>prescription</td><td>die Rezepte</td></tr>
+    <tr><td><span class="die">die</span> Krankenkasse</td><td>health insurance</td><td>die Krankenkassen</td></tr>
+    <tr><td><span class="die">die</span> Krankenversicherungskarte</td><td>health insurance card</td><td>die Krankenversicherungskarten</td></tr>
+  </table>
+
+  <h2>Hairdresser</h2>
+  <table>
+    <tr><th>Noun</th><th>English</th></tr>
+    <tr><td><span class="der">der</span> Friseur</td><td>hairdresser (m)</td></tr>
+    <tr><td><span class="die">die</span> Friseurin</td><td>hairdresser (f)</td></tr>
+    <tr><td><span class="der">der</span> Haarschnitt</td><td>haircut</td></tr>
+    <tr><td><span class="die">die</span> Länge</td><td>length</td></tr>
+    <tr><td><span class="die">die</span> Spitzen (pl.)</td><td>ends (of hair)</td></tr>
+  </table>
+
+  <h2>Restaurant</h2>
+  <table>
+    <tr><th>Noun</th><th>English</th></tr>
+    <tr><td><span class="das">das</span> Restaurant</td><td>restaurant</td></tr>
+    <tr><td><span class="die">die</span> Reservierung</td><td>reservation</td></tr>
+    <tr><td><span class="der">der</span> Tisch</td><td>table</td></tr>
+    <tr><td><span class="die">die</span> Speisekarte</td><td>menu</td></tr>
+    <tr><td><span class="die">die</span> Rechnung</td><td>bill</td></tr>
+    <tr><td><span class="das">das</span> Trinkgeld</td><td>tip (gratuity)</td></tr>
+  </table>
+
+  <h2>Car &amp; TÜV</h2>
+  <table>
+    <tr><th>Noun</th><th>English</th></tr>
+    <tr><td><span class="der">der</span> TÜV</td><td>vehicle inspection</td></tr>
+    <tr><td><span class="der">der</span> Ölwechsel</td><td>oil change</td></tr>
+    <tr><td><span class="die">die</span> Werkstatt</td><td>garage / workshop</td></tr>
+    <tr><td><span class="der">der</span> Reifenwechsel</td><td>tyre change</td></tr>
+    <tr><td><span class="die">die</span> Inspektion</td><td>service / inspection</td></tr>
+    <tr><td><span class="der">der</span> Kostenvoranschlag</td><td>cost estimate / quote</td></tr>
+  </table>
+
+  <h2>General admin</h2>
+  <table>
+    <tr><th>Noun</th><th>English</th></tr>
+    <tr><td><span class="die">die</span> Quittung</td><td>receipt</td></tr>
+    <tr><td><span class="das">das</span> Formular</td><td>form</td></tr>
+    <tr><td><span class="die">die</span> Unterschrift</td><td>signature</td></tr>
+    <tr><td><span class="der">der</span> Ausweis</td><td>ID / card</td></tr>
+  </table>
+
+  <p style="font-size:0.82rem; color: var(--ink-faint); margin-top: 2rem;">
+    &larr; <a href="../lessons/0002-noun-gender-daily-life.html">Back to Lesson 2</a>
+  </p>
+
+</div>
+</body>
+</html>