<!-- #######: START : Systemload-sourcecode-debug -->
<!-- AREA-01: DEBUG-Info from loadmode and set functions -->
<!-- AREA-02: Globals-killer and DEBUG-Info from CMD -->
<!-- AREA-03: Set GETs, load keymanager and load systemconfig -->
<!-- AREA-04: Load mainproject from file -->
<!-- MAINPRO: Readed mainproject: _FALSE_ -->
<!-- AREA-05: Start sessioncontroller -->
<!-- AREA-06: Start Projegtmanager and load project settings -->
<!-- PROJECT: projectHashManager(filecheck_hash) -->
<!-- PROJECT: Readed project: _FALSE_  -->
<!-- PROJECT: Loadingcase 3 -->
<!-- AREA-07: Check Systemproject-file options -->
<!-- AREA-08: DEBUG-Settings from project -->
<!-- AREA-09: Check langechange and set language -->
<!-- AREA-10: Language changer and language-change-settings -->
<!-- AREA-11: Check valide URL -->
<!-- AREA-12: Connection-check and set -->
<!-- AREA-13: Load and set loader-report -->
<!-- AREA-14: Project setting- and checkfiles - CMS-Service -->
<!-- PROJECT: projectHashManager(write_hash) -->
<!-- AREA-15: Project checking database-connection -->
<!-- AREA-16: Load Geo-API -->
<!-- AREA-17: Userapi/Mobiledetect and set user-defines -->
<!-- AREA-18: Cookiemanager, User, Date, theme and timeforming -->
<!-- AREA-19: Fontsettings -->
<!-- AREA-20: Fontsize addings -->
<!-- AREA-21: Usersettings and systemmail -->
<!-- AREA-22: Start wallpaper defines -->
<!-- AREA-23: Check the host and define VIEWPOINT -->
<!-- VIEWPNT: Redirection: Use Systemdefault root -->
<!-- VIEWPNT: VIEWPOINT: root -->
<!-- VIEWPNT: VIEWPOINT_APP:  -->
<!-- VIEWPNT: VIEWPOINT_TYP: external -->
<!-- VIEWPNT: VIEWREQUESTS: N; -->
<!-- AREA-24: Start Securecenter -->
<!-- AREA-25: Serialcheck-function and DEBUG-Load infos (Sourcecode) -->
<!-- AREA-26: End loading-timer [0.01s] and loading-info -->
<!-- AREA-27: System full loaded - now run index.php -->
<!-- #######: ENDING : Systemload-sourcecode-debug -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| #mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm# |
| ################################################################################## |
| #MMMMMMMMMMMMN`       :MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN.       -MMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMd        oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM/       `mMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMs        hMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMs        hMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMM:       `mMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd        oMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMN.       -MMMMMMMMMMMMMMMMMMMMMMMMMMMMMN.       :MMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMd`       +MMMMMMMMMMMMMMMMMMMMMMMMMMMM:       .NMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMy        yMMMMMMMMMMMMMMMMMMMMMMMMMMo        dMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMM/       `mMMMMMMMMMMMMMMMMMMMMMMMMh        sMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMN-       -NMMMMMMMMMMMMMMMMMMMMMMm`       /MMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMm`       /MMMMMMMMMMMMMMMMMMMMMM-       .NMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMsoooo:        +omsoooooooyMMMMMMMMM+       `mMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMM+                -y        yMMMMMMMy        yMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMy                  ++       `mMMMMMm`       +MMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMm`                   s-       .NMMMN.       -MMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMdyyyyyyyyyys        /dm`       /MMM/       `mMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMo        dMh        sMs        hMMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMM:       .NMo        s        +MMMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMMN.       :MM:               :MMMMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMMMd        oMN`             `NMMMMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMMMMs        hMh             hMMMMMMMMMMMMMMMMMMMMMMMMMMM# |
| #MMMMMMMMMMMMMMMMMMMMMMMMMMMM/       `mMo           oMMMMMMMMMMMMMMMMMMMMMMMMMMMM# |
| ################################################################################## |
| #mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm# |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -+
| - This Script © 2025 by AW-DesignZ.de                                              |
| - Don't remove this Copyright !!!                                                  |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -+
| -> Thank's for using this Script and have fun with it <-                           |
| -> SUPPORT: Mail to info@aw-designz.de or visit our homepage                       |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -+
| #mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm# |
| ######################|*| Visit us @ www.aw-designz.de |*|######################## |
| #mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm# |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->


