Add privacy modal

index.html

@@ -214,6 +214,9 @@
               <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>
 
@@ -293,6 +296,58 @@
       </div>
     </div>
 
+    <div class="privacy-flyover" hidden data-privacy-flyover>
+      <div class="privacy-flyover__backdrop" data-close-privacy></div>
+      <div
+        class="privacy-flyover__panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="privacy-title"
+      >
+        <button class="privacy-flyover__close" type="button" aria-label="Schliessen" data-close-privacy>
+          ×
+        </button>
+        <p class="privacy-flyover__eyebrow">Datenschutz</p>
+        <h2 id="privacy-title">Hinweise zum Datenschutz</h2>
+
+        <div class="privacy-flyover__content">
+          <p>
+            Der Schutz deiner persönlichen Daten ist uns wichtig. Wir bearbeiten
+            personenbezogene Daten vertraulich und im Rahmen der anwendbaren
+            Datenschutzgesetze. Beim Besuch dieser Website können technische Daten wie
+            IP-Adresse, Datum, Uhrzeit, Browser-Informationen und aufgerufene Seiten
+            erfasst werden. Diese Daten dienen dem sicheren Betrieb und der Optimierung
+            der Website.
+          </p>
+
+          <p>
+            Wenn du uns per E-Mail oder Kontaktformular kontaktierst, bearbeiten wir die
+            von dir übermittelten Angaben, um deine Anfrage zu beantworten. Das betrifft
+            insbesondere deinen Namen, deine E-Mail-Adresse, deine Telefonnummer und
+            deine Nachricht.
+          </p>
+
+          <p>
+            Personendaten werden nicht an Dritte verkauft. Eine Weitergabe erfolgt nur,
+            wenn sie technisch erforderlich ist, gesetzlich vorgeschrieben ist oder zur
+            Bearbeitung deiner Anfrage nötig ist. Du hast das Recht, Auskunft über deine
+            gespeicherten personenbezogenen Daten zu verlangen sowie deren Berichtigung
+            oder Löschung im Rahmen der gesetzlichen Vorgaben zu beantragen.
+          </p>
+
+          <div class="privacy-flyover__responsible">
+            <p>Verantwortlich für die Datenbearbeitung ist:</p>
+            <p>Naurua GmbH, Im Hochrain 2, 8102 Oberengstringen</p>
+            <p>
+              E-Mail:
+              <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
+            </p>
+            <p>Telefon: <a href="tel:+41786001411">+41 78 600 14 11</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="./script.js"></script>
   </body>
 </html>

script.js

@@ -2,6 +2,9 @@ const flyover = document.querySelector("[data-contact-flyover]");
 const flyoverPanel = document.querySelector(".contact-flyover__panel");
 const openButtons = document.querySelectorAll("[data-open-contact]");
 const closeButtons = document.querySelectorAll("[data-close-contact]");
+const privacyFlyover = document.querySelector("[data-privacy-flyover]");
+const openPrivacyButtons = document.querySelectorAll("[data-open-privacy]");
+const closePrivacyButtons = document.querySelectorAll("[data-close-privacy]");
 const copyButtons = document.querySelectorAll("[data-copy-value]");
 let lastTrigger = null;
 
