design

app/globals.css

@@ -42,6 +42,41 @@
     perspective: 1000px;
   }
 
+  .grid-pattern {
+    background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .tech-line {
+    @apply absolute h-px bg-accent/20;
+  }
+
+  .tech-dot {
+    @apply absolute w-1 h-1 bg-accent/30 rounded-full;
+  }
+
+  .tech-corner {
+    @apply absolute w-4 h-4 border-accent/30;
+  }
+
+  .section-number {
+    @apply absolute -left-12 top-0 text-6xl font-black text-slate-100 select-none pointer-events-none hidden lg:block;
+    font-family: monospace;
+  }
+
+  .tech-card-border {
+    @apply relative;
+  }
+
+  .tech-card-border::before {
+    content: '';
+    @apply absolute -inset-px bg-gradient-to-br from-accent/20 via-transparent to-accent/20 rounded-[inherit] opacity-0 transition-opacity duration-500;
+  }
+
+  .tech-card-border:hover::before {
+    @apply opacity-100;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold tracking-tight text-primary;
     text-wrap: balance;

app/impressum/page.tsx

@@ -1,20 +1,25 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { TechBackground } from '@/components/TechBackground';
 
 export default function Legal() {
   return (
-    <div className="bg-slate-50 min-h-screen pt-32 pb-20">
-      <div className="container-custom">
+    <div className="bg-slate-50 min-h-screen pt-32 pb-20 relative overflow-hidden">
+      <TechBackground />
+      <div className="container-custom relative z-10">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100"
+          transition={{ type: "spring", stiffness: 50, damping: 20 }}
+          className="max-w-4xl mx-auto bg-white p-8 md:p-16 rounded-[2.5rem] shadow-sm border border-slate-100 relative overflow-hidden group"
         >
-          <h1 className="text-4xl font-extrabold text-primary mb-12">Impressum</h1>
+          <div className="tech-corner top-8 left-8 border-t-2 border-l-2 opacity-20" />
+          <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2 opacity-20" />
           
-          <div className="space-y-12 text-slate-600 leading-relaxed">
+          <h1 className="text-4xl font-extrabold text-primary mb-12 relative z-10">Impressum</h1>
+          
+          <div className="space-y-12 text-slate-600 leading-relaxed relative z-10">
             <section>
               <h2 className="text-xl font-bold text-primary mb-4">Angaben gemäß § 5 TMG</h2>
               <p>