<!--
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine App | Startseite</title>
<meta name="description" content="Willkommen auf meiner App. Ideal für Mobilgeräte und als WebApp.">
<meta name="keywords" content="webapp, mobil, CMS, content">
<meta name="author" content="Dein Name">

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Meine App">

<meta property="og:title" content="Meine App">
<meta property="og:description" content="Die Progressive Web App für alles.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://www.aw-designz.de/">
<meta property="og:type" content="website">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

-->
<!DOCTYPE html>
<html lang="de" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <link href=".system/sources/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href=".system/sources/assets/css/bootstrap-icons.min.css" rel="stylesheet">
    <link href=".system/sources/assets/css/theme.css.php" rel="styleSheet" type="text/css">
    <link rel="icon" type="image/png" href=".system/sources/assets/img/awd.png">
    <script src=".system/sources/assets/js/bootstrap.bundle.min.js"></script>
    <script src=".system/sources/assets/js/theme.js.php"></script>
    <style>
        *, body, html {
            margin:0;
            padding: 0;
        }
        .lockscreenview {
            /*background: url(.system/sources/config/media/lockbg.jpg); */
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            object-fit: cover;
            z-index: 0;
        }
        
        .ls_buttons_hover {
            opacity: 0.7 !important;
            transition: all 0.5s ease;
        }
        .ls_buttons_hover:hover {
            opacity: 1 !important;
        }
/* =========================
MINI CALENDAR (Apple + Bootstrap Hybrid)
========================= */

.mini-calendar {
    width: 100%;
    max-width: 760px;
    color: #fff;
}

/* =========================
HEADER
========================= */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cal-title {
    font-weight: 600;
    font-size: 14px;
    opacity: 0.9;
}

.cal-nav-group {
    display: flex;
    gap: 5px;
}

/* NAV BUTTONS */
.cal-nav {
    border: none;
    border-radius: 8px;
    padding: 4px 8px;

    background: rgba(255,255,255,0.12);
    color: #fff;

    transition: 0.2s ease;
}

.cal-nav:hover {
    background: rgba(255,255,255,0.25);
}

/* =========================
GRID (FIXED STRUCTURE)
========================= */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* WEEKDAY HEAD */
.cal-day.head {
    font-size: 11px;
    text-align: center;
    opacity: 0.5;
}

/* =========================
DAY CELL
========================= */
.cal-day {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 32px;

    border-radius: 10px;
    font-size: 13px;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover */
.cal-day:not(.head):hover {
    background: rgba(255,255,255,0.15);
}

/* TODAY (neutral + override safe) */
.cal-day.today {
    background: rgba(13,110,253,0.25);
    font-weight: 600;
}

/* SELECTED DAY */
.cal-day.selected {
    background: rgba(13,110,253,0.5);
    color: #fff;
}

/* EVENT DOT */
.cal-day.event::after {
    content: '';
    position: absolute;

    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);

    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff4d4d;
}

/* =========================
EVENT PANEL
========================= */
.calendar-events {
    margin-top: 15px;
    padding: 12px;

    border-radius: 14px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);

    font-size: 13px;
    min-height: 60px;
}

/* DATE HEADER */
.event-date {
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

/* EVENT LIST */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* SINGLE EVENT */
.event-item {
    padding: 8px 10px;
    border-radius: 10px;

    background: rgba(255,255,255,0.12);

    transition: 0.2s ease;
}

.event-item:hover {
    background: rgba(255,255,255,0.2);
}

/* EMPTY STATES */
.event-empty,
.event-placeholder {
    text-align: center;
    opacity: 0.6;
}

/* =========================
TODAY BUTTON
========================= */
.btn-today {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 20px;

    padding: 4px 12px;
    font-size: 12px;

    backdrop-filter: blur(6px);
    transition: 0.2s ease;
}

.btn-today:hover {
    background: rgba(255,255,255,0.35);
}

/* optional disabled state (du hattest JS dafür) */
.btn-today:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* =========================
ACCORDION
========================= */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(255,255,255,0.1);
}