@@ -41,7 +44,23 @@ const openFlyover = (trigger) => {
 const closeFlyover = () => {
   if (!flyover) return;
   flyover.hidden = true;
+  if (!privacyFlyover || privacyFlyover.hidden) {
     document.body.classList.remove("is-scroll-locked");
+  }
+};
+
+const openPrivacyFlyover = () => {
+  if (!privacyFlyover) return;
+  privacyFlyover.hidden = false;
+  document.body.classList.add("is-scroll-locked");
+};
+
+const closePrivacyFlyover = () => {
+  if (!privacyFlyover) return;
+  privacyFlyover.hidden = true;
+  if (!flyover || flyover.hidden) {
+    document.body.classList.remove("is-scroll-locked");
+  }
 };
 
 openButtons.forEach((button) => {
@@ -52,10 +71,22 @@ closeButtons.forEach((button) => {
   button.addEventListener("click", closeFlyover);
 });
 
+openPrivacyButtons.forEach((button) => {
+  button.addEventListener("click", openPrivacyFlyover);
+});
+
+closePrivacyButtons.forEach((button) => {
+  button.addEventListener("click", closePrivacyFlyover);
+});
+
 document.addEventListener("keydown", (event) => {
   if (event.key === "Escape" && flyover && !flyover.hidden) {
     closeFlyover();
   }
+
+  if (event.key === "Escape" && privacyFlyover && !privacyFlyover.hidden) {
+    closePrivacyFlyover();
+  }
 });
 
 window.addEventListener("resize", () => {

styles.css

@@ -543,6 +543,32 @@ button {
   text-transform: uppercase;
 }
 
+.footer__privacy-button {
+  width: fit-content;
+  margin-top: 0.9rem;
+  padding: 0.45rem 0.85rem;
+  border: 1px solid rgba(47, 58, 24, 0.2);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-dark);
+  font-size: 0.82rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.footer__privacy-button:hover,
+.footer__privacy-button:focus-visible {
+  background: rgba(47, 58, 24, 0.08);
+  border-color: rgba(47, 58, 24, 0.34);
+  transform: translateY(-1px);
+}
+
 .footer__claim {
   display: flex;
   flex-direction: column;
@@ -691,6 +717,90 @@ button {
   background: #ef49ae;
 }
 
+.privacy-flyover {
+  position: fixed;
+  inset: 0;
+  z-index: 21;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.privacy-flyover__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(24, 27, 18, 0.44);
+  backdrop-filter: blur(3px);
+}
+
+.privacy-flyover__panel {
+  position: relative;
+  width: min(680px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  margin: 2rem auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 2rem;
+  border-radius: var(--radius-panel);
+  background: var(--bg-light);
+  box-shadow: var(--shadow-panel);
+}
+
+.privacy-flyover__close {
+  position: absolute;
+  top: 0.9rem;
+  right: 0.9rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(47, 58, 24, 0.08);
+  color: var(--text-dark);
+  cursor: pointer;
+}
+
+.privacy-flyover__eyebrow {
+  margin: 0 0 0.4rem;
+  font-size: 0.95rem;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(54, 65, 33, 0.72);
+}
+
+.privacy-flyover h2 {
+  margin: 0;
+  padding-right: 2.75rem;
+  font-size: clamp(1.85rem, 3vw, 2.6rem);
+  line-height: 0.96;
+  font-weight: var(--font-weight-black);
+  text-transform: uppercase;
+}
+
+.privacy-flyover__content {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1.4rem;
+}
+
+.privacy-flyover__content p,
+.privacy-flyover__responsible p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.55;
+}
+
+.privacy-flyover__responsible {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem;
+  border-radius: var(--radius-small);
+  background: #edf1cc;
+}
+
+.privacy-flyover__responsible a {
+  color: inherit;
+}
+
 [hidden] {
   display: none !important;
 }
@@ -880,6 +990,11 @@ button {
     gap: 0.5rem;
   }
 
+  .footer__privacy-button {
+    margin-top: 0.35rem;
+    font-size: 0.78rem;
+  }
+
   .footer__claim-meta {
     align-items: flex-start;
     margin-top: 1.15rem;
@@ -963,4 +1078,43 @@ button {
     padding: 0.8rem 1rem;
     font-size: 0.95rem;
   }
+
+  .privacy-flyover__panel {
+    width: calc(100vw - 2.5rem);
+    max-height: calc(100dvh - 2.5rem);
+    margin: 1.25rem auto;
+    padding: 1.2rem;
+    border-radius: 2rem;
+  }
+
+  .privacy-flyover__close {
+    top: 0.8rem;
+    right: 0.8rem;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.5rem;
+  }
+
+  .privacy-flyover__eyebrow {
+    margin-bottom: 0.25rem;
+    font-size: 0.8rem;
+    letter-spacing: 0.07em;
+  }
+
+  .privacy-flyover h2 {
+    font-size: clamp(1.3rem, 6vw, 1.7rem);
+    line-height: 1.05;
+    text-transform: none;
+  }
+
+  .privacy-flyover__content {
+    gap: 0.85rem;
+    margin-top: 1rem;
+  }
+
+  .privacy-flyover__content p,
+  .privacy-flyover__responsible p {
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
 }