diff --git a/src/app/globals.css b/src/app/globals.css
index cd1910b..b9e72b9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,7 +12,7 @@
   --color-bg: #f8fafc;
   --color-bg-card: #ffffff;
   --color-text: #1e293b;
-  --color-text-muted: #64748b;
+  --color-text-muted: #475569;
   --color-border: #e2e8f0;
 }
 
@@ -75,9 +75,9 @@ body {
 
 /* ── Calendar day styles ── */
 .cal-day {
-  @apply w-11 h-11 rounded-xl flex items-center justify-center text-sm cursor-pointer transition-all;
-  min-width: 44px;
-  min-height: 44px;
+  @apply w-12 h-12 rounded-xl flex items-center justify-center text-sm cursor-pointer transition-all;
+  min-width: 48px;
+  min-height: 48px;
 }
 .cal-day:hover:not(.cal-disabled):not(.cal-full) {
   @apply bg-accent/15 text-accent;
@@ -115,3 +115,27 @@ input:focus, select:focus, textarea:focus {
   z-index: 10;
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
+
+/* ── Placeholder contrast ── */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .animate-checkmark-circle,
+  .animate-checkmark-draw,
+  .animate-slide-up,
+  .animate-fade-in {
+    animation: none !important;
+    opacity: 1;
+  }
+  .skeleton {
+    animation: none !important;
+  }
+  .cal-day:active:not(.cal-disabled):not(.cal-full) {
+    transform: none !important;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 12f2fe1..a7822c4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -14,6 +14,12 @@ export default function RootLayout({
   return (
     <html lang="de">
       <body className="antialiased min-h-screen">
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-primary focus:text-white focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-medium"
+        >
+          Zum Hauptinhalt springen
+        </a>
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 65df66f..2712b92 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,7 +24,7 @@ export default function Home() {
         </div>
       </div>
 
-      <main className="flex-1 max-w-lg mx-auto px-4 w-full -mt-4">
+      <main id="main-content" className="flex-1 max-w-lg mx-auto px-4 w-full -mt-4">
         {/* Seasonal Banner */}
         {isSaison && (
           <div className="bg-accent/10 border border-accent/20 rounded-2xl px-4 py-3 mb-5 text-center">
@@ -56,7 +56,7 @@ export default function Home() {
                 Wunschtermin wählen, in 2 Min. erledigt
               </p>
             </div>
-            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
             </svg>
           </Link>
@@ -76,7 +76,7 @@ export default function Home() {
                 QR-Code scannen, Zählerstand eingeben
               </p>
             </div>
-            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-5 h-5 text-text-muted/40 group-hover:text-accent group-hover:translate-x-0.5 transition-all shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
             </svg>
           </Link>
diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx
index 2edb22b..4030ef9 100644
--- a/src/app/pool/page.tsx
+++ b/src/app/pool/page.tsx
@@ -192,7 +192,7 @@ export default function PoolBuchungPage() {
       />
       <Header back={{ href: '/', label: 'Zurück' }} />
 
-      <main className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
+      <main id="main-content" className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
         {/* Progress Bar */}
         <div className="mb-6 px-2">
           <ProgressBar steps={steps} />
@@ -247,8 +247,8 @@ export default function PoolBuchungPage() {
               {/* Wassermenge bei Ortswasserleitung */}
               {wasserquelle === 'ortswasserleitung' && (
                 <div className="animate-fade-in">
-                  <label htmlFor="wassermenge_m3" className="block text-sm font-medium mb-1.5">
-                    Geschätzte Wassermenge (m³) <span className="text-danger">*</span>
+                  <label htmlFor="wassermenge_m3" className="block text-sm font-medium mb-2">
+                    Geschätzte Wassermenge (m³) <span className="text-danger" aria-label="erforderlich">*</span>
                   </label>
                   <input
                     id="wassermenge_m3"
@@ -258,18 +258,21 @@ export default function PoolBuchungPage() {
                     onChange={(e) => { setWassermenge(e.target.value); setError(''); }}
                     min="5"
                     step="0.5"
-                    className="w-full border border-border rounded-xl px-4 py-3 text-base max-w-[200px]"
+                    required
+                    aria-required="true"
+                    aria-describedby="wassermenge_help"
+                    className="w-full border border-border rounded-xl px-4 py-3.5 text-base max-w-[200px]"
                     placeholder="z.B. 25"
                   />
-                  <p className="text-xs text-text-muted mt-1.5">
-                    Die Kapazität ist pro Tag begrenzt. Anhand Ihrer Menge wird die Verfügbarkeit berechnet.
+                  <p id="wassermenge_help" className="text-xs text-text-muted mt-1.5">
+                    1 m³ = 1.000 Liter. Die Kapazität ist pro Tag begrenzt.
                   </p>
                 </div>
               )}
             </div>
 
             {error && (
-              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
+              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm" role="alert" aria-live="polite">
                 {error}
               </div>
             )}
@@ -329,7 +332,7 @@ export default function PoolBuchungPage() {
             )}
 
             {error && (
-              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
+              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm" role="alert" aria-live="polite">
                 {error}
               </div>
             )}
@@ -398,8 +401,8 @@ export default function PoolBuchungPage() {
             <div className="space-y-4">
               {/* Name */}
               <div>
-                <label htmlFor="name" className="block text-sm font-medium mb-1.5">
-                  Name <span className="text-danger">*</span>
+                <label htmlFor="name" className="block text-sm font-medium mb-2">
+                  Name <span className="text-danger" aria-label="erforderlich">*</span>
                 </label>
                 <input
                   id="name"
@@ -410,15 +413,17 @@ export default function PoolBuchungPage() {
                   onBlur={handleBlur}
                   autoComplete="name"
                   required
-                  className={`w-full border rounded-xl px-4 py-3 text-base transition-colors ${fieldErrors.name ? 'border-danger' : 'border-border'}`}
+                  aria-required="true"
+                  aria-describedby={fieldErrors.name ? 'name-error' : undefined}
+                  className={`w-full border rounded-xl px-4 py-3.5 text-base transition-colors ${fieldErrors.name ? 'border-danger bg-danger/5' : 'border-border'}`}
                   placeholder="Max Mustermann"
                 />
-                {fieldErrors.name && <p className="text-danger text-xs mt-1">{fieldErrors.name}</p>}
+                {fieldErrors.name && <p id="name-error" className="text-danger text-sm mt-1.5" role="alert">{fieldErrors.name}</p>}
               </div>
 
               {/* Adresse */}
               <div>
-                <label htmlFor="strasse" className="block text-sm font-medium mb-1.5">
+                <label htmlFor="strasse" className="block text-sm font-medium mb-2">
                   Straße & Hausnummer
                 </label>
                 <input
@@ -428,15 +433,15 @@ export default function PoolBuchungPage() {
                   value={formData.strasse}
                   onChange={handleChange}
                   autoComplete="street-address"
-                  className="w-full border border-border rounded-xl px-4 py-3 text-base"
+                  className="w-full border border-border rounded-xl px-4 py-3.5 text-base"
                   placeholder="Hauptstraße 12"
                 />
               </div>
 
               {/* Telefon */}
               <div>
-                <label htmlFor="telefon" className="block text-sm font-medium mb-1.5">
-                  Telefon <span className="text-danger">*</span>
+                <label htmlFor="telefon" className="block text-sm font-medium mb-2">
+                  Telefon <span className="text-danger" aria-label="erforderlich">*</span>
                 </label>
                 <input
                   id="telefon"
@@ -448,16 +453,18 @@ export default function PoolBuchungPage() {
                   onBlur={handleBlur}
                   autoComplete="tel"
                   required
-                  className={`w-full border rounded-xl px-4 py-3 text-base transition-colors ${fieldErrors.telefon ? 'border-danger' : 'border-border'}`}
+                  aria-required="true"
+                  aria-describedby={fieldErrors.telefon ? 'telefon-error' : undefined}
+                  className={`w-full border rounded-xl px-4 py-3.5 text-base transition-colors ${fieldErrors.telefon ? 'border-danger bg-danger/5' : 'border-border'}`}
                   placeholder="+43 664 1234567"
                 />
-                {fieldErrors.telefon && <p className="text-danger text-xs mt-1">{fieldErrors.telefon}</p>}
+                {fieldErrors.telefon && <p id="telefon-error" className="text-danger text-sm mt-1.5" role="alert">{fieldErrors.telefon}</p>}
               </div>
 
               {/* Email */}
               <div>
-                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
-                  E-Mail <span className="text-danger">*</span>
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  E-Mail <span className="text-danger" aria-label="erforderlich">*</span>
                 </label>
                 <input
                   id="email"
@@ -469,10 +476,12 @@ export default function PoolBuchungPage() {
                   onBlur={handleBlur}
                   autoComplete="email"
                   required
-                  className={`w-full border rounded-xl px-4 py-3 text-base transition-colors ${fieldErrors.email ? 'border-danger' : 'border-border'}`}
+                  aria-required="true"
+                  aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+                  className={`w-full border rounded-xl px-4 py-3.5 text-base transition-colors ${fieldErrors.email ? 'border-danger bg-danger/5' : 'border-border'}`}
                   placeholder="max@beispiel.at"
                 />
-                {fieldErrors.email && <p className="text-danger text-xs mt-1">{fieldErrors.email}</p>}
+                {fieldErrors.email && <p id="email-error" className="text-danger text-sm mt-1.5" role="alert">{fieldErrors.email}</p>}
               </div>
 
               {/* Erinnerung */}
@@ -481,22 +490,25 @@ export default function PoolBuchungPage() {
                   type="checkbox"
                   checked={erinnerung}
                   onChange={(e) => setErinnerung(e.target.checked)}
-                  className="mt-0.5 w-5 h-5 rounded border-border text-accent accent-accent flex-shrink-0"
+                  className="mt-0.5 w-6 h-6 rounded border-2 border-border text-accent accent-accent flex-shrink-0 focus:ring-2 focus:ring-accent focus:ring-offset-2"
                 />
-                <span className="text-sm text-text-muted leading-snug">
+                <span className="text-sm leading-snug">
                   Ich möchte nächstes Jahr per E-Mail an die Pool-Befüllung erinnert werden.
                 </span>
               </label>
 
               {/* CAPTCHA */}
-              <div className="flex justify-center pt-2">
-                <div ref={turnstileContainerRef} />
+              <div className="pt-2">
+                <p className="text-sm text-text-muted mb-3 text-center">Sicherheitsüberprüfung</p>
+                <div className="flex justify-center">
+                  <div ref={turnstileContainerRef} />
+                </div>
               </div>
             </div>
 
             {/* Error */}
             {error && (
-              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
+              <div className="mt-4 p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm" role="alert" aria-live="polite">
                 {error}
               </div>
             )}
diff --git a/src/app/storno/page.tsx b/src/app/storno/page.tsx
index 169efdf..1542dd7 100644
--- a/src/app/storno/page.tsx
+++ b/src/app/storno/page.tsx
@@ -117,9 +117,10 @@ function StornoContent() {
   // Loading
   if (loading) {
     return (
-      <div className="min-h-screen flex flex-col bg-bg">
+      <div className="min-h-screen flex flex-col bg-bg" role="status" aria-label="Seite wird geladen">
         <Header back={{ href: '/', label: 'Zurück' }} />
         <main className="flex-1 max-w-lg mx-auto px-4 py-6 w-full">
+          <p className="text-text-muted text-sm text-center mb-4">Daten werden geladen...</p>
           <div className="space-y-4 animate-fade-in">
             <div className="skeleton h-8 w-48" />
             <div className="skeleton h-4 w-64" />
@@ -139,14 +140,17 @@ function StornoContent() {
         <main className="flex-1 flex items-center justify-center px-4">
           <div className="bg-white rounded-2xl border border-border p-8 max-w-sm w-full text-center animate-slide-up">
             <div className="w-16 h-16 bg-danger/10 rounded-full flex items-center justify-center mx-auto mb-4">
-              <svg className="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
             <h3 className="text-lg font-bold mb-2">Ungültiger Link</h3>
-            <p className="text-text-muted text-sm">
-              Dieser Storno-Link ist ungültig oder abgelaufen. Bitte kontaktieren Sie das Gemeindeamt.
+            <p className="text-text-muted text-sm mb-3">
+              Dieser Storno-Link ist ungültig oder abgelaufen.
             </p>
+            <a href="tel:+4372435060" className="text-sm text-accent hover:underline font-medium">
+              Gemeindeamt anrufen: +43 7243 50600
+            </a>
           </div>
         </main>
         <Footer />
@@ -190,7 +194,7 @@ function StornoContent() {
   return (
     <div className="min-h-screen flex flex-col bg-bg">
       <Header back={{ href: '/', label: 'Zurück' }} />
-      <main className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
+      <main id="main-content" className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
         <div className="mb-5">
           <h2 className="text-xl font-bold text-primary">Buchung stornieren</h2>
           <p className="text-text-muted text-sm mt-1">
@@ -225,7 +229,7 @@ function StornoContent() {
         </div>
 
         {error && (
-          <div className="p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm mb-5">
+          <div className="p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm mb-5" role="alert" aria-live="polite">
             {error}
           </div>
         )}
diff --git a/src/app/wasserzaehler/page.tsx b/src/app/wasserzaehler/page.tsx
index 18edd82..6449e1e 100644
--- a/src/app/wasserzaehler/page.tsx
+++ b/src/app/wasserzaehler/page.tsx
@@ -111,9 +111,10 @@ function WasserzaehlerContent() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex flex-col bg-bg">
+      <div className="min-h-screen flex flex-col bg-bg" role="status" aria-label="Seite wird geladen">
         <Header back={{ href: '/', label: 'Zurück' }} />
         <main className="flex-1 max-w-lg mx-auto px-4 py-6 w-full">
+          <p className="text-text-muted text-sm text-center mb-4">Daten werden geladen...</p>
           <div className="space-y-4 animate-fade-in">
             <div className="skeleton h-8 w-48" />
             <div className="skeleton h-4 w-64" />
@@ -133,16 +134,19 @@ function WasserzaehlerContent() {
         <main className="flex-1 flex items-center justify-center px-4">
           <div className="bg-white rounded-2xl border border-border p-8 max-w-sm w-full text-center animate-slide-up">
             <div className="w-16 h-16 bg-danger/10 rounded-full flex items-center justify-center mx-auto mb-4">
-              <svg className="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
             <h3 className="text-lg font-bold mb-2">Ungültiger Zugang</h3>
-            <p className="text-text-muted text-sm">
+            <p className="text-text-muted text-sm mb-3">
               {!token
                 ? 'Bitte nutzen Sie den QR-Code auf Ihrem Ableseblatt um diese Seite aufzurufen.'
-                : 'Der verwendete Link ist ungültig oder abgelaufen. Bitte kontaktieren Sie das Gemeindeamt.'}
+                : 'Der verwendete Link ist ungültig oder abgelaufen.'}
             </p>
+            <a href="tel:+4372435060" className="text-sm text-accent hover:underline font-medium">
+              Gemeindeamt anrufen: +43 7243 50600
+            </a>
           </div>
         </main>
         <Footer />
@@ -153,7 +157,7 @@ function WasserzaehlerContent() {
   return (
     <div className="min-h-screen flex flex-col bg-bg">
       <Header back={{ href: '/', label: 'Zurück' }} />
-      <main className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
+      <main id="main-content" className="flex-1 max-w-lg mx-auto px-4 py-5 w-full">
         <div className="mb-5">
           <h2 className="text-xl font-bold text-primary">
             Wasserzähler-Ablesung
@@ -221,7 +225,7 @@ function WasserzaehlerContent() {
 
           {/* Error */}
           {error && (
-            <div className="p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
+            <div className="p-3 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm" role="alert" aria-live="polite">
               {error}
             </div>
           )}
diff --git a/src/components/BookingCalendar.tsx b/src/components/BookingCalendar.tsx
index 7fb30a2..8e4279f 100644
--- a/src/components/BookingCalendar.tsx
+++ b/src/components/BookingCalendar.tsx
@@ -162,9 +162,9 @@ export default function BookingCalendar({ onDateSelect, selectedDate, requestedM
         </div>
 
         {/* Weekday headers */}
-        <div className="grid grid-cols-7 gap-1 mb-1">
+        <div className="grid grid-cols-7 gap-2 mb-2">
           {WEEKDAYS.map((d) => (
-            <div key={d} className="text-center text-[11px] font-semibold text-text-muted/60 py-1 uppercase">
+            <div key={d} className="text-center text-xs font-bold text-text-muted/60 py-1 uppercase">
               {d}
             </div>
           ))}
@@ -172,15 +172,15 @@ export default function BookingCalendar({ onDateSelect, selectedDate, requestedM
 
         {/* Days grid */}
         {loading ? (
-          <div className="grid grid-cols-7 gap-1">
+          <div className="grid grid-cols-7 gap-2">
             {Array.from({ length: 35 }).map((_, i) => (
-              <div key={i} className="skeleton w-11 h-11 mx-auto" />
+              <div key={i} className="skeleton w-12 h-12 mx-auto" />
             ))}
           </div>
         ) : (
-          <div className="grid grid-cols-7 gap-1">
+          <div className="grid grid-cols-7 gap-2">
             {days.map((day, i) => {
-              if (!day) return <div key={`empty-${i}`} className="w-11 h-11" />;
+              if (!day) return <div key={`empty-${i}`} className="w-12 h-12" />;
 
               const status = getDayStatus(day);
               const dateStr = formatDate(day);
@@ -188,9 +188,13 @@ export default function BookingCalendar({ onDateSelect, selectedDate, requestedM
               const usedM3 = auslastungM3[dateStr] || 0;
               const freeM3 = maxM3PerDay - usedM3;
 
+              const statusText = status === 'disabled' ? 'nicht verfügbar'
+                : status === 'full' ? 'keine Kapazität'
+                : status === 'partial' ? 'begrenzt verfügbar'
+                : 'verfügbar';
               const ariaLabel = isBrunnen
-                ? `${day.getDate()}. ${MONTH_NAMES[viewMonth]}, verfügbar`
-                : `${day.getDate()}. ${MONTH_NAMES[viewMonth]}, ${status === 'full' ? 'nicht genug Kapazität' : freeM3 + ' m³ frei'}`;
+                ? `${day.getDate()}. ${MONTH_NAMES[viewMonth]} ${viewYear}, ${statusText}`
+                : `${day.getDate()}. ${MONTH_NAMES[viewMonth]} ${viewYear}, ${statusText}${status !== 'disabled' && status !== 'full' ? ', ' + freeM3 + ' m³ frei' : ''}`;
 
               return (
                 <button
@@ -215,7 +219,7 @@ export default function BookingCalendar({ onDateSelect, selectedDate, requestedM
         )}
 
         {/* Legend */}
-        <div className="flex items-center justify-center gap-5 mt-4 pt-3 border-t border-border/50 text-[11px] text-text-muted">
+        <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-5 mt-4 pt-3 border-t border-border/50 text-xs text-text-muted">
           <div className="flex items-center gap-1.5">
             <span className="w-2.5 h-2.5 rounded-sm bg-success/20 border border-success/30" />
             Frei
diff --git a/src/components/ConfirmationModal.tsx b/src/components/ConfirmationModal.tsx
index 9345664..a822500 100644
--- a/src/components/ConfirmationModal.tsx
+++ b/src/components/ConfirmationModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { ReactNode, useRef, useEffect } from 'react';
 
 interface ConfirmationModalProps {
   title: string;
@@ -22,9 +22,47 @@ function generateCalendarUrl(title: string, dateStr: string): string {
 }
 
 export default function ConfirmationModal({ title, message, onClose, details, calendarEvent, children }: ConfirmationModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+
+    const focusable = modal.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length > 0) focusable[0].focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { onClose(); return; }
+      if (e.key === 'Tab' && focusable.length > 0) {
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          last.focus(); e.preventDefault();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          first.focus(); e.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
   return (
-    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-0 sm:p-4 animate-fade-in">
-      <div className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl max-w-md w-full p-6 pb-8 animate-slide-up">
+    <div
+      className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-0 sm:p-4 animate-fade-in"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl max-w-md w-full p-6 animate-slide-up"
+        style={{ paddingBottom: 'max(2rem, env(safe-area-inset-bottom, 2rem))' }}
+      >
         {/* Animated Checkmark */}
         <div className="w-20 h-20 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-5 animate-checkmark-circle">
           <svg className="w-10 h-10 text-success" fill="none" viewBox="0 0 24 24">
@@ -39,7 +77,7 @@ export default function ConfirmationModal({ title, message, onClose, details, ca
           </svg>
         </div>
 
-        <h3 className="text-xl font-bold text-center mb-1">{title}</h3>
+        <h3 id="modal-title" className="text-xl font-bold text-center mb-1">{title}</h3>
         <p className="text-text-muted text-center text-sm mb-5">{message}</p>
 
         {/* Detail Card */}
@@ -62,7 +100,8 @@ export default function ConfirmationModal({ title, message, onClose, details, ca
             href={generateCalendarUrl(calendarEvent.title, calendarEvent.date)}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center justify-center gap-2 w-full py-3 mb-3 border border-border rounded-xl text-sm font-medium text-primary hover:bg-bg transition-colors"
+            aria-label="In Google Kalender speichern (öffnet neues Fenster)"
+            className="flex items-center justify-center gap-2 w-full py-3 mb-3 border border-border rounded-xl text-sm font-medium text-primary hover:bg-bg transition-colors focus:ring-2 focus:ring-accent focus:ring-offset-2"
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d052eb6..4e3c137 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,13 +2,13 @@ export default function Footer() {
   return (
     <footer className="mt-auto border-t border-border/50 bg-white">
       <div className="max-w-2xl mx-auto px-4 py-5 text-center space-y-1">
-        <p className="text-xs text-text-muted">
+        <p className="text-sm text-text-muted">
           Gemeindeamt Weißkirchen an der Traun
         </p>
-        <p className="text-[11px] text-text-muted/70">
-          <a href="tel:+4372435060" className="hover:text-primary">+43 7243 50600</a>
+        <p className="text-xs text-text-muted">
+          <a href="tel:+4372435060" className="hover:text-primary underline-offset-2 hover:underline transition-colors">+43 7243 50600</a>
           {' | '}
-          <a href="mailto:gemeinde@weisskirchen.ooe.gv.at" className="hover:text-primary">
+          <a href="mailto:gemeinde@weisskirchen.ooe.gv.at" className="hover:text-primary underline-offset-2 hover:underline transition-colors">
             gemeinde@weisskirchen.ooe.gv.at
           </a>
         </p>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 5b27f81..c3a4351 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -12,10 +12,10 @@ export default function Header({ back }: HeaderProps) {
           <div className="flex items-center gap-3">
             <Link
               href={back.href}
-              className="flex items-center gap-1 text-white/80 hover:text-white transition-colors -ml-1 py-1"
+              className="flex items-center gap-1 text-white/80 hover:text-white transition-colors -ml-1 px-2 py-2 rounded-lg focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary"
               aria-label={back.label}
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
               </svg>
               <span className="text-sm">{back.label}</span>
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 6ec9f5b..7b9b473 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -12,7 +12,14 @@ interface ProgressBarProps {
 
 export default function ProgressBar({ steps }: ProgressBarProps) {
   return (
-    <div className="flex items-center gap-1 w-full" role="progressbar" aria-label="Fortschritt">
+    <div
+      className="flex items-center gap-1 w-full"
+      role="progressbar"
+      aria-label="Buchungsprozess Fortschritt"
+      aria-valuenow={steps.filter(s => s.done).length + (steps.some(s => s.active) ? 1 : 0)}
+      aria-valuemin={0}
+      aria-valuemax={steps.length}
+    >
       {steps.map((step, i) => (
         <div key={step.label} className="flex items-center flex-1 last:flex-none">
           {/* Step indicator */}
@@ -34,7 +41,7 @@ export default function ProgressBar({ steps }: ProgressBarProps) {
                 i + 1
               )}
             </div>
-            <span className={`text-[10px] mt-1 font-medium ${
+            <span className={`text-xs mt-1 font-semibold ${
               step.done ? 'text-success' : step.active ? 'text-accent' : 'text-text-muted/50'
             }`}>
               {step.label}
