design optimizations.

view/contact.php

@@ -139,7 +139,7 @@
                         title="<?= $isEn ? 'Map Center Dialysis Berlin-Mahlsdorf' : 'Karte Zentrumsdialyse Berlin-Mahlsdorf' ?>"></iframe>
             </div>
 
-            <div style="padding: 1rem 1.25rem; background-color: #ffffff; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
+            <div style="padding: 1rem 1.25rem; background-color: var(--bg-card); border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                 <span id="mapAddressText">Thorner Straße 1, 12623 Berlin</span>
                 <a id="mapExternalLink" href="https://www.google.com/maps/place/Dialysezentrum+Berlin-Mahlsdorf/@52.5078291,13.6092903,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84991f9c57f7f:0xad4486f559442067!8m2!3d52.5078291!4d13.6092903!16s%2Fg%2F1tdqghgn" target="_blank" rel="noopener noreferrer" style="font-weight: 600;">
                     <?= $isEn ? 'Large Route Map' : 'Große Routenkarte' ?> <span aria-hidden="true">&raquo;</span>

view/first-appointment.php

@@ -100,7 +100,7 @@ $pdfPrivat = '/files/' . rawurlencode('Behandlunsvertrag Privatpatienten.pdf');
         </div>
 
         <!-- Wichtiger Hinweis zu Originalbefunden -->
-        <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 1rem 1.15rem;">
+        <div class="info-callout-box" style="border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 1rem 1.15rem;">
             <div style="font-weight: 700; color: var(--primary-dark); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.4rem;">
                 <svg aria-hidden="true" focusable="false" style="width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                 <?= $isEn ? 'Important Note on Original Reports:' : 'Wichtiger Hinweis zu Ihren Originalbefunden:' ?>
@@ -131,7 +131,7 @@ $pdfPrivat = '/files/' . rawurlencode('Behandlunsvertrag Privatpatienten.pdf');
 
     <div class="grid-2" style="margin-bottom: 0;">
         <!-- 1. Anamnesebogen -->
-        <div class="card" id="form-anamnese" style="display: flex; flex-direction: column; justify-content: space-between; background: #ffffff;">
+        <div class="card" id="form-anamnese" style="display: flex; flex-direction: column; justify-content: space-between; background: var(--bg-card);">
             <div>
                 <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem;">
                     <h3 style="font-size: 1.1rem; color: var(--primary-dark); margin: 0;">
@@ -160,7 +160,7 @@ $pdfPrivat = '/files/' . rawurlencode('Behandlunsvertrag Privatpatienten.pdf');
         </div>
 
         <!-- 2. Datenschutz & Schweigepflichtentbindung -->
-        <div class="card" id="form-datenschutz" style="display: flex; flex-direction: column; justify-content: space-between; background: #ffffff;">
+        <div class="card" id="form-datenschutz" style="display: flex; flex-direction: column; justify-content: space-between; background: var(--bg-card);">
             <div>
                 <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem;">
                     <h3 style="font-size: 1.1rem; color: var(--primary-dark); margin: 0;">
@@ -189,7 +189,7 @@ $pdfPrivat = '/files/' . rawurlencode('Behandlunsvertrag Privatpatienten.pdf');
         </div>
 
         <!-- 3. Einverständniserklärung zur Ausfallhonorarregelung -->
-        <div class="card" id="form-ausfallhonorar" style="display: flex; flex-direction: column; justify-content: space-between; background: #ffffff;">
+        <div class="card" id="form-ausfallhonorar" style="display: flex; flex-direction: column; justify-content: space-between; background: var(--bg-card);">
             <div>
                 <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem;">
                     <h3 style="font-size: 1.1rem; color: var(--primary-dark); margin: 0;">
@@ -218,13 +218,13 @@ $pdfPrivat = '/files/' . rawurlencode('Behandlunsvertrag Privatpatienten.pdf');
         </div>
 
         <!-- 4. Behandlungsvertrag Privatpatienten / Selbstzahler -->
-        <div class="card" id="form-privat" style="display: flex; flex-direction: column; justify-content: space-between; background: #ffffff;">
+        <div class="card" id="form-privat" style="display: flex; flex-direction: column; justify-content: space-between; background: var(--bg-card);">
             <div>
                 <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem;">
                     <h3 style="font-size: 1.1rem; color: var(--primary-dark); margin: 0;">
                         <?= $isEn ? '4. Treatment Contract (Private Patients &amp; Self-Payers)' : '4. Behandlungsvertrag (Privatpatienten &amp; Selbstzahler)' ?>
                     </h3>
-                    <span style="background: #f1f5f9; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); white-space: nowrap;">
+                    <span style="background: var(--bg-alt); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); white-space: nowrap;">
                         <?= $isEn ? 'If Applicable' : 'Bei Bedarf' ?>
                     </span>
                 </div>

view/frontend.php

