new

Dockerfile

@@ -1,3 +1,4 @@
 FROM nginx:alpine
 COPY index.html /usr/share/nginx/html/index.html
 COPY logo.png     /usr/share/nginx/html/logo.png
+COPY favicon.svg  /usr/share/nginx/html/favicon.svg

favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Red circle background -->
+  <circle cx="32" cy="32" r="32" fill="#C8102E"/>
+  <!-- White medical cross -->
+  <rect x="24" y="12" width="16" height="40" rx="4" fill="#ffffff"/>
+  <rect x="12" y="24" width="40" height="16" rx="4" fill="#ffffff"/>
+</svg>

index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="Dr. med. Carina Kautsch – Ärztin für Allgemeinmedizin in 1160 Wien. Öffnungszeiten, Leistungen und Kontakt." />
   <title>Dr. Carina Kautsch – Allgemeinmedizin Wien</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
@@ -414,6 +415,50 @@
     footer a { color: #ccc; }
     footer a:hover { color: #fff; }
 
+    /* ─── Font Size Toggle ──────────────────────────────────── */
+    .font-toggle-wrap {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+    .font-toggle-wrap button {
+      background: none;
+      border: 2px solid #ddd;
+      border-radius: 7px;
+      cursor: pointer;
+      font-family: 'DM Sans', sans-serif;
+      font-weight: 700;
+      color: #666;
+      line-height: 1;
+      transition: all .2s;
+      padding: 5px 9px;
+    }
+    .font-toggle-wrap button.active {
+      border-color: var(--red);
+      color: var(--red);
+      background: #fff0f2;
+    }
+    .font-toggle-wrap button:first-child { font-size: 14px; }
+    .font-toggle-wrap button:last-child  { font-size: 18px; }
+
+    /* Large font overrides */
+    body.large-font { font-size: 22px; }
+    body.large-font .nav-links a      { font-size: 17px; }
+    body.large-font .nav-phone        { font-size: 17px; }
+    body.large-font .section-title    { font-size: clamp(2.2rem, 4vw, 3.2rem); }
+    body.large-font .hero-text h1     { font-size: clamp(2.8rem, 5vw, 4rem); }
+    body.large-font .hero-text p      { font-size: 20px; }
+    body.large-font .leistung-title   { font-size: 19px; }
+    body.large-font .leistung-desc    { font-size: 17px; }
+    body.large-font .aktuell-title    { font-size: 19px; }
+    body.large-font .aktuell-body     { font-size: 17px; }
+    body.large-font .hour-day         { font-size: 18px; }
+    body.large-font .hour-time        { font-size: 17px; }
+    body.large-font .kontakt-value    { font-size: 19px; }
+    body.large-font .hero-card-value  { font-size: 17px; }
+    body.large-font .closure-deputy-detail { font-size: 17px; }
+
     /* ─── Responsive ────────────────────────────────────────── */
     @media (max-width: 900px) {
       .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
@@ -475,6 +520,10 @@ const SCHLIESSZEITEN = [
       <li><a href="#aktuelles">Aktuelles</a></li>
       <li><a href="#kontakt">Kontakt</a></li>
     </ul>
+    <div class="font-toggle-wrap" aria-label="Schriftgröße">
+      <button id="font-normal" title="Normale Schriftgröße">A</button>
+      <button id="font-large"  title="Große Schriftgröße">A+</button>
+    </div>
     <a class="nav-phone" href="tel:+4314931773">
       📞 +43 1 493 17 73
     </a>
@@ -488,6 +537,10 @@ const SCHLIESSZEITEN = [
     <a href="#aktuelles">Aktuelles</a>
     <a href="#kontakt">Kontakt</a>
     <a class="nav-phone" href="tel:+4314931773">📞 +43 1 493 17 73</a>
+    <div class="font-toggle-wrap" style="justify-content:center;">
+      <button id="font-normal-mobile" title="Normale Schriftgröße">A</button>
+      <button id="font-large-mobile"  title="Große Schriftgröße">A+</button>
+    </div>
   </div>
 </header>
 
@@ -776,6 +829,32 @@ const SCHLIESSZEITEN = [
     container.innerHTML = `<div class="closure-cards">${cards}</div>`;
   }
   renderClosures();
+
+  // Font size toggle
+  (function() {
+    const body    = document.body;
+    const btnNorm = document.getElementById('font-normal');
+    const btnLrg  = document.getElementById('font-large');
+    const btnNormM = document.getElementById('font-normal-mobile');
+    const btnLrgM  = document.getElementById('font-large-mobile');
+
+    function setSize(large) {
+      body.classList.toggle('large-font', large);
+      btnNorm.classList.toggle('active', !large);
+      btnLrg.classList.toggle('active',  large);
+      btnNormM.classList.toggle('active', !large);
+      btnLrgM.classList.toggle('active',  large);
+      localStorage.setItem('fontSize', large ? 'large' : 'normal');
+    }
+
+    // Apply saved preference
+    setSize(localStorage.getItem('fontSize') === 'large');
+
+    btnNorm.addEventListener('click',  () => setSize(false));
+    btnLrg.addEventListener('click',   () => setSize(true));
+    btnNormM.addEventListener('click', () => setSize(false));
+    btnLrgM.addEventListener('click',  () => setSize(true));
+  })();
 </script>
 
 </body>