Passe es an, sodass es das gleiche Verhalten wie word hat bzgl wann die zeilenbegrenzung erreicht ist und wann eine neue seite erstellt wird. Stelle auch sicher, dass der Button fixiert am unteren ende des bildschirms ist und damit immer sichtbar ist.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word File Creator</title>
    <!-- Quill CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        /* Reset and Base Styling */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #f5f5f5;
            color: #333;
        }

        /* Sidebar Styling */
        .sidebar {
            width: 100%;
            background-color: #ffffff;
            padding: 20px;
            border-bottom: 2px solid #e0e0e0;
            box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
        }

        .sidebar h2 {
            font-size: 22px;
            color: #4285f4;
            text-align: center;
            margin-bottom: 15px;
        }

        .sidebar p {
            font-size: 14px;
            text-align: center;
            color: #666;
        }

        /* Main Content Styling */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            background-color: #fafafa;
        }

        /* Quill Editor Styling */
        #editor-container {
            height: 100%;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            padding: 10px;
            border-radius: 5px;
        }

        .toolbar {
            margin-bottom: 10px;
        }

        /* Export Button */
        .export-btn {
            padding: 12px 24px;
            margin-top: 20px;
            background-color: #34a853;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            align-self: flex-end;
            transition: background-color 0.3s ease;
        }

        .export-btn:hover {
            background-color: #2c8e46;
        }

        .export-btn:after {
            content: 'Export your content as a Word file';
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .export-btn:hover:after {
            visibility: visible;
            opacity: 1;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .main {
                padding: 15px;
            }

            .export-btn {
                width: 100%;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="sidebar">
        <h2>Erstellung eines Word-Dokuments</h2>
        <p>Benutze den Editor um den Text anzupassen, bevor du ihn exportierst.</p>
    </div>

    <!-- Main Content -->
    <div class="main">
        <!-- Quill Toolbar -->
        <div id="toolbar" class="toolbar">
            <select class="ql-header">
                <option value="1">Heading 1</option>
                <option value="2">Heading 2</option>
                <option value="3">Heading 3</option>
                <option selected>Normal</option>
            </select>
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <select class="ql-align">
                <option selected></option>
                <option value="center"></option>
                <option value="right"></option>
                <option value="justify"></option>
            </select>
            <select class="ql-color"></select>
            <select class="ql-background"></select>
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
            <button class="ql-clean"></button>
        </div>

        <!-- Editor -->
        <div id="editor-container"><h1>Hellooo</h1></div>

        <!-- Export Button -->
        <button class="export-btn" onclick="exportToWord()">Export as Word</button>
    </div>

    <!-- Quill JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- FileSaver.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

    <script>
        // Initialize Quill editor
        const quill = new Quill('#editor-container', {
            theme: 'snow',
            modules: {
                toolbar: '#toolbar'
            }
        });

        // Export to Word functionality
        function exportToWord() {
            const htmlContent = quill.root.innerHTML;
            const preHtml = `
                <html xmlns:o='urn:schemas-microsoft-com:office:office' 
                      xmlns:w='urn:schemas-microsoft-com:office:word' 
                      xmlns='http://www.w3.org/TR/REC-html40'>
                <head>
                    <meta charset='utf-8'>
                    <title>Exported Document</title>
                    <style>
                        body { font-family: Arial, sans-serif; }
                        h1, h2, h3, p { margin: 0 0 10px 0; }
                    </style>
                </head>
                <body>
            `;
            const postHtml = "</body></html>";
            const fullHtml = preHtml + htmlContent + postHtml;

            const blob = new Blob(['\ufeff', fullHtml], {
                type: 'application/msword'
            });

            const filename = 'document_' + new Date().toISOString().split('T')[0] + '.doc';

            // Create download link
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;

            // Trigger download
            document.body.appendChild(link);
            link.click();

            // Clean up
            document.body.removeChild(link);
        }
    </script>
</body>
</html>