From fc19fef5764294f611a33168d7b7d733513b4280 Mon Sep 17 00:00:00 2001
From: Marvin Gemlin <marvin.gemlin@outlook.de>
Date: Tue, 29 Sep 2026 15:15:24 +0000
Subject: [PATCH] style(contact): Kontakt-Popup an das Design des
 Buchungsdialogs angleichen

Buttonfarbe, Rundungen, Formularfelder und Fensterdarstellung vereinheitlichen; bestehende Schriftfarben beibehalten.
---
 src/features/contact/contact.css | 68 ++++++++++++++++----------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/features/contact/contact.css b/src/features/contact/contact.css
index 1e53103..fd7a660 100644
--- a/src/features/contact/contact.css
+++ b/src/features/contact/contact.css
@@ -23,30 +23,30 @@
     --contact-foreground: oklch(96% 0.008 210);
     --contact-accent: oklch(70% 0.12 205);
     box-sizing: border-box;
-    width: min(586px, calc(100% - 32px));
-    max-height: calc(100dvh - 32px);
+    width: min(32rem, calc(100vw - 2rem));
+    max-height: calc(100dvh - 2rem);
     margin: auto;
-    padding: 32px;
-    border: 1px solid oklch(100% 0 0 / 0.1);
-    border-radius: 1.1rem;
-    background: oklch(17% 0.024 221);
+    padding: 1.75rem;
+    overflow-y: auto;
+    border: 1px solid #324449;
+    border-radius: 1.25rem;
+    background: #071316;
     color: var(--contact-foreground);
     font:
         400 16px/1.5 "DM Sans",
         sans-serif;
     -webkit-font-smoothing: antialiased;
-    box-shadow: 0 24px 80px #0008;
+    box-shadow: 0 1.5rem 4rem #0006;
 }
 .contact-dialog::backdrop {
-    background: #000a;
-    backdrop-filter: blur(4px);
+    background: rgb(0 0 0 / 65%);
 }
 .contact-dialog * {
     box-sizing: border-box;
 }
 .contact-dialog h2 {
     margin: 8px 32px 8px 0;
-    font-size: 28px;
+    font-size: 1.35rem;
     line-height: 1.25;
 }
 .contact-dialog p {
@@ -69,54 +69,57 @@
 }
 .contact-form label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 0.35rem;
+    font-weight: 600;
 }
 .contact-form input:not([type="checkbox"]),
 .contact-form select {
     width: 100%;
-    min-height: 48px;
-    padding: 10px 12px;
-    border: 1px solid oklch(100% 0 0 / 0.12);
-    border-radius: 6px;
-    background: oklch(13% 0.022 223);
+    min-height: 2.75rem;
+    padding: 0.65rem 0.8rem;
+    border: 1px solid #61777d;
+    border-radius: 0.75rem;
+    background: #101e22;
     color: inherit;
     font: inherit;
     color-scheme: dark;
 }
 .contact-dialog button {
-    min-height: 44px;
-    padding: 10px 16px;
-    border: 0;
-    border-radius: 6px;
-    font:
-        500 14px/1.5 "DM Sans",
-        sans-serif;
+    min-height: 2.75rem;
+    padding: 0.65rem 0.8rem;
+    border: 1px solid transparent;
+    border-radius: 0.75rem;
+    font: inherit;
     cursor: pointer;
 }
 .contact-dialog .contact-close {
-    float: right;
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
     padding: 0;
-    width: 44px;
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 0;
     background: transparent;
     color: inherit;
     font-size: 28px;
 }
 .contact-submit {
     width: 100%;
-    background: white;
+    background: #53d5cd;
     color: oklch(20% 0.03 220);
 }
 .contact-submit:hover:not(:disabled) {
-    background: var(--contact-accent);
+    background: #6de0d9;
 }
 
 .contact-dialog :disabled {
-    opacity: 0.5;
+    opacity: 0.7;
     cursor: not-allowed;
 }
 .contact-dialog :focus-visible {
-    outline: 3px solid oklch(70% 0.12 205 / 0.45);
-    outline-offset: 3px;
+    outline: 3px solid #53d5cd;
+    outline-offset: 4px;
 }
 .contact-dialog .contact-help {
     margin-top: 8px;
@@ -145,8 +148,3 @@
 .contact-status a {
     color: var(--contact-accent);
 }
-@media (max-width: 480px) {
-    .contact-dialog {
-        padding: 24px 20px;
-    }
-}