Website/templates/base.html aktualisiert

Ursachen des iOS-Darstellungsfehlers
1. Webkit-Marker bei ⁠<summary>⁠ / ⁠<details>⁠: iOS Safari erzwingt standardmäßig ein eigenes Pfeil-Icon bei ⁠<summary>⁠, das zusätzlich zum eigenen Pfeil (⁠::after⁠) gerendert wird oder das Layout verschiebt.
2. Fehlende Höhenbegrenzung & Touch-Scrolling: Das aufgeklappte Mobilmenü (⁠.nav-links⁠) hat auf iPhones mit vielen Links (z. B. Admin-Links) das Fenster nach unten verlassen, ohne scrollbar zu sein.
3. Safari Viewport-Problem (⁠100vh⁠): Durch die dynamische Safari-Adressleiste wurde der untere Teil des Menüs abgeschnitten.
4. Fehlende Safe-Area-Insets: Keine Berücksichtigung der Dynamic Island / Notch am oberen Bildschirmrand.

Signed-off-by: Aiirondev <maximilian.gruendinger@invario-software.de>

Website/templates/base.html

@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="de">
 <head>
@@ -54,10 +53,11 @@
         }
         * { box-sizing: border-box; }
 
-        /* Verhinderung von iOS Auto-Zoom bei Inputs */
-        input, textarea, select, button {
+        /* Verhinderung von iOS Auto-Zoom bei Inputs & iOS Tap-Highlights */
+        input, textarea, select, button, a, summary {
             font-family: Arial, Helvetica, sans-serif;
             font-size: 16px;
+            -webkit-tap-highlight-color: transparent;
         }
 
         html,
@@ -77,6 +77,7 @@
 
         body {
             min-height: 100vh;
+            min-height: 100dvh;
             display: flex;
             flex-direction: column;
         }
@@ -119,8 +120,10 @@
             top: 0;
             z-index: 30;
             backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
             background: rgba(245, 242, 234, 0.9);
             border-bottom: 1px solid var(--line);
+            padding-top: env(safe-area-inset-top);
         }
 
         .site-nav-inner {
@@ -132,7 +135,6 @@
             gap: 1rem;
         }
 
-
         .brand {
             display: inline-flex;
             align-items: center;
@@ -215,6 +217,8 @@
             color: #1b4b52;
             background: #ffffff;
             transition: transform 0.15s ease, box-shadow 0.15s ease;
+            -webkit-appearance: none;
+            appearance: none;
         }
 
         .nav-btn:hover {
@@ -228,17 +232,27 @@
             background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
         }
 
+        /* --- Details/Summary Fixes für iOS Safari --- */
         .nav-dropdown {
             position: relative;
         }
 
         .nav-dropdown > summary {
             list-style: none;
+            list-style-type: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: space-between;
             cursor: pointer;
+            -webkit-appearance: none;
+            appearance: none;
         }
 
-        .nav-dropdown > summary::-webkit-details-marker {
-            display: none;
+        .nav-dropdown > summary::-webkit-details-marker,
+        .nav-dropdown > summary::marker {
+            display: none !important;
+            width: 0;
+            height: 0;
         }
 
         .nav-dropdown > summary::after {
@@ -246,6 +260,7 @@
             margin-left: 0.45rem;
             font-size: 0.72rem;
             color: #5f747a;
+            display: inline-block;
         }
 
         .nav-dropdown[open] > summary::after {
@@ -305,7 +320,7 @@
         .cookie-banner {
             position: fixed;
             left: 50%;
-            bottom: 1rem;
+            bottom: max(1rem, env(safe-area-inset-bottom));
             transform: translateX(-50%);
             width: min(900px, calc(100% - 1.5rem));
             border: 1px solid #c6d0c7;
@@ -371,6 +386,7 @@
             }
         }
 
+        /* --- Mobile Navigation Optimierungen für iOS / Safari --- */
         @media (max-width: 820px) {
             .site-nav-inner {
                 min-height: 64px;
@@ -390,12 +406,17 @@
                 transform: translateX(-50%) translateY(-10px);
                 width: min(100%, calc(100% - 1.5rem));
                 max-width: 520px;
+                /* Höhensicherung & Scrollbar für iPhones */
+                max-height: calc(80vh - 80px);
+                max-height: calc(80dvh - 80px);
+                overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
                 background: rgba(255, 255, 255, 0.98);
                 border: 1px solid #d8dfdb;
                 border-radius: 20px;
                 padding: 0.9rem;
                 display: grid;
-                gap: 0.6rem;
+                gap: 0.5rem;
                 z-index: 25;
                 opacity: 0;
                 visibility: hidden;
@@ -414,8 +435,8 @@
             .nav-links a {
                 display: block;
                 width: 100%;
-                padding: 1rem 1rem;
-                border-radius: 16px;
+                padding: 0.85rem 1rem;
+                border-radius: 14px;
                 background: #f7f5f0;
                 color: var(--text-main);
                 font-weight: 700;
@@ -433,7 +454,7 @@
 
             .nav-links .nav-user-link {
                 padding-left: 1rem;
-                border-left: 3px solid rgba(28, 90, 99, 0.18);
+                border-left: 3px solid rgba(28, 90, 99, 0.25);
                 background: #f1f6f4;
             }
 
@@ -477,8 +498,9 @@
             }
 
             .nav-links {
-                top: calc(100% + 0.6rem);
-                padding: 0.9rem;
+                top: calc(100% + 0.4rem);
+                padding: 0.75rem;
+                max-height: calc(75dvh - 60px);
             }
 
             .nav-actions {
@@ -943,4 +965,4 @@
         })();
     </script>
 </body>
-</html>
+</html>