.accordion-button {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

.accordion-button:not(.collapsed) {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

.accordion-body {
    background: rgba(255,255,255,0.05);
}
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Einheitlicher Item Style */
.settings-item {
    display: flex;
    align-items: center;

    width: 100%;
    padding: 10px 12px;

    border-radius: 10px;
    border: none;

    background: rgba(255,255,255,0.06);
    color: #fff;

    text-decoration: none;
    font-size: 14px;

    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover */
.settings-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateX(3px);
}

/* Active / Selected */
.settings-item.active {
    background: rgba(255,255,255,0.25);
}

/* Optional Icon spacing */
.settings-item i {
    margin-right: 8px;
}
    </style>
</head>
<body class="glaseffect light">
    <div class="lockscreenview">
        <!-- Inhalt -->
        <div class="content">
            <div id="time"></div>
            <div id="date"></div>
            <div id="dayshow">Samstag</div>
        </div>

        
    <!-- ButtonSlideContent - messages -->
    <div class="slidecontent-wrapper fixed first-transparent pos-right pos-top with-text" id="messages" style="right:25px; top:25px;">
           
        <!-- Panel -->
        <div class="slidecontent-panel" id="messages-panel">
            <!-- CLOSE BUTTON -->
            <button type="button" class="slidecontent-close" aria-label="Close">
                <i class="bi bi-x"></i>
            </button> 
            <div class="slidecontent-content">
                <h5>Nachrichten</h5>
                Einstellungen für das System            </div>
        </div>

        <!-- Button -->
        <button class="slidecontent-btn" id="messages-toggle">
            <i class="bi bi-envelope ms-2"></i>0        </button>
    </div>

            <script>
        (function initContentSlideMenus() {

            const SELECTOR = '.slidecontent-wrapper';

            function closeAll(except = null) {
                document.querySelectorAll(SELECTOR + '.active').forEach(wrapper => {
                    if (wrapper !== except) {
                        wrapper.classList.remove('active');
                        wrapper.querySelector('.slidecontent-panel')?.classList.remove('active');
                    }
                });
            }

            function setup() {
                document.querySelectorAll(SELECTOR).forEach(wrapper => {

                    // Verhindert doppelte Initialisierung
                    if (wrapper.dataset.initialized) return;
                    wrapper.dataset.initialized = "true";

                    const btn       = wrapper.querySelector('.slidecontent-btn');
                    const panel     = wrapper.querySelector('.slidecontent-panel');
                    const closeBtn  = panel.querySelector('.slidecontent-close');

                    if (!btn || !panel) return;

                    // Button Klick
                    btn.addEventListener('click', function (e) {
                        e.stopPropagation();

                        const isOpen = wrapper.classList.contains('active');

                        closeAll(wrapper);

                        if (!isOpen) {
                            panel.classList.add('active');
                            wrapper.classList.add('active');
                        }
                    });

                    // Schließen über button
                    if (closeBtn) {
                        closeBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            closeAll();
                        });
                    }

                    // Klick im Panel blockieren (nicht content wieder schließen durch click)
                    panel.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                });
            }

            // Global Click (nur aktive checken)
            document.addEventListener('click', function (e) {
                document.querySelectorAll(SELECTOR + '.active').forEach(wrapper => {
                    if (!wrapper.contains(e.target)) {
                        wrapper.classList.remove('active');
                        wrapper.querySelector('.slidecontent-panel')?.classList.remove('active');
                    }
                });
            });

            //  ESC schließen
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeAll();
                }
            });

            // DOM Ready safe
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', setup);
            } else {
                setup();
            }

        })();
        </script>
        
    <!-- ButtonSlideContent - calendaweek -->
    <div class="slidecontent-wrapper fixed first-transparent pos-top with-text" id="calendaweek" style="left:25px; top:25px;">
           
        <!-- Panel -->
        <div class="slidecontent-panel" id="calendaweek-panel">
            <!-- CLOSE BUTTON -->
            <button type="button" class="slidecontent-close" aria-label="Close">
                <i class="bi bi-x"></i>
            </button> 
            <div class="slidecontent-content">
                <h5>Tag 6 der 17. Woche</h5>
                <br><div class="mini-calendar">

    <!-- HEADER bleibt IMMER -->
    <div class="d-flex justify-content-between align-items-center mb-2">

        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-light" onclick="changeMonth(-1)">‹</button>
            <button class="btn btn-outline-light" onclick="changeMonth(1)">›</button>
        </div>

        <div class="fw-semibold text-center">
            <span id="calTitle"></span>
        </div>

        <button class="btn btn-sm btn-primary btn-today" onclick="goToday()">
            Heute
        </button>

    </div>

    <!-- WICHTIG: eigener Container -->
    <div id="miniCalendarGrid"></div>

