/* ========================================================================== custom.css – Bild- und Layout-Ergänzungen für die Lübecker Bauunternehmen Website. Wird NACH dem Next.js-Stylesheet geladen, nutzt !important, wo Tailwind-Klassen überschrieben werden müssen. ========================================================================== */ /* --- Hero-Sections: echtes Foto als Hintergrund --------------------------- */ /* Der bestehende Pattern-Div (opacity-10) wird zum Bild-Container umgebaut. */ section.relative[class*="bg-gradient-to-br"] > div.absolute.inset-0[style] { opacity: 1 !important; background-image: none !important; } /* Lesbarkeit sicherstellen: Gradient-Overlay direkt im Section-Element */ section.relative[class*="bg-gradient-to-br"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(12, 24, 48, 0.65) 0%, rgba(12, 24, 48, 0.45) 60%, rgba(12, 24, 48, 0.25) 100% ); z-index: 1; pointer-events: none; } /* Der Content-Container liegt über dem Overlay (position:relative nötig für z-index) */ section.relative[class*="bg-gradient-to-br"] > div.relative, section.relative[class*="bg-gradient-to-br"] > div.max-w-7xl, section.relative[class*="bg-gradient-to-br"] > div { position: relative !important; z-index: 2 !important; } /* Hero-Texte auf Unterseiten: Weiß erzwingen, damit sie auf dem Bild lesbar sind */ section.relative[class*="bg-gradient-to-br"] h1 { color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.8) !important; } section.relative[class*="bg-gradient-to-br"] p { color: rgba(255, 255, 255, 0.94) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55) !important; } /* Kleine Kicker über der Überschrift (z.B. "HAUSBAU") heller machen */ section.relative[class*="bg-gradient-to-br"] .text-brand-300, section.relative[class*="bg-gradient-to-br"] .text-brand-400, section.relative[class*="bg-gradient-to-br"] .text-brand-200 { color: #a5c2ff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; font-weight: 700 !important; } /* Hero-Overlay etwas heller machen, damit Bilder besser zur Geltung kommen */ section.relative[class*="bg-gradient-to-br"]::after { background: linear-gradient( 135deg, rgba(12, 24, 48, 0.65) 0%, rgba(12, 24, 48, 0.45) 55%, rgba(12, 24, 48, 0.25) 100% ) !important; } /* Das Hintergrund-Image wird per Hero-Class gesetzt (wird pro Seite inline im via