diff --git a/01_grundlagen/linksammlung.md b/01_grundlagen/linksammlung.md
index 0ff54fd..b04ed94 100644
--- a/01_grundlagen/linksammlung.md
+++ b/01_grundlagen/linksammlung.md
@@ -20,6 +20,7 @@
 - [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
 - [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
 - [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
+- [CSS BEM (Block-Element-Modifier)](https://getbem.com/introduction/)
 
 ## Tools/ Software
 
diff --git a/01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html b/01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html
index 5bcd8e5..7a66180 100644
--- a/01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html
+++ b/01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html
@@ -73,6 +73,51 @@
     </main>
     <script>
       'use strict';
+
+      // DOM & Variablendeklaration
+      const DOM = {
+        // eigenschaft: 'Wert',
+        formCalculator: document.querySelector('.form-calculator'),
+        inputDistance: document.querySelector('.input-distance'),
+        inputFuelUsed: document.querySelector('.input-fuel-used'),
+        inputTankSize: document.querySelector('.input-tank-size'),
+        buttonCalculate: document.querySelector('.button-calculate'),
+        output: document.querySelector('.output'),
+      };
+      // const formCalculatorEl = document.querySelector('.form-calculator');
+      // const inputDistanceEl = document.querySelector('.input-distance');
+      // const inputFuelUsedEl = document.querySelector('.input-fuel-used');
+      // const inputTankSizeEl = document.querySelector('.input-tank-size');
+      // const buttonCalculate = document.querySelector('.button-calculate');
+
+      // const outputEl = document.querySelector('.output');
+
+      // console.log(formCalculatorEl, inputDistanceEl, inputFuelUsedEl, inputTankSizeEl, outputEl, buttonCalculate);
+      console.log(DOM);
+
+      DOM.formCalculator.addEventListener('submit', (e) => {
+        e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten an action-URL versenden wird unterbunden)
+
+        // ====
+        const distance = Number(DOM.inputDistance.value);
+        const fuelUsed = Number(DOM.inputFuelUsed.value);
+        const tankSize = Number(DOM.inputTankSize.value);
+
+        // Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100
+        const consumption = (fuelUsed / distance) * 100;
+        // Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l]
+        const maxDistance = (tankSize * distance) / fuelUsed;
+
+        const textConsumption = `${consumption.toFixed(1)} l/100km.`;
+        const textMaxDistance = `Die maximale Reichweite beträgt: ${Math.round(maxDistance)}km`;
+        console.log(textConsumption);
+        console.log(textMaxDistance);
+
+        DOM.output.innerHTML = `<p>${textConsumption}</p><p>${textMaxDistance}</p>`;
+        // ===
+
+        console.log('Event: ', e);
+      });
     </script>
   </body>
 </html>
diff --git a/01_grundlagen/unterricht/tag05/03_contact-form.html b/01_grundlagen/unterricht/tag05/03_contact-form.html
new file mode 100644
index 0000000..8b9b614
--- /dev/null
+++ b/01_grundlagen/unterricht/tag05/03_contact-form.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML Kontaktformular</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>HTML Kontaktformular</h1>
+        <!-- form.form-contact>.row>.col>.mb-3 -->
+        <form class="form-contact">
+          <div class="row">
+            <div class="col-12 col-sm-6">
+              <div class="mb-3">
+                <label for="input-firstname" class="form-label">Vorname</label>
+                <input
+                  type="text"
+                  id="input-firstname"
+                  name="firstname"
+                  class="form-control input-firstname"
+                  placeholder="Vorname eingeben..." />
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+            <div class="col-12 col-sm-6">
+              <div class="mb-3">
+                <label for="input-lastname" class="form-label">Nachname</label>
+                <input
+                  type="text"
+                  id="input-lastname"
+                  name="lastname"
+                  class="form-control input-lastname"
+                  placeholder="Nachname eingeben..." />
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+          </div>
+          <!-- ▲ /row ▲ -->
+          <!-- .row>.col>.mb-3 -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="input-email" class="form-label">E-Mail</label>
+                <input
+                  type="email"
+                  name="email"
+                  id="input-email"
+                  class="form-control input-email"
+                  placeholder="E-Mail eingeben..." />
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /row ▲ -->
+          <!-- .row>.col>.mb-3 -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="textarea-message" class="form-label">Nachricht</label>
+                <textarea name="message" id="textarea-message" class="form-control textarea-message"></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /row ▲ -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <!-- button:submit.btn.btn-dark.button-submit{Senden} -->
+                <button type="submit" class="btn btn-dark button-submit">Senden</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag05/04_cards-in-grid.html b/01_grundlagen/unterricht/tag05/04_cards-in-grid.html
new file mode 100644
index 0000000..52d0757
--- /dev/null
+++ b/01_grundlagen/unterricht/tag05/04_cards-in-grid.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Col Grid von BS</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <style>
+      .container {
+        background-color: #999;
+      }
+      @media (min-width: 576px) {
+        .container {
+          background-color: #888;
+        }
+      }
+      @media (min-width: 768px) {
+        .container {
+          background-color: #777;
+        }
+      }
+      @media (min-width: 992px) {
+        .container {
+          background-color: #666;
+        }
+      }
+      @media (min-width: 1200px) {
+        .container {
+          background-color: #555;
+        }
+      }
+      @media (min-width: 1400px) {
+        .container {
+          background-color: #444;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Col Grid von BS</h1>
+        <div class="row">
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <div class="mb-3">
+              <div class="card">
+                <img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">
+                    Some quick example text to build on the card title and make up the bulk of the card’s content.
+                  </p>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /col ▲ -->
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <div class="mb-3">
+              <div class="card">
+                <img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">
+                    Some quick example text to build on the card title and make up the bulk of the card’s content.
+                  </p>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /col ▲ -->
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <div class="mb-3">
+              <div class="card">
+                <img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">
+                    Some quick example text to build on the card title and make up the bulk of the card’s content.
+                  </p>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /col ▲ -->
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <div class="mb-3">
+              <div class="card">
+                <img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
+                <div class="card-body">
+                  <h5 class="card-title">Card title</h5>
+                  <p class="card-text">
+                    Some quick example text to build on the card title and make up the bulk of the card’s content.
+                  </p>
+                  <a href="#" class="btn btn-primary">Go somewhere</a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- ▲ /col ▲ -->
+        </div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag05/meeting.md b/01_grundlagen/unterricht/tag05/meeting.md
new file mode 100644
index 0000000..304123d
--- /dev/null
+++ b/01_grundlagen/unterricht/tag05/meeting.md
@@ -0,0 +1,6 @@
+# Meeting Fr. 19.06.2026
+
+- [ ] 15:00 - 15:10 Uhr Ersin
+- [ ] 15:10 - 15:20 Uhr Adel
+- [ ] 15:20 - 15:30 Uhr Kahleel
+- [ ] 15:30 - 15:40 Uhr Andreas
