Fix mobile privacy modal

index.html

@@ -214,9 +214,6 @@
               <div class="footer__contact">
                 <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
                 <a href="tel:+41786001411">+41 78 600 14 11</a>
-                <button class="footer__privacy-button" type="button" data-open-privacy>
-                  Datenschutz
-                </button>
               </div>
             </div>
 
@@ -231,6 +228,10 @@
                 <span>© 2026 Naurua GmbH</span>
               </div>
             </div>
+
+            <button class="footer__privacy-button" type="button" data-open-privacy>
+              Datenschutz
+            </button>
           </div>
         </footer>
       </main>

styles.css

@@ -498,6 +498,9 @@ button {
 .footer__inner {
   display: grid;
   grid-template-columns: minmax(240px, 0.95fr) minmax(420px, 1.15fr);
+  grid-template-areas:
+    "left right"
+    "privacy right";
   align-items: end;
   gap: clamp(2rem, 7vw, 6rem);
   min-height: 325px;
@@ -510,12 +513,14 @@ button {
 }
 
 .footer__column--left {
+  grid-area: left;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100%;
 }
 
 .footer__column--right {
+  grid-area: right;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
@@ -544,8 +549,10 @@ button {
 }
 
 .footer__privacy-button {
+  grid-area: privacy;
+  justify-self: start;
+  align-self: end;
   width: fit-content;
-  margin-top: 0.9rem;
   padding: 0.45rem 0.85rem;
   border: 1px solid rgba(47, 58, 24, 0.2);
   border-radius: 999px;
@@ -974,6 +981,10 @@ button {
 
   .footer__inner {
     grid-template-columns: 1fr;
+    grid-template-areas:
+      "left"
+      "right"
+      "privacy";
     gap: 2rem;
     min-height: auto;
     padding-top: 2.6rem;
@@ -994,8 +1005,9 @@ button {
   }
 
   .footer__privacy-button {
-    margin-top: 0.35rem;
+    margin-top: 0;
     font-size: 0.78rem;
+    order: 3;
   }
 
   .footer__claim-meta {
@@ -1082,9 +1094,15 @@ button {
     font-size: 0.95rem;
   }
 
+  .privacy-flyover {
+    align-items: flex-end;
+    padding: 1.25rem;
+  }
+
   .privacy-flyover__panel {
     width: calc(100vw - 2.5rem);
     max-height: calc(100dvh - 2.5rem);
+    margin: 0;
     padding: 1.2rem;
     border-radius: 2rem;
   }