</div>

<div id="calendarEvents" class="calendar-events">
    <div class="event-placeholder"></div>
</div>            </div>
        </div>

        <!-- Button -->
        <button class="slidecontent-btn" id="calendaweek-toggle">
            <i class="bi bi-calendar4-week me-2"></i>17/6        </button>
    </div>

    
    <!-- ButtonSlideContent - settingsmenu -->
    <div class="slidecontent-wrapper fixed first-transparent with-text" id="settingsmenu" style="left:25px; bottom:25px;">
           
        <!-- Panel -->
        <div class="slidecontent-panel" id="settingsmenu-panel">
            <!-- CLOSE BUTTON -->
            <button type="button" class="slidecontent-close" aria-label="Close">
                <i class="bi bi-x"></i>
            </button> 
            <div class="slidecontent-content">
                <h5>Einstelungen</h5>
                
<div class="accordion" id="settingsAccordion">
    <form method="post">
        <br>
        <!-- THEME -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTheme">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseTheme">
                    <i class="bi bi-palette me-2"></i> Theme
                </button>
            </h2>

            <div id="collapseTheme" class="accordion-collapse collapse"
                data-bs-parent="#settingsAccordion">

                <div class="accordion-body">
                    <div class="settings-list">

                        <button type="submit" name="system_colortheme" value="contrastmode"
                            class="settings-item">
                            <span style="opacity: 0.8;"><i class="bi bi-circle-half"></i><span style="margin-left: 8px;">Kontrast-Modus</span></span>
                        </button>
                        <hr class="diver mt-1 mb-1">

                        <button type="submit" name="system_colortheme" value="auto"
                            class="settings-item active">
                            <span style="font-weight: 600; opacity: 1;"><i class="bi bi-clock"></i><span style="margin-left: 8px;">Automatisch</span> &#10003;</span>
                        </button>

                        <button type="submit" name="system_colortheme" value="light"
                            class="settings-item">
                            <span style="opacity: 0.8;"><i class="bi bi-brightness-high"></i><span style="margin-left: 8px;">Hell</span></span>
                        </button>

                        <button type="submit" name="system_colortheme" value="dark"
                            class="settings-item">
                            <span style="opacity: 0.8;"><i class="bi bi-moon"></i><span style="margin-left: 8px;">Dunkel</span></span>
                        </button>

                    </div>
                </div>
            </div>
        </div>

        <!-- LANGUAGE -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingLang">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseLang">
                    <i class="bi bi-translate me-2"></i> Sprache
                </button>
            </h2>

            <div id="collapseLang" class="accordion-collapse collapse"
                data-bs-parent="#settingsAccordion">

                <div class="accordion-body">
                    <div class="settings-list">
                        <a href="https://www.aw-designz.de/?changelang=de" class="settings-item active">
                            <span style="font-weight: 600; opacity: 1;"><img src=".system/sources/assets/img/ger.png" width="28" /><span style="margin-left: 8px;">Deutsch</span> &#10003;</span>
                        </a>

                        <a href="https://www.aw-designz.de/?changelang=eng" class="settings-item">
                            <span style="opacity: 0.8;"><img src=".system/sources/assets/img/eng.png" width="28" /> <span style="margin-left: 8px;">Englisch</span></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- FONT -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingFont">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseFont">
                    <i class="bi bi-type me-2"></i> Schriftgröße
                </button>
            </h2>

            <div id="collapseFont" class="accordion-collapse collapse"
                data-bs-parent="#settingsAccordion">

                <div class="accordion-body">
                    <div class="settings-list">
                        <button type="submit" name="system_font_surcharge" class="settings-item" value="-2" ><span style="opacity: 0.8;">Größe -4</span></button>
                        <button type="submit" name="system_font_surcharge" class="settings-item" value="-1" ><span style="opacity: 0.8;">Größe -2</span></button>
                        <button type="submit" name="system_font_surcharge" class="settings-item active" value="0" ><span style="font-weight: 600; opacity: 1;">Größe Normal &#10003;</span></button>
                        <button type="submit" name="system_font_surcharge" class="settings-item" value="1" ><span style="opacity: 0.8;">Größe +4</span></button>
                        <button type="submit" name="system_font_surcharge" class="settings-item" value="2" ><span style="opacity: 0.8;">Größe +6</span></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- LANGUAGE -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingLang">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseExtras">
                    <i class="bi bi-magic me-2"></i> Extras
                </button>
            </h2>

            <div id="collapseExtras" class="accordion-collapse collapse"
                data-bs-parent="#settingsAccordion">

                <div class="accordion-body">
                    <div class="settings-list">
                        <a href="?function=changeproject" class="settings-item"><i class="bi bi-building-gear me-2"></i>Projekt wechseln</a>
                        <a href="?function=cmd" class="settings-item"><i class="bi bi-terminal me-2"></i>Kommando-Console</a>
                        <a href="cmsservice" class="settings-item"><i class="bi bi-megaphone me-2"></i>Service-Center</a>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>            </div>
        </div>

        <!-- Button -->
        <button class="slidecontent-btn" id="settingsmenu-toggle">
            <i class="bi bi-gear me-2"></i><div class="textslide">Einstellungen</div>        </button>
    </div>

    
    <!-- ButtonSlideContent - iconmenu -->
    <div class="slidecontent-wrapper fixed first-transparent pos-right with-text" id="iconmenu" style="right:25px; bottom:25px;">
           
        <!-- Panel -->
        <div class="slidecontent-panel" id="iconmenu-panel">
            <!-- CLOSE BUTTON -->
            <button type="button" class="slidecontent-close" aria-label="Close">
                <i class="bi bi-x"></i>
            </button> 
            <div class="slidecontent-content">
                <h5>Icon-Infos</h5>
                Informationen der Zustände            </div>
        </div>

        <!-- Button -->
        <button class="slidecontent-btn" id="iconmenu-toggle">
            <span class="ms-2"><i class="bi bi-wifi me-1 ms-1"></i><i class="bi bi-shield-slash me-1 ms-1"></i><i class="bi bi-house-slash me-1 ms-1"></i></span>        </button>
    </div>

    
        <!-- OVERLAY -->
        <div class="overlaybg light" id="overlay">
            <div class="overlay-content no-overlay">
                <div style="margin-bottom: 80px;"><a href="install" class="installbutton">installieren</a></div>
                <div><button style="padding: 12px 20px;" class="btn btn-light border border-secondary" onclick="closeOverlay()">abbrechen</button></div>            </div>
        </div>

    </div>

