fix style

WEBROOT/login.php

@@ -0,0 +1,91 @@
+<?php
+// Vor allen includes, vor jeglicher Ausgabe
+session_set_cookie_params([
+    'lifetime' => 0,    // bis Browser geschlossen
+    'path' => '/',      // Gültig für ganze Domain
+    'domain' => '',     // aktuelle Domain
+    'secure' => false,  // true nur für HTTPS
+    'httponly' => true,
+    'samesite' => 'Lax'
+]);
+session_start();
+
+
+$error = null;
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = $_POST['username'] ?? '';
+    $password = $_POST['password'] ?? '';
+
+    // Beispiel: feste Zugangsdaten
+    if ($username === 'admin' && $password === 'secret') {
+        $_SESSION['user_logged_in'] = true;
+        $_SESSION['username'] = $username;
+
+        header("Location: index.php");
+        exit;
+    } else {
+        $error = 'Login fehlgeschlagen';
+    }
+}
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Login</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <body>
+
+        <div class="login-container">
+            <button id="darkModeToggle">🌙 Dark Mode</button>
+
+            <div class="login-box">
+
+                <h2>Login</h2>
+
+                <?php if ($error): ?>
+                <p class="login-error"><?= htmlspecialchars($error) ?></p>
+                <?php endif; ?>
+
+                <form method="post">
+                    <input type="text" name="username" placeholder="Benutzername" required>
+                    <input type="password" name="password" placeholder="Passwort" required>
+                    <button type="submit">Login</button>
+                </form>
+
+            </div>
+        </div>
+
+    </body>
+
+    <script>
+    const toggle = document.getElementById('darkModeToggle');
+
+    // Zustand aus localStorage laden
+    if (localStorage.getItem('darkMode') === 'enabled') {
+        document.body.classList.add('dark-mode');
+    }
+
+    toggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+
+        if (document.body.classList.contains('dark-mode')) {
+            localStorage.setItem('darkMode', 'enabled');
+        } else {
+            localStorage.setItem('darkMode', 'disabled');
+        }
+    });
+    </script>
+
+
+
+</body>
+
+</html>

WEBROOT/logout.php

@@ -0,0 +1,6 @@
+<?php
+session_start();
+session_destroy();
+
+header('Location: login.php');
+exit;

WEBROOT/style.css

@@ -94,4 +94,140 @@ body.dark-mode .content {
 body.dark-mode #darkModeToggle {
     background-color: #333;
     color: white;
+}
+
+.service-group {
+    margin-bottom: 10px;
+}
+
+.group-title {
+    font-weight: bold;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.group-services {
+    margin-left: 10px;
+}
+
+.service-group {
+    margin-bottom: 8px;
+}
+
+.group-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px;
+    font-weight: bold;
+    user-select: none;
+}
+
+.group-title:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.group-services {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    margin-left: 10px;
+}
+
+.service-group.open .group-services {
+    max-height: 500px;
+    /* genug für alle Buttons */
+}
+
+.arrow {
+    transition: transform 0.3s ease;
+}
+
+.service-group.open .arrow {
+    transform: rotate(90deg);
+}
+
+/* ===== Login Page ===== */
+
+.login-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f6f8;
+}
+
+body.dark-mode .login-container {
+    background-color: #121212;
+}
+
+.login-box {
+    background-color: white;
+    padding: 30px 35px;
+    border-radius: 8px;
+    width: 320px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+body.dark-mode .login-box {
+    background-color: #1a1a1a;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+}
+
+.login-box h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.login-box input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 12px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    font-size: 1rem;
+}
+
+body.dark-mode .login-box input {
+    background-color: #333;
+    border: 1px solid #555;
+    color: #f0f0f0;
+}
+
+.login-box button {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.login-box button:hover {
+    background-color: #0056b3;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+
+.login-error {
+    color: #dc3545;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+body.dark-mode .login-box h2 {
+    color: #f0f0f0;
+}
+
+body.dark-mode .login-error {
+    color: #ff6b6b;
 }