@@ -226,6 +226,17 @@ if ($canonicalUrl && $currentAction !== 'main') {
     <link rel="icon" href="/img/favicon.png?v=<?=filemtime(__DIR__ . '/../img/favicon.png')?>" type="image/png">
     <link rel="apple-touch-icon" href="/img/apple-touch-icon.png?v=<?=filemtime(__DIR__ . '/../img/apple-touch-icon.png')?>">
     
+    <!-- Theme Initialization (prevents FOUC) -->
+    <script type="text/javascript">
+        (function() {
+            try {
+                if (localStorage.getItem('theme') === 'dark') {
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                }
+            } catch (e) {}
+        })();
+    </script>
+
     <!-- Modern Stylesheets -->
     <link href="/css/frontend.css?v=<?=filemtime(__DIR__ . '/../css/frontend.css')?>" rel="stylesheet" media="screen">
     <link href="/css/lightbox.min.css" rel="stylesheet" media="screen">
@@ -276,7 +287,11 @@ if ($canonicalUrl && $currentAction !== 'main') {
                 <img src="/img/logo_dialysezentrum.png?v=<?=filemtime(__DIR__ . '/../img/logo_dialysezentrum.png')?>" 
                      alt="<?=$isEn ? 'Dialysis Center Berlin-Mahlsdorf – Center for Nephrology & Dialysis' : 'Dialysezentrum Berlin-Mahlsdorf – Zentrum für Nephrologie & Dialyse'?>" 
                      width="915" height="199"
-                     class="site-logo-img">
+                     class="site-logo-img site-logo-light">
+                <img src="/img/logo_dialysezentrum_dark.png?v=<?=filemtime(__DIR__ . '/../img/logo_dialysezentrum_dark.png')?>" 
+                     alt="<?=$isEn ? 'Dialysis Center Berlin-Mahlsdorf – Center for Nephrology & Dialysis' : 'Dialysezentrum Berlin-Mahlsdorf – Zentrum für Nephrologie & Dialyse'?>" 
+                     width="915" height="199"
+                     class="site-logo-img site-logo-dark">
             </a>
 
             <!-- Navigation Menu -->
@@ -435,10 +450,15 @@ if ($canonicalUrl && $currentAction !== 'main') {
             <div>
                 &copy; <?=date('Y')?> <?=$isEn ? 'Dialysis Center Berlin-Mahlsdorf &bull; All rights reserved.' : 'Dialysezentrum Berlin-Mahlsdorf &bull; Alle Rechte vorbehalten.'?>
             </div>
-            <div>
+            <div class="footer-bottom-links">
                 <a href="<?=Helper::url('/impressum.html')?>"><?=$isEn ? 'Legal Notice' : 'Impressum'?></a>
                 <a href="<?=Helper::url('/datenschutz.html')?>"><?=$isEn ? 'Privacy Policy' : 'Datenschutz'?></a>
                 <a href="<?=Helper::url('/kontakt.html')?>"><?=$isEn ? 'Contact' : 'Kontakt'?></a>
+                <button type="button" id="themeToggle" class="theme-toggle-btn" aria-pressed="false" title="<?=$isEn ? 'Toggle color scheme (Dark / Light)' : 'Farbschema umschalten (Dunkel / Hell)'?>">
+                    <svg class="theme-icon-moon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
+                    <svg class="theme-icon-sun" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
+                    <span id="themeToggleLabel"><?=$isEn ? 'Dark Mode' : 'Dunkelmodus'?></span>
+                </button>
             </div>
         </div>
     </footer>
@@ -452,6 +472,28 @@ if ($canonicalUrl && $currentAction !== 'main') {
         var labelOpen = isEn ? 'Open menu' : 'Menü öffnen';
         var labelClose = isEn ? 'Close menu' : 'Menü schließen';
 
+        // Unobtrusive Footer Dark Mode Toggle
+        var $themeToggle = $('#themeToggle');
+        var $themeLabel = $('#themeToggleLabel');
+        function syncThemeButton() {
+            var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+            $themeToggle.attr('aria-pressed', isDark ? 'true' : 'false');
+            $themeLabel.text(isDark ? (isEn ? 'Light Mode' : 'Hellmodus') : (isEn ? 'Dark Mode' : 'Dunkelmodus'));
+        }
+        syncThemeButton();
+
+        $themeToggle.on('click', function() {
+            var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+            if (isDark) {
+                document.documentElement.removeAttribute('data-theme');
+                try { localStorage.setItem('theme', 'light'); } catch (e) {}
+            } else {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                try { localStorage.setItem('theme', 'dark'); } catch (e) {}
+            }
+            syncThemeButton();
+        });
+
         // Anti-Spam Email De-Obfuscation
         $('.mail-obf').each(function() {
             var $el = $(this);

view/team.php

@@ -65,7 +65,7 @@ $isEn = (isset($lang) && $lang === 'en') || Helper::getLang() === 'en';
 </div>
 
 <!-- Mitarbeiter & Pflegekräfte Card -->
-<div class="card" style="background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%); border-left: 4px solid var(--accent); padding: clamp(1.25rem, 3vw, 2rem);">
+<div class="card team-staff-card" style="border-left: 4px solid var(--accent); padding: clamp(1.25rem, 3vw, 2rem);">
     <div style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
         <div aria-hidden="true" style="width: 60px; height: 60px; border-radius: var(--radius-full); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);">
             <svg aria-hidden="true" focusable="false" style="width: 32px; height: 32px; fill: currentColor;" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>