diff --git a/media/pic/Thumbs.db b/media/pic/Thumbs.db
new file mode 100644
index 0000000..f1c6889
Binary files /dev/null and b/media/pic/Thumbs.db differ
diff --git a/navigation.html b/navigation.html
index 23a061a..52735ba 100644
--- a/navigation.html
+++ b/navigation.html
@@ -13,6 +13,7 @@
       <a href="t-konto.html">T-Konten</a>
       <a href="buchungssatz.html">Buchungssatz</a>
       <a href="vorkontierung.html">Vorkontierung</a>
+      <a href="taschenrechner.html">Taschenrechner</a>
     </div>
   </div>
   <div class="dropdown">
diff --git a/taschenrechner.html b/taschenrechner.html
new file mode 100644
index 0000000..ed523bd
--- /dev/null
+++ b/taschenrechner.html
@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buchführung</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/html2canvas.min.js"></script>
+    <script src="js/js-yaml.min.js"></script>
+    <script src="js/kontenplan.js"></script>
+    <script src="js/clipboard.min.js"></script>
+    <script src="js/menu.js"></script>
+    <style>
+        .taschenrechner #calc {
+            background: #d33f01;
+            border: 1px solid #d33f01;
+            border-radius: 0.5em;
+            box-shadow: inset 0 0 5px white;
+            display: inline-block;
+            padding: 1em 0;
+            text-align: center;
+            width: 230px;
+            line-height: 1.5;
+            font-size: medium;
+            color: black;
+        }
+
+        .taschenrechner #calc output {
+            display: block;
+            height: 1.5em;
+            background: white;
+            text-align: right;
+            font-size: 100%;
+            padding-right: 5%;
+            margin: 5px 6%;
+            overflow: auto;
+
+        }
+
+        .taschenrechner #calc output.expanded {
+            background: rgba(0, 0, 0, 0.55);
+            text-align: center;
+            height: auto;
+            max-height: 50vh;
+            padding-right: 5%;
+            margin: 0;
+            position: fixed;
+            right: 50%;
+            font-size: calc(44px + (160 - 44) * ((100vw - 320px) / (1600 - 320)));
+            bottom: 0;
+            transform: translateX(50%);
+            color: white;
+            width: 70%;
+            z-index: 9999;
+
+        }
+
+        .taschenrechner #calc fieldset {
+            border: none;
+            margin: 0 auto;
+            padding-bottom: 0;
+        }
+
+        .taschenrechner #calc button {
+            cursor: pointer;
+            margin: 5px 2%;
+            width: 18%;
+            line-height: 1.5em;
+            padding: 0;
+            color: black;
+        }
+
+        .taschenrechner #usage {
+            display: inline-block;
+            padding: 0 0 0 2em;
+            vertical-align: top;
+        }
+    </style>
+
+</head>
+<main>
+    <div w3-include-html="navigation.html"></div>
+    <h2>Taschenrechner</h2>
+       <div id="taschenrechnerForm" class="box">
+    <div class="taschenrechner">
+        <form id="calc">
+            <button id="toggleButton" style="float:right;"><svg xmlns="http://www.w3.org/2000/svg" width="1em"
+                    height="1em" style="vertical-align: baseline;" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+                    <path
+                        d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
+                </svg>
+            </button>
+            <output>0</output>
+
+            <fieldset style="clear:right">
+
+                <button>√</button>
+                <button>x²</button>
+                <button>ln</button>
+                <button>C</button>
+                <button>7</button>
+                <button>8</button>
+                <button>9</button>
+                <button>+</button>
+                <button>4</button>
+                <button>5</button>
+                <button>6</button>
+                <button>-</button>
+                <button>1</button>
+                <button>2</button>
+                <button>3</button>
+                <button>×</button>
+                <button>0</button>
+                <button>.</button>
+                <button>=</button>
+                <button>÷</button>
+            </fieldset>
+    </div>
+     
+        <p>Ein einfacher Taschnenrechner, der in Moodle bzw. in die mebis Lernplattform eingebunden werden kann.
+            Grundlage ist der <a
+                href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner">Taschenrechner von
+                selfhtml</a>.
+        </p>
+        <h3>Anpassungen</h3>
+        <ul>
+            <li>Farbanpassung an mebis Lernplattform</li>
+            <li>Vergrößerte Ansicht: Display kann zu Demonstrationszwecken per Button ein- und ausgeklappt werden</li>
+        </ul>
+        <h3>In Moodle integrieren</h3>
+        <ul>
+            <li>Sicherheitshalber eine Sicherung des Kurses erstellen (optional).</li>
+            <li>Texteditor in den Einstellungen ausschalten ("Einfacher Editor").</li>
+            <li>Den folgenden Code kopieren und in ein Textfeld, zum Beispiel im Seitenblock, einfügen.</li>
+        </ul>
+        <pre><textarea readonly="readonly" cols="80" rows="12"><style>
+            .taschenrechner #calc {
+                background: #d33f01;
+                border: 1px solid #d33f01;
+                border-radius: 0.5em;
+                box-shadow: inset 0 0 5px white;
+                display: inline-block;
+                padding: 1em 0;
+                text-align: center;
+                width: 230px;
+                line-height: 1.5;
+                font-size:medium;
+        }
+            
+            .taschenrechner #calc output {
+                display: block;
+                height: 1.5em;
+                background: white;
+                text-align: right;
+                font-size: 100%;
+                padding-right: 5%;
+                margin: 5px 6%;
+                overflow: auto;
+        
+            }
+            
+            .taschenrechner #calc output.expanded {
+                background: rgba(0, 0, 0, 0.55);
+                text-align: center;
+                height: auto;
+                max-height: 50vh;
+                padding-right: 5%;
+                margin: 0;
+                position: fixed;
+                right: 50%;
+                font-size: calc(44px + (160 - 44) * ((100vw - 320px) / (1600 - 320)));
+                bottom: 0;
+                transform: translateX(50%);
+                color: white;
+                width: 70%;
+                z-index: 9999;
+                
+            }
+            
+            .taschenrechner #calc fieldset {
+                border: none;
+                margin: 0 auto;
+                padding-bottom: 0;
+            }
+            
+            .taschenrechner #calc button {
+                cursor: pointer;
+                margin: 5px 2%;
+                width: 18%;
+                line-height: 1.5em;
+             }
+            
+            .taschenrechner #usage {
+                display: inline-block;
+                padding: 0 0 0 2em;
+                vertical-align: top;
+            }
+            </style>
+            
+        
+            <div class="taschenrechner">
+                   <form id="calc">
+                    <button id="toggleButton" style="float:right;width:1.8em;aspect-ratio: 1/1;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" style="vertical-align: baseline;" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
+                     </button>
+                               <output>0</output>
+                              
+                                <fieldset style="clear:right">
+        
+                        <button>√</button>
+                        <button>x²</button>
+                        <button>ln</button>
+                        <button>C</button>
+                        <button>7</button>
+                        <button>8</button>
+                        <button>9</button>
+                        <button>+</button>
+                        <button>4</button>
+                        <button>5</button>
+                        <button>6</button>
+                        <button>-</button>
+                        <button>1</button>
+                        <button>2</button>
+                        <button>3</button>
+                        <button>×</button>
+                        <button>0</button>
+                        <button>.</button>
+                        <button>=</button>
+                        <button>÷</button>
+                    </fieldset>
+                </form>
+                </div>
+            <script>
+                "use strict";
+                document.addEventListener("DOMContentLoaded", function () {
+                    if (!Array.prototype.includes) {
+                        Array.prototype.includes = function includes(searchElement) {
+                            if (this == null) {
+                                throw new TypeError('this is null or undefined');
+                            }
+                            var object = Object(this),
+                                length = object.length >>> 0;
+                            if (length === 0) {
+                                return false;
+                            }
+                            var start = arguments[1] >> 0,
+                                key = start < 0 ? Math.max(start + length, 0) : start,
+                                currentElement;
+                            while (key < length) {
+                                currentElement = object[key];
+                                if (searchElement === currentElement || (searchElement !== searchElement &&
+                                    currentElement !== currentElement)) {
+                                    return true
+                                }
+                                key++;
+                            }
+                            return false;
+                        };
+                    }
+                    if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype
+                        .forEach;
+                    var form = document.getElementById("calc"),
+                        out = document.querySelector("#calc output"),
+                        overwrite = true;
+
+                    function clear() {
+                        out.textContent = 0;
+                        overwrite = true;
+                    }
+
+                    function extra(type) {
+                        switch (type) {
+                            case "√":
+                                out.textContent = Math.sqrt(result(true));
+                                break;
+                            case "x²":
+                                out.textContent = Math.pow(result(true), 2);
+                                break;
+                            case "ln":
+                                out.textContent = Math.log(result(true));
+                                break;
+                        }
+                        overwrite = true;
+                    }
+
+                    function input(c) {
+                        // remove leading zero?
+                        if (overwrite) {
+                            out.textContent = (c == "." ? "0." : c);
+                        } else {
+                            out.textContent += c;
+                        }
+                        overwrite = false;
+                    }
+
+                    function operator(c) {
+                        out.textContent += " " + c + " ";
+                        overwrite = false;
+                    }
+
+                    function result(noDisplay) {
+                        var input = out.textContent,
+                            r = 0;
+                        // replace × with * and ÷ with / for eval()
+                        input = input.replace(/×/g, "*")
+                            .replace(/÷/g, "/");
+                        // remove anything else that is not allowed here
+                        input = input.replace(/[^0-9. +\-*\/]/g, "");
+                        try {
+                            r = eval(input);
+                        } catch (e) {
+                            r = 0;
+                        }
+                        if (noDisplay !== true) {
+                            out.textContent = r;
+                            overwrite = true;
+                        }
+                        return r;
+                    }
+                    // initialize only if <output> is found
+                    if (out) {
+                        form.addEventListener("submit", function (ev) {
+                            // prevent form submission and page reload
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                            return false;
+                        });
+                        // button functionalities
+                        document.querySelectorAll("#calc button")
+                            .forEach(function (b) {
+                                var c = b.textContent;
+                                switch (c) {
+                                    case "9":
+                                    case "8":
+                                    case "7":
+                                    case "6":
+                                    case "5":
+                                    case "4":
+                                    case "3":
+                                    case "2":
+                                    case "1":
+                                    case "0":
+                                    case ".":
+                                        b.addEventListener("click", function () {
+                                            input(c);
+                                        });
+                                        break;
+                                    case "+":
+                                    case "-":
+                                    case "×":
+                                    case "÷":
+                                        b.addEventListener("click", function () {
+                                            operator(c);
+                                        });
+                                        break;
+                                    case "√":
+                                    case "x²":
+                                    case "ln":
+                                        b.addEventListener("click", function () {
+                                            extra(c);
+                                        });
+                                        break;
+                                    case "=":
+                                        b.addEventListener("click", result);
+                                        break;
+                                    case "C":
+                                        b.addEventListener("click", clear);
+                                        break;
+                                }
+                            });
+                        // keyboard support
+                        document.addEventListener("keypress", function (ev) {
+                            // decimal point
+                            if ([44, 46].includes(ev.charCode)) {
+                                // , .
+                                input(".");
+                            }
+                            // digits
+                            if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(ev.charCode)) {
+                                // 0-9
+                                input(ev.charCode - 48);
+                            }
+                            // operators
+                            if ([42, 43, 45, 47].includes(ev.charCode)) {
+                                // * + - /
+                                operator(
+                                    ["×", "+", "-", "÷"][
+                                    [42, 43, 45, 47].indexOf(ev.charCode)
+                                    ]);
+                            }
+                            // result
+                            if (ev.charCode == 61) {
+                                // =
+                                result();
+                            }
+                            // clear
+                            if ([67, 99].includes(ev.charCode)) {
+                                // C, c
+                                clear();
+                            }
+                            // logarithm
+                            if ([76, 108].includes(ev.charCode)) {
+                                // L, l
+                                extra("ln");
+                            }
+                            // root
+                            if ([82, 114].includes(ev.charCode)) {
+                                // R, r
+                                extra("√");
+                            }
+                            // square
+                            if ([83, 115].includes(ev.charCode)) {
+                                // S, s
+                                extra("x²");
+                            }
+                            // additional clear and result keys
+                            switch (ev.code) {
+                                // <delete> and <backspace> to clear display
+                                case "Backspace":
+                                case "Delete":
+                                    clear();
+                                    break;
+                                // both <enter> keys to display result
+                                case "Enter":
+                                case "NumpadEnter":
+                                    result();
+                                    break;
+                            }
+                        });
+                    }
+                });
+            </script>
+            <script>
+                document.getElementById('toggleButton').addEventListener('click', function () {
+                    const outputElement = document.querySelector('.taschenrechner #calc output');
+                    outputElement.classList.toggle('expanded');
+                });
+            </script></textarea></pre>
+        </div>
+</main>
+
+<div w3-include-html="footer.html"></div>
+
+<script>
+    includeHTML();
+</script>
+<script>
+    "use strict";
+    document.addEventListener("DOMContentLoaded", function () {
+        if (!Array.prototype.includes) {
+            Array.prototype.includes = function includes(searchElement) {
+                if (this == null) {
+                    throw new TypeError('this is null or undefined');
+                }
+                var object = Object(this),
+                    length = object.length >>> 0;
+                if (length === 0) {
+                    return false;
+                }
+                var start = arguments[1] >> 0,
+                    key = start < 0 ? Math.max(start + length, 0) : start,
+                    currentElement;
+                while (key < length) {
+                    currentElement = object[key];
+                    if (searchElement === currentElement || (searchElement !== searchElement &&
+                        currentElement !== currentElement)) {
+                        return true
+                    }
+                    key++;
+                }
+                return false;
+            };
+        }
+        if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype
+            .forEach;
+        var form = document.getElementById("calc"),
+            out = document.querySelector("#calc output"),
+            overwrite = true;
+
+        function clear() {
+            out.textContent = 0;
+            overwrite = true;
+        }
+
+        function extra(type) {
+            switch (type) {
+                case "√":
+                    out.textContent = Math.sqrt(result(true));
+                    break;
+                case "x²":
+                    out.textContent = Math.pow(result(true), 2);
+                    break;
+                case "ln":
+                    out.textContent = Math.log(result(true));
+                    break;
+            }
+            overwrite = true;
+        }
+
+        function input(c) {
+            // remove leading zero?
+            if (overwrite) {
+                out.textContent = (c == "." ? "0." : c);
+            } else {
+                out.textContent += c;
+            }
+            overwrite = false;
+        }
+
+        function operator(c) {
+            out.textContent += " " + c + " ";
+            overwrite = false;
+        }
+
+        function result(noDisplay) {
+            var input = out.textContent,
+                r = 0;
+            // replace × with * and ÷ with / for eval()
+            input = input.replace(/×/g, "*")
+                .replace(/÷/g, "/");
+            // remove anything else that is not allowed here
+            input = input.replace(/[^0-9. +\-*\/]/g, "");
+            try {
+                r = eval(input);
+            } catch (e) {
+                r = 0;
+            }
+            if (noDisplay !== true) {
+                out.textContent = r;
+                overwrite = true;
+            }
+            return r;
+        }
+        // initialize only if <output> is found
+        if (out) {
+            form.addEventListener("submit", function (ev) {
+                // prevent form submission and page reload
+                ev.preventDefault();
+                ev.stopPropagation();
+                return false;
+            });
+            // button functionalities
+            document.querySelectorAll("#calc button")
+                .forEach(function (b) {
+                    var c = b.textContent;
+                    switch (c) {
+                        case "9":
+                        case "8":
+                        case "7":
+                        case "6":
+                        case "5":
+                        case "4":
+                        case "3":
+                        case "2":
+                        case "1":
+                        case "0":
+                        case ".":
+                            b.addEventListener("click", function () {
+                                input(c);
+                            });
+                            break;
+                        case "+":
+                        case "-":
+                        case "×":
+                        case "÷":
+                            b.addEventListener("click", function () {
+                                operator(c);
+                            });
+                            break;
+                        case "√":
+                        case "x²":
+                        case "ln":
+                            b.addEventListener("click", function () {
+                                extra(c);
+                            });
+                            break;
+                        case "=":
+                            b.addEventListener("click", result);
+                            break;
+                        case "C":
+                            b.addEventListener("click", clear);
+                            break;
+                    }
+                });
+            // keyboard support
+            document.addEventListener("keypress", function (ev) {
+                // decimal point
+                if ([44, 46].includes(ev.charCode)) {
+                    // , .
+                    input(".");
+                }
+                // digits
+                if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(ev.charCode)) {
+                    // 0-9
+                    input(ev.charCode - 48);
+                }
+                // operators
+                if ([42, 43, 45, 47].includes(ev.charCode)) {
+                    // * + - /
+                    operator(
+                        ["×", "+", "-", "÷"][
+                        [42, 43, 45, 47].indexOf(ev.charCode)
+                        ]);
+                }
+                // result
+                if (ev.charCode == 61) {
+                    // =
+                    result();
+                }
+                // clear
+                if ([67, 99].includes(ev.charCode)) {
+                    // C, c
+                    clear();
+                }
+                // logarithm
+                if ([76, 108].includes(ev.charCode)) {
+                    // L, l
+                    extra("ln");
+                }
+                // root
+                if ([82, 114].includes(ev.charCode)) {
+                    // R, r
+                    extra("√");
+                }
+                // square
+                if ([83, 115].includes(ev.charCode)) {
+                    // S, s
+                    extra("x²");
+                }
+                // additional clear and result keys
+                switch (ev.code) {
+                    // <delete> and <backspace> to clear display
+                    case "Backspace":
+                    case "Delete":
+                        clear();
+                        break;
+                    // both <enter> keys to display result
+                    case "Enter":
+                    case "NumpadEnter":
+                        result();
+                        break;
+                }
+            });
+        }
+    });
+</script>
+<script>
+    document.getElementById('toggleButton').addEventListener('click', function () {
+        const outputElement = document.querySelector('.taschenrechner #calc output');
+        outputElement.classList.toggle('expanded');
+    });
+</script>
+</main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/Thumbs.db b/templates/Thumbs.db
index bf5d124..6012b2c 100644
Binary files a/templates/Thumbs.db and b/templates/Thumbs.db differ
