diff --git a/03_dom/agenda.md b/03_dom/agenda.md
index aa409dc..9195443 100644
--- a/03_dom/agenda.md
+++ b/03_dom/agenda.md
@@ -356,7 +356,6 @@ Projektarbeit
 - HTML Element Progress
 - IDL-Attribut vs. Content-Attribut
 - HTML Attribute mit boolescher Zuweisung
-- getComputedStyle() und style-Attribute
 
 **Übungen:**
 
@@ -368,14 +367,28 @@ Projektarbeit
 
 **Inhalt:**
 
-- Repetition der Inhalte
 - Tooltip: HTML erweitern mit Data-Attribut
-- Dataset Attribut
-
-- **Projektarbeit / Content Factory**
+- Dataset Attribut, DOMStringMap Objekt
+- getComputedStyle, Attribute mit boolscher Zuweisung
 
 **Übungen:**
 
 Übung 11 - 14
 
 ---
+
+#### Tag 25
+
+**Inhalt:**
+
+- Import von Modulen in JS (Browserseitig)
+- DOM Creation - Elemente erstellen
+- createElement() & appendChild()
+- Projekt: Produktmanager Part I
+- DOM Creation Befehle
+- Entfernen von Elementen
+
+**Übungen:**
+
+Übung 15 - 16 + optionale Übungen
+**Projektarbeit / Content Factory**
diff --git a/03_dom/linksammlung.md b/03_dom/linksammlung.md
index 2ba04e1..283dca0 100644
--- a/03_dom/linksammlung.md
+++ b/03_dom/linksammlung.md
@@ -74,6 +74,8 @@
 - [Flaticon](https://www.flaticon.com/)
 - [Pexels](https://www.pexels.com/de-de/)
 - [FavIcon Generator](https://realfavicongenerator.net/)
+- [SVG Flaggen](https://hampusborgos.github.io/country-flags/)
+- [Flagicons](https://flagicons.lipis.dev/)
 
 ## Farben
 
@@ -100,3 +102,7 @@
 - [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701?icid=CNavAppsWindowsApps&hl=de-DE&gl=DE) - RECOMMENDED (WIN)
 - [Git Bash](https://git-scm.com/)
 - [Cmdr Terminal mit Bash](https://cmder.app/)
+
+## JS Plugins
+
+- [Floating UI](https://floating-ui.com/)
diff --git a/03_dom/uebungen/u11_tasse-01001/index.html b/03_dom/uebungen/u11_tasse-01001/index.html
index 868d5c8..d89702f 100644
--- a/03_dom/uebungen/u11_tasse-01001/index.html
+++ b/03_dom/uebungen/u11_tasse-01001/index.html
@@ -93,15 +93,35 @@
 
     <script>
       'use strict';
-      {
+
+      (() => {
         const $ = (qs) => document.querySelector(qs);
         const $$ = (qs) => Array.from(document.querySelectorAll(qs));
 
-        //  Übung 11: — Teil 6
-        // Der neue Wunsch besteht darin, den Text blau (blue) zu färben. Dieses Mal darfst du keine CSS-Klassen verwenden.
+        // === DOM & VARS =======
+        const DOM = {
+          pEls: $$('p'),
+          h1Els: $$('h1'),
+        };
 
-        // Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden.
-      }
+        // === INIT =============
+        const init = () => {
+          DOM.pEls.forEach((p) => {
+            p.style.color = 'blue';
+          });
+
+          DOM.h1Els.forEach((h1) => {
+            h1.style.color = 'red';
+          });
+        };
+
+        init();
+      })();
+
+      //  Übung 11: — Teil 6
+      // Der neue Wunsch besteht darin, den Text blau (blue) zu färben. Dieses Mal darfst du keine CSS-Klassen verwenden.
+
+      // Weise allen p-Elementen mithilfe des Style-Objektes die Farbe blue zu. Du kannst dafür direkt die JavaScript-Konsole verwenden.
     </script>
   </body>
 </html>
diff --git a/03_dom/uebungen/u12_button-bg-color/index.html b/03_dom/uebungen/u12_button-bg-color/index.html
index 616d559..6c1f157 100644
--- a/03_dom/uebungen/u12_button-bg-color/index.html
+++ b/03_dom/uebungen/u12_button-bg-color/index.html
@@ -27,18 +27,34 @@
       </div>
     </main>
     <script>
+      'use strict';
       'use strict';
       (() => {
         const $ = (qs) => document.querySelector(qs);
         const $$ = (qs) => Array.from(document.querySelectorAll(qs));
         // === DOM & VARS =======
-        const DOM = {};
+        const DOM = {
+          btnsColor: $$('button[data-color]'),
+
+          body: $('body'),
+        };
 
         // === INIT =============
-        const init = () => {};
+        const init = () => {
+          DOM.btnsColor.forEach((button) => {
+            button.addEventListener('click', changeColor);
+          });
+        };
 
         // === EVENTHANDLER =====
 
+        const changeColor = (e) => {
+          const newColor = e.currentTarget.dataset.color;
+
+          DOM.body.style.backgroundColor = newColor;
+          //window.document.body.style.backgroundColor = newColor;
+        };
+
         init();
 
         // Übung 12: Farbe wechsle dich
diff --git a/03_dom/uebungen/u13_range-bg-color/index.html b/03_dom/uebungen/u13_range-bg-color/index.html
index 83fb59d..f614e4c 100644
--- a/03_dom/uebungen/u13_range-bg-color/index.html
+++ b/03_dom/uebungen/u13_range-bg-color/index.html
@@ -57,8 +57,8 @@
           </div>
           <div class="mb-3">
             <strong>Aktuelle Farbe:</strong>
-            <span id="current-color">rgb(255, 255, 255)</span>
-            <span id="current-hex-color">#FFFFFF</span>
+            <span class="current-color">rgb(255, 255, 255)</span>
+            <span class="current-hex-color">#FFFFFF</span>
           </div>
         </div>
       </div>
@@ -71,16 +71,52 @@
         const $ = (qs) => document.querySelector(qs);
         const $$ = (qs) => Array.from(document.querySelectorAll(qs));
 
-        const DOM = {};
+        const module = $('.range-colors');
+        const DOM = {
+          inputRanges: Array.from(module.querySelectorAll('input[type="range"]')),
+          inputRed: module.querySelector('.input-red'),
+          inputGreen: module.querySelector('.input-green'),
+          inputBlue: module.querySelector('.input-blue'),
+          currentColor: module.querySelector('.current-color'),
+          currentHexColor: module.querySelector('.current-hex-color'),
+        };
 
         // === INIT =============
-        const init = () => {};
+        const init = () => {
+          updateBackgroundColor(DOM.inputRed.value, DOM.inputGreen.value, DOM.inputBlue.value);
+          updateColorInfo();
+
+          DOM.inputRanges.forEach((el) => {
+            el.addEventListener('input', changeBackgroundColor);
+          });
+        };
 
         // === EVENTHANDLER =====
+        const changeBackgroundColor = (e) => {
+          updateBackgroundColor(DOM.inputRed.value, DOM.inputGreen.value, DOM.inputBlue.value);
+          updateColorInfo();
+        };
 
         // === XHR/FETCH ========
 
         // === FUNCTIONS ========
+        const updateBackgroundColor = (r, g, b) => {
+          document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+        };
+
+        const updateColorInfo = () => {
+          const r = DOM.inputRed.value;
+          const g = DOM.inputGreen.value;
+          const b = DOM.inputBlue.value;
+
+          const hexRed = Number(r).toString(16).padStart(2, '0').toUpperCase();
+          const hexGreen = Number(g).toString(16).padStart(2, '0').toUpperCase();
+          const hexBlue = Number(b).toString(16).padStart(2, '0').toUpperCase();
+
+          console.log(hexRed);
+          DOM.currentColor.textContent = `rgb(${r},${g},${b} )`;
+          DOM.currentHexColor.textContent = `#${hexRed}${hexGreen}${hexBlue}`;
+        };
 
         init();
       })();
diff --git a/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours-adel.js b/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours-adel.js
new file mode 100644
index 0000000..55d9d40
--- /dev/null
+++ b/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours-adel.js
@@ -0,0 +1,81 @@
+'use strict';
+
+(() => {
+  const $ = (qs) => document.querySelector(qs);
+  const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+  // === DOM & VARS =======
+  const DOM = {
+    france: $('#fr'),
+    england: $('#uk'),
+    italian: $('#it'),
+    info: $('#info p'),
+    imgFrance: $('#fr').querySelector('img'),
+    imgEngland: $('#uk').querySelector('img'),
+    imgItalien: $('#it').querySelector('img'),
+  };
+
+  console.log(DOM);
+  // === INIT =============
+  const init = () => {
+    DOM.info.dataset.info = DOM.info.textContent;
+
+    //bildFrance.addEventListener('mouseenter', onMouseEnterOfFrance);
+
+    DOM.imgFrance.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgFrance.addEventListener('mouseleave', onMouseLeave);
+
+    DOM.imgEngland.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgEngland.addEventListener('mouseleave', onMouseLeave);
+
+    DOM.imgItalien.addEventListener('mouseenter', onMouseEnter);
+    DOM.imgItalien.addEventListener('mouseleave', onMouseLeave);
+  };
+
+  // === EVENTHANDLER =====
+  // const onMouseEnterOfFrance = (e) => {
+  // const img = e.currentTarget;
+  // DOM.info.textContent = img.dataset.description;
+  // // DOM.info.style.color = 'blue';
+  // // DOM.info.style.backgroundColor.color = 'green';
+  // };
+  const onMouseEnter = (e) => {
+    console.log('enter');
+    const img = e.currentTarget;
+    console.log(img);
+    DOM.info.textContent = img.dataset.description;
+    DOM.info.style.color = 'white';
+    DOM.info.style.backgroundColor = 'green';
+  };
+
+  const onMouseLeave = () => {
+    DOM.info.textContent = DOM.info.dataset.info;
+    DOM.info.style.color = 'black';
+    DOM.info.style.backgroundColor = 'white';
+  };
+
+  init();
+})();
+
+// Übung 14: Awesome Tours
+
+// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
+
+// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
+
+// Dazu gehört folgende Anzeige:
+
+// - Name der Sehenswürdigkeit
+// - Beschreibung
+// - Landesflagge als Bild
+
+// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
+
+// <section id="info">
+//   <h3>
+//     <img src="it.png" alt="Italian Flag" title="Italian Flag">
+//     Colosseum
+//   </h3>
+//   <p>
+//     The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
+//   </p>
+// </section>
diff --git a/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js b/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
index a3c8216..d4c3eac 100644
--- a/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
+++ b/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
@@ -2,12 +2,38 @@
 
 (() => {
   // === DOM & VARS =======
-  const DOM = {};
+  const module = document.querySelector('.m-tours');
+  const DOM = {
+    imgEls: Array.from(module.querySelectorAll('img')),
+    infoBox: document.querySelector('#info'),
+  };
+
+  console.log(DOM.infoBox);
 
   // === INIT =============
-  const init = () => {};
+  const init = () => {
+    module.dataset.info = DOM.infoBox.innerHTML.trim();
+
+    DOM.imgEls.forEach((el) => {
+      el.addEventListener('mouseenter', onMouseEnterImage);
+    });
+    module.addEventListener('mouseleave', onMouseLeave);
+  };
 
   // === EVENTHANDLER =====
+  const onMouseEnterImage = (e) => {
+    const { description, countryCode, flagName } = e.currentTarget.dataset;
+    const title = e.currentTarget.alt;
+
+    console.log(title);
+
+    // DOM.infoBox.innerHTML = `${description} ${countryCode} ${alt}`;
+    DOM.infoBox.innerHTML = `<h3><img src="assets/img/${countryCode}.svg" alt="${flagName}" \> ${title}</h3><p>${description}</p>`;
+  };
+
+  const onMouseLeave = (e) => {
+    DOM.infoBox.innerHTML = module.dataset.info;
+  };
 
   // === XHR/FETCH ========
 
@@ -15,3 +41,27 @@
 
   init();
 })();
+
+// Übung 14: Awesome Tours
+
+// Das Reiseunternehmen Awesome Tours bietet Rundreisen zu verschiedenen Sehenswürdigkeiten in Europa an. Im Zuge eines Rebuilds der Website möchte das Unternehmen die Darstellung der Sehenswürdigkeiten ebenfalls modernisieren. Das Design inklusive HTML- und CSS-Code hat bereits eine Agentur übernommen.
+
+// Die Informationen zu den Sehenswürdigkeiten (Name, Beschreibung, Land usw.) sind dabei bereits im HTML-Code hinterlegt. Deine Aufgabe ist es nun, bei Mouseenter eine Darstellung wie in Abb. 28 zu ermöglichen.
+
+// Dazu gehört folgende Anzeige:
+
+// - Name der Sehenswürdigkeit
+// - Beschreibung
+// - Landesflagge als Bild
+
+// Das HTML zur Anzeige der Eiffelturm-Infos könnte beispielsweise so aussehen:
+
+// <section id="info">
+//   <h3>
+//     <img src="it.png" alt="Italian Flag" title="Italian Flag">
+//     Colosseum
+//   </h3>
+//   <p>
+//     The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
+//   </p>
+// </section>
diff --git a/03_dom/uebungen/u14_awesome-tours/index.html b/03_dom/uebungen/u14_awesome-tours/index.html
index 6a3df1c..a99d29e 100644
--- a/03_dom/uebungen/u14_awesome-tours/index.html
+++ b/03_dom/uebungen/u14_awesome-tours/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
diff --git a/03_dom/unterricht/tag24/01_style-font-size/assets/js/main.js b/03_dom/unterricht/tag24/01_style-font-size/assets/js/main.js
index 6911429..dcaae50 100644
--- a/03_dom/unterricht/tag24/01_style-font-size/assets/js/main.js
+++ b/03_dom/unterricht/tag24/01_style-font-size/assets/js/main.js
@@ -98,7 +98,7 @@
 
   const currentFontSize = () => {
     //  return parseInt(window.getComputedStyle(DOM.text).fontSize); // => '16px' -> 16
-    return parseInt(DOM.text.style.fontSize);
+    return parseInt(DOM.text.style.fontSize); // => '16px' -> 16
   };
 
   init();
diff --git a/03_dom/unterricht/tag24/04_data-attribute/index.html b/03_dom/unterricht/tag24/04_data-attribute/index.html
index cf8c764..6a76006 100644
--- a/03_dom/unterricht/tag24/04_data-attribute/index.html
+++ b/03_dom/unterricht/tag24/04_data-attribute/index.html
@@ -12,7 +12,7 @@
         <h1>Eigene Attribute mit data-[ATTRIBUT_NAME] - DOMStringMap</h1>
         <p>
           <a href="https://developer.mozilla.org/de/docs/Web/API/DOMStringMap"> DOMStringMap </a>
-          - Die <code>DOMStringMap</code>-Schnittstelle wird für das HTMLElement.dataset-Attribut verwendet, um Daten
+          - Die <code>DOMStringMap-Schnittstelle</code> wird für das HTMLElement.dataset-Attribut verwendet, um Daten
           für benutzerdefinierte Attribute darzustellen, die zu Elementen hinzugefügt werden.
         </p>
         <hr />
@@ -35,7 +35,7 @@
           odit optio excepturi labore dolore non, expedita temporibus adipisci vero, modi magnam veritatis?
         </p>
         <button class="btn btn-dark button-redirect">
-          Weiterleitung in <span class="timer-counter" data-timer="5"></span>
+          Weiterleitung in <span class="timer-counter" data-timer="15"></span>
         </button>
       </div>
     </main>
@@ -50,6 +50,8 @@
         const DOM = {
           button: $('.button'),
           keywords: $$('.keyword'),
+          //////////////////////
+          // weiterleitung
           buttonRedirect: $('.button-redirect'),
         };
 
@@ -59,7 +61,7 @@
         const init = () => {
           DOM.button.dataset.newData = 'neues Data Attribut'; //=> <button data-new-data="neues Data Attribut"></button>
 
-          console.log(DOM.button.dataset); //=> DOMStringMap {content: 'Text für headline', ref: 'h1', contentId: '0', myAttributWithManyWords: 'yes', newData: 'neues Data Attribut'}
+          console.log(DOM.button.dataset); //=> DOMStringMap {content: 'Text für headline', ref: 'h1', contentId: '0', myAttributWithManyWords: 'yes', newData: 'neues Data Attribut'}
 
           // (NOT RECOMMENDED)
           console.log(DOM.button.getAttribute('data-new-data')); // neues Data Attribut
@@ -69,6 +71,10 @@
           DOM.keywords.forEach((el) => {
             el.addEventListener('mouseenter', onMouseEnterKeyword);
           });
+
+          //////////////////////
+          // weiterleitung
+          DOM.buttonRedirect.addEventListener('click', onClickRedirect);
         };
 
         // === EVENTHANDLER =====
@@ -85,9 +91,41 @@
           console.log(el.dataset.tooltip);
         };
 
+        //////////////////////
+        // weiterleitung
+        const onClickRedirect = (e) => {
+          const btnEl = e.currentTarget;
+          const timer = btnEl.querySelector('.timer-counter').dataset.timer || 10;
+          btnEl.disabled = true;
+
+          // alten Text im button abspeichen
+          btnEl.dataset.oldText = btnEl.textContent;
+
+          showCounterOnBtnRedirect(btnEl, timer);
+        };
+
         // === XHR/FETCH ========
 
         // === FUNCTIONS ========
+        //////////////////////
+        // weiterleitung
+        const showCounterOnBtnRedirect = (btn, counter) => {
+          // Basisfall
+          if (counter === 0) {
+            btn.disabled = false;
+            // alten Text wieder reinschreiben - eigentlich würde hier der redirect passieren
+            btn.textContent = btn.dataset.oldText;
+
+            window.location.href = 'https://www.gfn.de';
+            return;
+          }
+
+          btn.textContent = ` --- ${counter} ---`;
+
+          setTimeout(() => {
+            showCounterOnBtnRedirect(btn, counter - 1);
+          }, 1000);
+        };
 
         init();
       })();
diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css b/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css
new file mode 100644
index 0000000..e69de29
diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js b/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js
new file mode 100644
index 0000000..fe51c15
--- /dev/null
+++ b/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js
@@ -0,0 +1,19 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {
+    console.log('init');
+  };
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
diff --git a/03_dom/unterricht/tag25/01_product-manager/index.html b/03_dom/unterricht/tag25/01_product-manager/index.html
new file mode 100644
index 0000000..2c1f4ba
--- /dev/null
+++ b/03_dom/unterricht/tag25/01_product-manager/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Product Manager</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/main.css" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Product Manager</h1>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/03_dom/unterricht/tag25/01_product-manager/package.json b/03_dom/unterricht/tag25/01_product-manager/package.json
new file mode 100644
index 0000000..26b0799
--- /dev/null
+++ b/03_dom/unterricht/tag25/01_product-manager/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "01_product-manager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "type": "module"
+}