diff --git a/hifi-src/src/index.css b/hifi-src/src/index.css index 949d68a..580fa68 100644 --- a/hifi-src/src/index.css +++ b/hifi-src/src/index.css @@ -80,6 +80,28 @@ 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; +} + .kf-page input::placeholder, .kf-page textarea::placeholder { color: var(--kf-fieldicon); diff --git a/hifi-src/src/pages/public/ContactPage.jsx b/hifi-src/src/pages/public/ContactPage.jsx index e692afc..414e979 100644 --- a/hifi-src/src/pages/public/ContactPage.jsx +++ b/hifi-src/src/pages/public/ContactPage.jsx @@ -190,30 +190,23 @@ export default function ContactPage() { - {/* Light Mode: Auto-Foto unten links verankert + gruener Lichtstreifen rechts (ab 981px, s. README). - Maske uebernimmt die weiche Ausblendung nach oben (kein harter oberer Rand bei - voller Hoehe), der Scrim obendrauf das weiche Verlaufen nach rechts in die Seite. */} + {/* Light Mode: Auto-Foto unten links in NATUERLICHER Groesse (310x512-Asset, + Breite per clamp ~460px gedeckelt, siehe .kontakt-bg-foto in index.css) - + nicht auf Sektionsgroesse strecken. Ab 981px, im Dark Mode aus. */} + + {/* Gruene Lichtstreifen-Gruppe rechts: volle Sektionshoehe, 42% Breite, + 6 Grad rotiert, vier Ebenen (README "Hintergruende -> Light Mode"). */}