diff --git a/hifi-src/src/assets/contact/bg-dark.png b/hifi-src/src/assets/contact/bg-dark.png new file mode 100644 index 0000000..985cf65 Binary files /dev/null and b/hifi-src/src/assets/contact/bg-dark.png differ diff --git a/hifi-src/src/assets/contact/bg-light.png b/hifi-src/src/assets/contact/bg-light.png new file mode 100644 index 0000000..8d6d742 Binary files /dev/null and b/hifi-src/src/assets/contact/bg-light.png differ diff --git a/hifi-src/src/assets/contact/car-light.png b/hifi-src/src/assets/contact/car-light.png deleted file mode 100644 index 3f55fba..0000000 Binary files a/hifi-src/src/assets/contact/car-light.png and /dev/null differ diff --git a/hifi-src/src/assets/contact/grunge.png b/hifi-src/src/assets/contact/grunge.png deleted file mode 100644 index 59c232f..0000000 Binary files a/hifi-src/src/assets/contact/grunge.png and /dev/null differ diff --git a/hifi-src/src/assets/contact/splatter.png b/hifi-src/src/assets/contact/splatter.png deleted file mode 100644 index 94f6b1f..0000000 Binary files a/hifi-src/src/assets/contact/splatter.png and /dev/null differ diff --git a/hifi-src/src/index.css b/hifi-src/src/index.css index 580fa68..8c7f737 100644 --- a/hifi-src/src/index.css +++ b/hifi-src/src/index.css @@ -80,26 +80,16 @@ html { --kf-pkgbrd: rgba(168, 225, 12, 0.4); --kf-btntext: #0f1208; } -/* Auto-Foto unten links im Light Mode: das Asset ist nur 310x512px und darf - NICHT auf Sektionsgroesse gestreckt werden - natuerliche Proportionen, - Breite per clamp gedeckelt (~460px). Doppelmaske (rechts + oben) laesst es - ohne harte Kanten in den Seitenverlauf auslaufen. */ -.kontakt-bg-foto { - position: absolute; - left: 0; - bottom: 0; - width: clamp(280px, 24vw, 460px); /* Höhe automatisch, Seitenverhältnis beibehalten */ - height: auto; - pointer-events: none; - z-index: 0; - opacity: 0.9; - /* weiches Auslaufen nach rechts UND nach oben, keine harten Kanten: */ - -webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%), - linear-gradient(180deg, transparent 0%, black 45%); - -webkit-mask-composite: source-in; - mask-image: linear-gradient(90deg, black 55%, transparent 100%), - linear-gradient(180deg, transparent 0%, black 45%); - mask-composite: intersect; +/* Kontakt-Sektion: EIN fertig gebackenes Hintergrundbild pro Theme (enthaelt + Verlauf, Auto-Foto, Wellenlinien bzw. Grunge/Splatter/Kreisbogen komplett) - + keine eigenen Ebenen, Filter oder Verlaeufe mehr (README "Hintergruende"). */ +.kontakt-sektion { + background-image: url('./assets/contact/bg-light.png'); + background-size: cover; + background-position: center; +} +.dark .kontakt-sektion { + background-image: url('./assets/contact/bg-dark.png'); } .kf-page input::placeholder, diff --git a/hifi-src/src/pages/public/ContactPage.jsx b/hifi-src/src/pages/public/ContactPage.jsx index 414e979..91119f5 100644 --- a/hifi-src/src/pages/public/ContactPage.jsx +++ b/hifi-src/src/pages/public/ContactPage.jsx @@ -7,9 +7,8 @@ import { useSiteSettings } from '../../context/SiteSettingsContext.jsx'; import { useLanguage } from '../../context/LanguageContext.jsx'; import { useCookieConsent } from '../../context/CookieConsentContext.jsx'; import { User, Mail, Phone, Car, Package, Send, MapPin, ExternalLink } from 'lucide-react'; -import grungeBg from '../../assets/contact/grunge.png'; -import splatterBg from '../../assets/contact/splatter.png'; -import carPhoto from '../../assets/contact/car-light.png'; +// Die Sektions-Hintergruende (bg-light.png / bg-dark.png) kommen als fertig +// gebackene Einzelbilder ueber die CSS-Klasse .kontakt-sektion (index.css). const digitsOnly = (value) => (value || '').replace(/[^\d+]/g, ''); const waHref = (whatsapp) => `https://wa.me/${digitsOnly(whatsapp).replace(/^0/, '49').replace('+', '')}`; @@ -166,78 +165,9 @@ export default function ContactPage() { return (
- {/* Dark Mode: Grunge-Textur + Splatter + Bogen (Assets aus dem Handoff) */} -