feat: implement minimalist corporate design (Horizontal Bohrung & Graben-Trace)

Former-commit-id: 7f7c3d20bd6c746ef19140c532a64c518a31802b

app/[locale]/layout.tsx

@@ -17,6 +17,7 @@ import { cookies } from 'next/headers';
 import { TransitionProvider } from '@/components/providers/TransitionProvider';
 import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
 import { InitialLoader } from '@/components/providers/InitialLoader';
+import { TrenchLines } from '@/components/ui/decorations/TrenchLines';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -179,6 +180,7 @@ export default async function Layout(props: {
           <TransitionProvider>
             <InitialLoader shouldShowLoader={!hasSeenLoader} />
             <PageTransitionShutter />
+            <TrenchLines />
             <SkipLink />
             <Header navLinks={navLinks} />
             

app/globals.css

@@ -15,6 +15,42 @@
   .hide-scrollbar::-webkit-scrollbar {
     display: none; /* Chrome, Safari and Opera */
   }
+
+  /* Trassen-Hover Effect for Bento Grids */
+  .trassen-border {
+    position: relative;
+  }
+  .trassen-border::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 200%;
+    background: conic-gradient(from 0deg, transparent 70%, #0e7a5c 100%);
+    transform: translate(-50%, -50%) rotate(0deg);
+    animation: rotate-trasse 3s linear infinite;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    z-index: 0;
+    pointer-events: none;
+  }
+  .trassen-border:hover::before {
+    opacity: 1;
+  }
+  .trassen-content {
+    position: absolute;
+    inset: 1px;
+    z-index: 1;
+    border-radius: inherit;
+    background-color: #050B14;
+    background-clip: padding-box;
+  }
+}
+
+@keyframes rotate-trasse {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
 /* Base Styles */