`;
+ const dialog = document.querySelector(".cookie-settings-dialog");
+ const cookieLink = document.querySelector(".trihub-cookie-link");
+ const preferenceKey = "triHubCookiePreferences";
+
+ const loadPreferences = () => {
+ try {
+ return JSON.parse(localStorage.getItem(preferenceKey) || "{}");
+ } catch {
+ return {};
+ }
+ };
+
+ cookieLink?.addEventListener("click", (event) => {
+ event.preventDefault();
+ const preferences = loadPreferences();
+ for (const category of ["comfort", "analysis", "marketing"]) {
+ const input = dialog.querySelector(`input[name="${category}"]`);
+ input.checked = preferences[category] === true;
+ }
+ dialog.showModal();
+ });
+
+ const closeDialog = () => dialog.close();
+ dialog.querySelector(".cookie-settings-close").addEventListener("click", closeDialog);
+ dialog.querySelector(".cookie-settings-back").addEventListener("click", closeDialog);
+ dialog.querySelector(".cookie-settings-save").addEventListener("click", () => {
+ const preferences = { necessary: true };
+ for (const category of ["comfort", "analysis", "marketing"]) {
+ preferences[category] = dialog.querySelector(`input[name="${category}"]`).checked;
+ }
+ try {
+ localStorage.setItem(preferenceKey, JSON.stringify(preferences));
+ } catch {
+ // Der Dialog bleibt auch ohne verfügbaren Speicher bedienbar.
+ }
+ closeDialog();
+ });
+
+ dialog.addEventListener("click", (event) => {
+ if (event.target === dialog) closeDialog();
+ });
}
document.addEventListener("DOMContentLoaded", () => initFooter());
diff --git a/src/styles/footer.css b/src/styles/footer.css
index c779dbc..a5d609a 100644
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -227,3 +227,206 @@
align-items: flex-start;
}
}
+
+.cookie-settings-dialog,
+.cookie-settings-dialog * {
+ box-sizing: border-box;
+}
+
+.cookie-settings-dialog {
+ width: min(58rem, calc(100% - 2rem));
+ max-width: none;
+ max-height: calc(100% - 2rem);
+ margin: auto;
+ padding: clamp(1.25rem, 3vw, 2.1rem);
+ overflow-y: auto;
+ border: 1px solid rgba(255, 255, 255, 0.14);
+ border-radius: 1.4rem;
+ background: #071217;
+ color: #f8fafc;
+ box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
+ font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.cookie-settings-dialog::backdrop {
+ background: rgba(0, 0, 0, 0.72);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+}
+
+.cookie-settings-heading {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 1.5rem;
+ margin-bottom: 1.75rem;
+}
+
+.cookie-settings-eyebrow {
+ margin: 0 0 0.45rem;
+ color: rgba(255, 255, 255, 0.52);
+ font-size: 0.72rem;
+ letter-spacing: 0.22em;
+}
+
+.cookie-settings-heading h2 {
+ margin: 0;
+ font-family: inherit;
+ color: #fff;
+ font-size: clamp(1.6rem, 4vw, 2.15rem);
+ line-height: 1.15;
+}
+
+.cookie-settings-close {
+ flex: 0 0 auto;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: #fff;
+ font: inherit;
+ font-size: 2.1rem;
+ line-height: 1;
+ cursor: pointer;
+}
+
+.cookie-settings-options {
+ display: grid;
+ gap: 0.9rem;
+}
+
+.cookie-option {
+ position: relative;
+ display: flex;
+ min-height: 5.25rem;
+ align-items: center;
+ justify-content: space-between;
+ gap: 3.5rem;
+ padding: 1.1rem 1.25rem;
+ border: 1px solid rgba(255, 255, 255, 0.11);
+ border-radius: 1.2rem;
+ background: rgba(255, 255, 255, 0.065);
+ cursor: pointer;
+}
+
+.cookie-option-copy {
+ display: grid;
+ gap: 0.35rem;
+}
+
+.cookie-option-copy strong {
+ color: #fff;
+ font-size: 1.05rem;
+ font-weight: 600;
+}
+
+.cookie-option-copy > span {
+ color: rgba(255, 255, 255, 0.66);
+ font-size: 0.94rem;
+ line-height: 1.55;
+}
+
+.cookie-option input {
+ position: absolute;
+ top: 1.15rem;
+ right: 1.25rem;
+ z-index: 1;
+ width: 3.25rem;
+ height: 1.75rem;
+ margin: 0;
+ opacity: 0;
+ cursor: pointer;
+}
+
+.cookie-toggle {
+ position: absolute;
+ top: 1.1rem;
+ right: 1.15rem;
+ width: 3.25rem;
+ height: 1.75rem;
+ border-radius: 999px;
+ background: #465057;
+ transition: background-color 0.18s ease;
+}
+
+.cookie-toggle::before {
+ content: "";
+ position: absolute;
+ top: 0.2rem;
+ left: 0.2rem;
+ width: 1.35rem;
+ height: 1.35rem;
+ border-radius: 50%;
+ background: #fff;
+ transition: transform 0.18s ease;
+}
+
+.cookie-option input:checked + .cookie-toggle {
+ background: #00bfd2;
+}
+
+.cookie-option input:checked + .cookie-toggle::before {
+ transform: translateX(1.5rem);
+}
+
+.cookie-option input:focus-visible + .cookie-toggle,
+.cookie-settings-dialog button:focus-visible {
+ outline: 3px solid #4edbdc;
+ outline-offset: 3px;
+}
+
+.cookie-option input:disabled {
+ cursor: not-allowed;
+}
+
+.cookie-settings-actions {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 0.75rem;
+ margin-top: 1.5rem;
+}
+
+.cookie-settings-actions button {
+ min-height: 3rem;
+ padding: 0.7rem 1.2rem;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ border-radius: 999px;
+ background: transparent;
+ color: #f8fafc;
+ font: inherit;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.cookie-settings-actions .cookie-settings-save {
+ border-color: #fff;
+ background: #fff;
+ color: #102027;
+}
+
+@media (max-width: 600px) {
+ .cookie-settings-dialog {
+ width: calc(100% - 1.25rem);
+ padding: 1.2rem;
+ border-radius: 1.1rem;
+ }
+
+ .cookie-option {
+ align-items: flex-start;
+ padding: 1rem 4rem 1rem 1rem;
+ }
+
+ .cookie-option input,
+ .cookie-toggle {
+ top: 1rem;
+ right: 0.85rem;
+ }
+
+ .cookie-settings-actions {
+ flex-direction: column-reverse;
+ }
+
+ .cookie-settings-actions button {
+ width: 100%;
+ }
+}
--
2.51.0