<script>
// CLOCK
function updateClock() {
    const now           = new Date();
    const hours         = String(now.getHours()).padStart(2, '0');
    const minutes       = String(now.getMinutes()).padStart(2, '0');
    const day           = String(now.getDate()).padStart(2, '0');
    const month         = String(now.getMonth() + 1).padStart(2, '0');
    const year          = now.getFullYear();

    document.getElementById('date').innerHTML = day + '.' + month + '.' + year;
    document.getElementById('time').innerHTML = hours + ':' + minutes;
}
setInterval(updateClock, 2000);
updateClock();

document.addEventListener('click', function(e){
    console.log('GLOBAL CLICK', e.target);
});

// ZENTRALES CLICK-HANDLING
document.querySelector('.lockscreenview').addEventListener('click', function(e) {

    // Alles innerhalb deiner Komponenten ignorieren
    if (e.target.closest('.slidecontent-wrapper, .no-overlay, .accordion, .accordion-button')) {
        return;
    }

    openOverlay();
});

function openOverlay() {
    document.getElementById('overlay').classList.add('active');
}
function closeOverlay() {
    document.getElementById('overlay').classList.remove('active');
}


// =========================
// STATE
// =========================
let currentDate = new Date();

let calendarEvents = {
    "2026-04-21": ["Meeting", "Call"],
    "2026-04-25": ["Geburtstag"],
};


