/* * brand-grid.css * Einheitliches Kartenoptik-Gitternetz als durchgehendes "Markenzeichen" im * Seitenhintergrund - EINE einzige Quelle für das Muster (ursprünglich nur * im Hero auf der Startseite), damit es auf allen Seiten optisch identisch * ist statt pro Section leicht unterschiedlich nachgebaut zu werden. * * Funktionsweise: zwei fixed positionierte Pseudo-Elemente auf , * z-index -1 - das Muster liegt damit automatisch hinter jedem normalen * Seiteninhalt, ohne dass einzelne Sections eigene z-index-Regeln oder * position:relative brauchen. Sections mit eigenem, undurchsichtigem * Hintergrund (z.B. rote CTA-Flächen) verdecken das Muster dort ganz normal - * das ist gewollt, nur helle/neutrale Flächen lassen es durchscheinen. * * Einbindung: in jeder Seite, die das Muster zeigen soll, direkt einbinden - * unabhängig von den jeweiligen landing*.css-Dateien. */ body { position: relative; } body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); z-index: -2; pointer-events: none; } body::after { content: ''; position: fixed; inset: 0; background-image: /* Haupt-Gitternetz für Kartenoptik */ linear-gradient(rgba(231, 76, 60, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(231, 76, 60, 0.08) 1px, transparent 1px), /* Feineres Gitternetz */ linear-gradient(rgba(52, 152, 219, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 152, 219, 0.04) 1px, transparent 1px), /* Diagonale Linien für zusätzliche Kartenästhetik */ linear-gradient(45deg, rgba(231, 76, 60, 0.02) 1px, transparent 1px), linear-gradient(-45deg, rgba(231, 76, 60, 0.02) 1px, transparent 1px), /* Sehr dezente "Straßen"-Linien */ linear-gradient(rgba(44, 62, 80, 0.03) 2px, transparent 2px), linear-gradient(90deg, rgba(44, 62, 80, 0.03) 2px, transparent 2px); background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px, 35px 35px, 35px 35px, 200px 200px, 200px 200px; background-position: 0 0, 0 0, 12.5px 12.5px, 12.5px 12.5px, 0 0, 0 0, 0 0, 0 0; animation: brandGridLines 30s ease-in-out infinite; z-index: -1; pointer-events: none; } @keyframes brandGridLines { 0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); opacity: 1; } 25% { transform: translateX(3px) translateY(-2px) rotate(0.1deg); opacity: 0.8; } 50% { transform: translateX(-2px) translateY(3px) rotate(-0.1deg); opacity: 0.9; } 75% { transform: translateX(2px) translateY(-1px) rotate(0.05deg); opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } }