contact form

app/contact/page.tsx

@@ -6,21 +6,21 @@ import { ContactForm } from '../../src/components/ContactForm';
 
 export default function ContactPage() {
   return (
-    <div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
-      <PageHeader 
+    <div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
+      <PageHeader
         title={<>Projekt <br /><span className="text-slate-200">konfigurieren.</span></>}
         description="Nutzen Sie den Konfigurator für eine erste Einschätzung oder schreiben Sie mir direkt eine Email."
         backLink={{ href: '/', label: 'Zurück' }}
         backgroundSymbol="?"
       />
 
-      <Section number="01" title="Konfigurator" containerVariant="wide">
+      <Section number="01" title="Konfigurator" containerVariant="wide" className="!py-12">
         <Reveal delay={0.2}>
           <ContactForm />
         </Reveal>
       </Section>
 
-      <Section number="02" title="Direkt">
+      <Section number="02" title="Direkt" className="!py-12">
         <div className="grid grid-cols-1 gap-24">
           <Reveal delay={0.4}>
             <div className="space-y-8">

app/globals.css

@@ -11,6 +11,7 @@
   body {
     @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
     line-height: 1.8;
+    -webkit-tap-highlight-color: transparent;
   }
   
   /* Typography */
@@ -64,10 +65,30 @@
   }
   
   /* Focus states */
+  a, button, input, textarea {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   a:focus,
   button:focus,
-  input:focus {
-    @apply outline-none ring-2 ring-slate-900 ring-offset-2 rounded-sm;
+  input:focus,
+  textarea:focus,
+  a:active,
+  button:active,
+  input:active,
+  textarea:active,
+  a:focus-visible,
+  button:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible {
+    outline: none !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    border-radius: inherit !important;
+  }
+
+  button::-moz-focus-inner {
+    border: 0 !important;
   }
 }