// =========================
// OPTIONAL: API LADEN
// =========================
async function loadEventsFromAPI() {
    try {
        const res = await fetch('/api/calendar');
        const data = await res.json();
        calendarEvents = data;
    } catch (e) {
        console.warn('API nicht erreichbar, nutze lokale Events');
    }
}


// =========================
// RENDER CALENDAR
// =========================
function renderCalendar(date = new Date()) {

    const container = document.getElementById('miniCalendarGrid');
    if (!container) return;

    const year  = date.getFullYear();
    const month = date.getMonth();

    const firstDay = new Date(year, month, 1).getDay() || 7;
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    const today = new Date();

    // Titel
    const title = document.getElementById('calTitle');
    if (title) {
        title.innerText = date.toLocaleString('de-DE', {
            month: 'long',
            year: 'numeric'
        });
    }

    let html = `<div class="cal-grid">`;

    // Wochentage
    const days = ['Mo','Di','Mi','Do','Fr','Sa','So'];
    days.forEach(d => {
        html += `<div class="cal-day head">${d}</div>`;
    });

    // Leere Felder
    for (let i = 1; i < firstDay; i++) {
        html += `<div class="cal-day empty"></div>`;
    }

    // Tage
    for (let d = 1; d <= daysInMonth; d++) {

        const fullDate = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;

        const isToday =
            d === today.getDate() &&
            month === today.getMonth() &&
            year === today.getFullYear();

        const hasEvent = calendarEvents[fullDate];

        html += `
            <div 
                class="cal-day ${isToday ? 'today' : ''} ${hasEvent ? 'event' : ''}"
                data-date="${fullDate}"
            >
                ${d}
            </div>
        `;
    }

    html += `</div>`;

    container.innerHTML = html;

    attachDayEvents();
    updateTodayButton();
}


// =========================
// DAY CLICK HANDLER
// =========================
function attachDayEvents() {
    document.querySelectorAll('.cal-day').forEach(el => {

        el.addEventListener('click', function () {

            const date = this.dataset.date;

            // active markieren
            document.querySelectorAll('.cal-day').forEach(d => d.classList.remove('selected'));
            this.classList.add('selected');

            openDay(date);
        });
    });
}


// =========================
// EVENTS ANZEIGE
// =========================
function openDay(date) {

    const container = document.getElementById('calendarEvents');
    if (!container) return;

    const events = calendarEvents[date] || [];

    if (events.length === 0) {
        container.innerHTML = `
            <div class="event-empty">
                ${date}<br>
                <small>Keine Termine</small>
            </div>
        `;
        return;
    }

    let html = `<div class="event-date">${date}</div>`;

    events.forEach(ev => {
        html += `<div class="event-item">${ev}</div>`;
    });

    container.innerHTML = html;
}


// =========================
// MONAT WECHSELN
// =========================
function changeMonth(offset) {
    currentDate.setMonth(currentDate.getMonth() + offset);
    renderCalendar(currentDate);
}


// =========================
// HEUTE BUTTON
// =========================
function goToday() {
    currentDate = new Date();
    renderCalendar(currentDate);

    const todayStr = currentDate.toISOString().slice(0,10);
    openDay(todayStr);

    // aktuellen Tag markieren
    setTimeout(() => {
        const el = document.querySelector(`.cal-day[data-date="${todayStr}"]`);
        if (el) el.classList.add('selected');
    }, 50);
}


// =========================
// BUTTON STATE
// =========================
function updateTodayButton() {

    const btn = document.querySelector('.btn-today');

    if (!btn) return;

    const now = new Date();

    const sameMonth =
        currentDate.getMonth() === now.getMonth() &&
        currentDate.getFullYear() === now.getFullYear();

    btn.disabled = sameMonth;
    btn.style.opacity = sameMonth ? '0.5' : '1';
}


// =========================
// INIT
// =========================
document.addEventListener('DOMContentLoaded', async () => {

    await loadEventsFromAPI();

    renderCalendar(currentDate);

});
</script>
</body>
</html>